/* ============================================================
   DOXUNO — Template System CSS
   Shared styles for all document templates.
   Each template loads: ../style.css  +  ../template.css
   Template-specific styles (letter, contract, cv layouts)
   stay in the individual file's <style> block.
   ============================================================ */

/* ── Base ────────────────────────────────────────────────── */
body { background: var(--gray-50); overflow-x: hidden; }

/* ── Template Header ─────────────────────────────────────── */
.tpl-header {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
.tpl-header-inner {
  max-width: 1300px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; gap: 16px;
}
.tpl-doc-title {
  display: block;
  font-size: 14px; font-weight: 700; color: var(--black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.tpl-doc-sub {
  display: block;
  font-size: 11px; color: var(--gray-500); font-weight: 400;
  margin-top: 2px;
}

/* ── Steps Bar ───────────────────────────────────────────── */
.steps-bar {
  display: flex; align-items: center; gap: 0;
  flex: 1; justify-content: center; max-width: 460px;
}
.step-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--gray-400);
  white-space: nowrap; cursor: default; padding: 6px 0;
}
.step-num {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--gray-300);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; transition: all .3s;
}
.step-item.active { color: var(--black); }
.step-item.active .step-num { border-color: var(--black); background: var(--black); color: var(--white); }
.step-item.done { color: var(--green); }
.step-item.done .step-num { border-color: var(--green); background: var(--green); color: var(--white); }
.step-item.done .step-num::after { content: '✓'; font-size: 11px; }
.step-item.done .step-label { display: none; }
.step-connector {
  width: 40px; height: 2px; background: var(--gray-200);
  margin: 0 4px; flex-shrink: 0; transition: background .3s;
}
.step-connector.done { background: var(--green); }
.tpl-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Layout ──────────────────────────────────────────────── */
.tpl-layout {
  display: grid; grid-template-columns: 460px 1fr;
  margin-top: 124px; min-height: calc(100vh - 124px);
}

/* ── Form Panel ──────────────────────────────────────────── */
.form-panel {
  background: var(--white); border-right: 1px solid var(--gray-200);
  display: flex; flex-direction: column; position: relative;
}
.form-scrollable {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 28px 24px 120px; scroll-behavior: smooth;
}
.form-scrollable::-webkit-scrollbar { width: 4px; }
.form-scrollable::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }

/* ── Accordion Sections ──────────────────────────────────── */
.form-section {
  margin-bottom: 8px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md); overflow: hidden; transition: border-color .2s;
}
.form-section.open { border-color: var(--black); }
.section-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer; background: var(--white);
  width: 100%; text-align: left; font-family: var(--font); gap: 12px;
  transition: background .15s;
}
.section-trigger:hover { background: var(--gray-50); }
.form-section.open .section-trigger { background: var(--gray-50); }
.section-trigger-left { display: flex; align-items: center; gap: 12px; }
.section-num {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--gray-100); color: var(--gray-700);
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s;
}
.form-section.open .section-num { background: var(--black); color: var(--white); }
.form-section.filled .section-num { background: var(--green); color: var(--white); }
.section-name { font-size: 13px; font-weight: 700; color: var(--black); }
.section-status { font-size: 11px; color: var(--gray-500); margin-top: 1px; }
.section-chevron { color: var(--gray-400); transition: transform .25s; flex-shrink: 0; }
.form-section.open .section-chevron { transform: rotate(180deg); }
.section-body {
  padding: 0 16px; max-height: 0; overflow: hidden;
  transition: max-height .3s ease, padding .3s;
}
.form-section.open .section-body { max-height: 2000px; padding: 8px 16px 16px; }

/* ══════════════════════════════════════════════════════════
   FORM COMPONENTS — Design System v2
   Single source of truth. .form-field is an alias for .field-group.
   ══════════════════════════════════════════════════════════ */

/* ── Field wrapper ───────────────────────────────────────── */
/* .field is an alias for .field-group (used by newer US templates) */
.field-group,
.form-field,
.field {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px;
}
/* Field header label */
.field-group > label,
.form-field > label,
.field > label {
  font-size: 11px; font-weight: 700; color: var(--gray-700);
  letter-spacing: .2px; display: flex; align-items: center; gap: 4px;
}
.field-group label .req,
.form-field label .req,
.field label .req { color: #ef4444; font-size: 12px; }
.field-hint,
.field .hint { font-size: 11px; color: var(--gray-500); line-height: 1.4; }

/* ── Text inputs, selects, textareas ─────────────────────── */
.field-group input,   .form-field input,   .field input,
.field-group select,  .form-field select,  .field select,
.field-group textarea,.form-field textarea,.field textarea {
  padding: 9px 12px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--black);
  background: var(--white); outline: none; font-family: var(--font);
  transition: border-color .2s, box-shadow .2s; width: 100%; box-sizing: border-box;
}
.field-group input:focus,   .form-field input:focus,   .field input:focus,
.field-group select:focus,  .form-field select:focus,  .field select:focus,
.field-group textarea:focus,.form-field textarea:focus,.field textarea:focus {
  border-color: var(--black); box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}
.field-group input::placeholder,.form-field input::placeholder,.field input::placeholder { color: var(--gray-400); }
.field-group textarea,.form-field textarea,.field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

/* Select — dropdown arrow */
.field-group select,
.form-field select,
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 32px;
}

/* ── Checkbox & Radio reset ──────────────────────────────── */
/* Prevent the full-width input rule from stretching checkboxes/radios */
.field-group input[type="checkbox"], .form-field input[type="checkbox"], .field input[type="checkbox"],
.field-group input[type="radio"],    .form-field input[type="radio"],    .field input[type="radio"] {
  width: auto !important; min-width: auto; padding: 0;
  border: none !important; box-shadow: none !important;
  background: none; border-radius: 0; appearance: auto; -webkit-appearance: auto;
  background-image: none !important;
  flex-shrink: 0; cursor: pointer; margin: 0;
  accent-color: var(--black);
}

/* ── Option rows (radio / checkbox groups) ───────────────── */
/* Vertical stack */
.opt-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
/* Horizontal wrap */
.opt-rows.inline { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
/* Individual option label — used on <label> wrapping <input type=radio/checkbox> */
.opt-row,
.radio-option,
.form-radio {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 13px; font-weight: 400;
  color: var(--gray-700); line-height: 1.4; letter-spacing: 0;
}
/* Reset inputs inside any opt-row label too */
.opt-row input[type="radio"],    .radio-option input[type="radio"],
.opt-row input[type="checkbox"], .radio-option input[type="checkbox"],
.form-radio input[type="radio"],  .form-radio input[type="checkbox"],
.radio-group input[type="radio"], .radio-group input[type="checkbox"] {
  width: auto !important; padding: 0; border: none !important;
  box-shadow: none !important; background: none; background-image: none !important;
  flex-shrink: 0; cursor: pointer; margin: 0; accent-color: var(--black);
  appearance: auto; -webkit-appearance: auto;
}

/* ── Field grid layout ───────────────────────────────────── */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.field-row.single { grid-template-columns: 1fr; }
/* Tek field-group varsa otomatik tam genişlik — field-row single kullanmaya gerek yok */
.field-row > .field-group:only-child,
.field-row > .form-field:only-child,
.field-row > .field:only-child { grid-column: 1 / -1; }
/* .row2 is an alias for .field-row (used by newer US templates) */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }

/* ── Pill-style radio buttons (toggle group) ─────────────── */
.radio-group { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.radio-btn {
  padding: 6px 14px; border-radius: 100px; border: 1.5px solid var(--gray-200);
  font-size: 12px; font-weight: 600; color: var(--gray-600); cursor: pointer;
  transition: all .15s; background: var(--white); font-family: var(--font);
}
.radio-btn.active { border-color: var(--black); background: var(--black); color: var(--white); }

/* ── Conditional sections ────────────────────────────────── */
.hidden-section { display: none; }

/* ══════════════════════════════════════════════════════════
   BUTTON COMPONENTS — Design System v2
   ══════════════════════════════════════════════════════════ */

/* Base button */
.tpl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  border-radius: var(--radius-sm); cursor: pointer;
  padding: 7px 14px; transition: all .2s; border: 1.5px solid transparent;
  background: none; line-height: 1;
}
/* Ghost / Outline — back button, secondary actions */
.tpl-btn--ghost {
  background: var(--white); color: var(--black); border-color: var(--gray-200);
}
.tpl-btn--ghost:hover { border-color: var(--gray-400); }

/* Primary — "Continue →", main CTA */
.tpl-btn--primary {
  background: var(--black); color: var(--white); border-color: var(--black);
  padding: 10px 20px;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.tpl-btn--primary:hover {
  background: var(--gray-900);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.tpl-btn--primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

/* Full-width variant */
.tpl-btn--full { width: 100%; justify-content: center; margin-top: 16px; padding: 12px 20px; }

/* Disabled state */
.tpl-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Download loading state ───────────────────────────────── */
.tpl-btn--primary.tpl-btn--loading {
  background: #2a2a2a;
  color: #fff;
  cursor: wait;
  transform: none;
  box-shadow: none;
  pointer-events: none;
  gap: 8px;
}
@keyframes tpl-spin {
  to { transform: rotate(360deg); }
}
.tpl-btn--loading .tpl-btn-spinner {
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tpl-spin .7s linear infinite;
  flex-shrink: 0;
}

/* ── Zoom control buttons ─────────────────────────────────── */
.tpl-zoom-btn {
  width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.1);
  border-radius: 5px; cursor: pointer; font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  color: #d1d5db; line-height: 1; font-family: var(--font);
}
.tpl-zoom-btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.25); }

/* ══════════════════════════════════════════════════════════
   FLATPICKR — Modern Date Picker Styles (HeroUI-inspired)
   ══════════════════════════════════════════════════════════ */

/* ── Input Field ────────────────────────────────────────── */
.field-group .flatpickr-input.flatpickr-input,
.form-field .flatpickr-input.flatpickr-input {
  padding: 9px 12px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--black);
  background: var(--white); font-family: var(--font);
  transition: border-color .2s, box-shadow .2s;
  width: 100%; cursor: text;
}
.field-group .flatpickr-input:focus,
.form-field .flatpickr-input:focus {
  border-color: var(--black); box-shadow: 0 0 0 3px rgba(0,0,0,.05); outline: none;
}

/* ── Date Input Wrapper (icon + input) ──────────────────── */
.date-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.date-input-wrap .flatpickr-input.flatpickr-input {
  padding-right: 40px;
}

/* Clickable calendar icon button */
.date-icon-btn {
  position: absolute;
  right: 2px; top: 2px; bottom: 2px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--gray-50);
  cursor: pointer;
  border-radius: 2px var(--radius-sm) var(--radius-sm) 2px;
  transition: background .15s, color .15s;
  color: var(--gray-400);
  padding: 0;
  z-index: 2;
}
.date-icon-btn:hover {
  background: var(--gray-200);
  color: var(--black);
}
.date-icon-btn:active {
  background: var(--gray-300);
}
.date-icon-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Validation states */
.date-input-wrap .flatpickr-input.date-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.08) !important;
}
.date-input-wrap .flatpickr-input.date-valid {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.08) !important;
}
.date-error-tip {
  position: absolute;
  bottom: -22px; left: 0;
  font-size: 11px;
  font-weight: 500;
  color: #ef4444;
  white-space: nowrap;
  pointer-events: none;
  animation: fp-slide-in .15s ease;
}

/* ── Calendar Container ─────────────────────────────────── */
.flatpickr-calendar {
  background: #ffffff !important;
  border: 1px solid #e8e8ec !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.03) !important;
  padding: 8px !important;
  font-family: var(--font) !important;
  width: 308px !important;
  overflow: hidden;
  animation: fp-slide-in .2s cubic-bezier(.2,.9,.3,1);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none !important;
}
@keyframes fp-slide-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Month Navigation Header ────────────────────────────── */
.flatpickr-months {
  padding: 4px 4px 8px !important;
  align-items: center !important;
}
.flatpickr-months .flatpickr-month {
  height: 36px !important;
  overflow: visible !important;
}
.flatpickr-current-month {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
  letter-spacing: -0.2px !important;
  padding-top: 6px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #0a0a0a !important;
  background: transparent !important;
  border: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 4px !important;
}
.flatpickr-current-month input.cur-year {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #0a0a0a !important;
}

/* Nav arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  padding: 0 !important;
  fill: #555 !important;
  transition: all .15s !important;
  top: 4px !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: #f3f3f6 !important;
  fill: #0a0a0a !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 12px !important;
  height: 12px !important;
}

/* ── Weekday Header ─────────────────────────────────────── */
.flatpickr-weekdays {
  padding: 0 2px !important;
  margin-bottom: 2px !important;
}
span.flatpickr-weekday {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #a0a0a8 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  font-family: var(--font) !important;
}

/* ── Day Grid ───────────────────────────────────────────── */
.flatpickr-innerContainer {
  padding: 0 2px 4px !important;
}
.dayContainer {
  min-width: 280px !important;
  max-width: 280px !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}

/* ── Individual Day Cells ───────────────────────────────── */
.flatpickr-day {
  width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  border: 2px solid transparent !important;
  margin: 1px !important;
  transition: all .12s ease !important;
  font-family: var(--font) !important;
}
.flatpickr-day:hover {
  background: #f3f3f6 !important;
  border-color: transparent !important;
}

/* Today */
.flatpickr-day.today {
  border-color: #d4d4d8 !important;
  background: transparent !important;
  color: #0a0a0a !important;
  font-weight: 700 !important;
}
.flatpickr-day.today:hover {
  background: #f3f3f6 !important;
  border-color: #d4d4d8 !important;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(10,10,10,.2) !important;
}

/* Previous/next month days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #c8c8cc !important;
  font-weight: 400 !important;
}
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: #f8f8fa !important;
  color: #a0a0a4 !important;
}

/* Disabled */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #d4d4d8 !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

/* Range in-between */
.flatpickr-day.inRange {
  background: #f0f0f4 !important;
  border-color: transparent !important;
  box-shadow: -4px 0 0 #f0f0f4, 4px 0 0 #f0f0f4 !important;
}

/* ── Time Input (if used) ───────────────────────────────── */
.flatpickr-time {
  border-top: 1px solid #e8e8ec !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
  height: 44px !important;
}
.flatpickr-time input {
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0a0a0a !important;
}
.flatpickr-time .flatpickr-am-pm {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
.flatpickr-time .flatpickr-am-pm:hover {
  background: #f3f3f6 !important;
}

/* ── Month/Year Select Dropdowns ────────────────────────── */
.flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover {
  background: #f3f3f6 !important;
  border-radius: 6px !important;
}
.numInputWrapper:hover {
  background: #f3f3f6 !important;
  border-radius: 6px !important;
}
.numInputWrapper span {
  border: none !important;
  background: transparent !important;
}
.numInputWrapper span::after {
  border-bottom-color: #888 !important;
  border-top-color: #888 !important;
}
.numInputWrapper span:hover::after {
  border-bottom-color: #0a0a0a !important;
  border-top-color: #0a0a0a !important;
}

/* ══════════════════════════════════════════════════════════
   FLATPICKR — Dark Mode Overrides
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .flatpickr-calendar {
  background: #1e1e22 !important;
  border-color: #2e2e34 !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05) !important;
}

/* Dark — Month header */
[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month input.cur-year {
  color: #f0f0f0 !important;
}

/* Dark — Nav arrows */
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
  fill: #999 !important;
}
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover {
  background: #2a2a30 !important;
  fill: #f0f0f0 !important;
}

/* Dark — Weekday labels */
[data-theme="dark"] span.flatpickr-weekday {
  color: #666670 !important;
}

/* Dark — Day cells */
[data-theme="dark"] .flatpickr-day {
  color: #d4d4d8 !important;
}
[data-theme="dark"] .flatpickr-day:hover {
  background: #2a2a30 !important;
}

/* Dark — Today */
[data-theme="dark"] .flatpickr-day.today {
  border-color: #505058 !important;
  color: #f0f0f0 !important;
}
[data-theme="dark"] .flatpickr-day.today:hover {
  background: #2a2a30 !important;
  border-color: #505058 !important;
}

/* Dark — Selected */
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.selected:hover,
[data-theme="dark"] .flatpickr-day.selected:focus,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
  background: #f0f0f0 !important;
  border-color: #f0f0f0 !important;
  color: #111111 !important;
  box-shadow: 0 2px 8px rgba(240,240,240,.15) !important;
}

/* Dark — Prev/next month */
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
  color: #444448 !important;
}
[data-theme="dark"] .flatpickr-day.prevMonthDay:hover,
[data-theme="dark"] .flatpickr-day.nextMonthDay:hover {
  background: #252528 !important;
  color: #666670 !important;
}

/* Dark — Disabled */
[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover {
  color: #333338 !important;
}

/* Dark — Range */
[data-theme="dark"] .flatpickr-day.inRange {
  background: #252528 !important;
  box-shadow: -4px 0 0 #252528, 4px 0 0 #252528 !important;
}

/* Dark — Time */
[data-theme="dark"] .flatpickr-time {
  border-top-color: #2e2e34 !important;
}
[data-theme="dark"] .flatpickr-time input {
  color: #f0f0f0 !important;
}
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
  color: #d4d4d8 !important;
}
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover {
  background: #2a2a30 !important;
}

/* Dark — Dropdowns */
[data-theme="dark"] .flatpickr-monthDropdown-months:hover,
[data-theme="dark"] .flatpickr-current-month input.cur-year:hover,
[data-theme="dark"] .numInputWrapper:hover {
  background: #2a2a30 !important;
}
[data-theme="dark"] .numInputWrapper span::after {
  border-bottom-color: #666 !important;
  border-top-color: #666 !important;
}
[data-theme="dark"] .numInputWrapper span:hover::after {
  border-bottom-color: #f0f0f0 !important;
  border-top-color: #f0f0f0 !important;
}

/* Dark — Input field override */
[data-theme="dark"] .field-group .flatpickr-input.flatpickr-input,
[data-theme="dark"] .form-field .flatpickr-input.flatpickr-input {
  background-color: #1c1c20;
  border-color: #2e2e34;
  color: #e8e8ec;
}
[data-theme="dark"] .field-group .flatpickr-input:focus,
[data-theme="dark"] .form-field .flatpickr-input:focus {
  border-color: #f0f0f0;
  box-shadow: 0 0 0 3px rgba(240,240,240,.08);
}

/* Dark — Calendar icon button */
[data-theme="dark"] .date-icon-btn {
  background: #252528;
  color: #666670;
}
[data-theme="dark"] .date-icon-btn:hover {
  background: #333338;
  color: #f0f0f0;
}
[data-theme="dark"] .date-icon-btn:active {
  background: #3e3e44;
}
/* ── Form Panel Alerts ───────────────────────────────────────
   Placed at the bottom of .form-scrollable, after all sections.
   NEVER inside the document preview / A4 page.

   Usage:
     <div class="tpl-alert tpl-alert-note">    ← bilgi / not      (yeşil)
     <div class="tpl-alert tpl-alert-warning"> ← uyarı            (turuncu)
     <div class="tpl-alert tpl-alert-danger">  ← önemli uyarı     (kırmızı)

       <div class="tpl-alert-icon">ℹ</div>  or  ⚠  or  🚫
       <div>
         <div class="tpl-alert-title">Başlık</div>
         <div class="tpl-alert-body">Açıklama metni.</div>
       </div>
     </div>
   ──────────────────────────────────────────────────────────── */
.tpl-alert {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
  color: #fff;
  font-family: var(--font);
  align-items: flex-start;
}
/* Bilgi / Not — yeşil */
.tpl-alert-note    { background: #15803d; }
/* Uyarı — turuncu */
.tpl-alert-warning { background: #c2410c; }
/* Önemli Uyarı / Kritik — kırmızı */
.tpl-alert-danger  { background: #b91c1c; }

.tpl-alert-icon {
  font-size: 15px;
  line-height: 1.45;
  flex-shrink: 0;
}
.tpl-alert-title {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
  letter-spacing: 0.1px;
  color: #fff;
}
.tpl-alert-body {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}

/* ── Form Actions (bottom bar) ───────────────────────────── */
.form-actions {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--white); border-top: 1px solid var(--gray-200);
  padding: 16px 24px; display: flex; align-items: center; gap: 12px; z-index: 10;
}
.completion-bar { flex: 1; height: 4px; background: var(--gray-200); border-radius: 2px; overflow: hidden; }
.completion-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width .4s; width: 0%; }
.completion-text { font-size: 11px; color: var(--gray-500); white-space: nowrap; }

/* ── Payment Panel ───────────────────────────────────────── */
.payment-panel { padding: 28px 24px 120px; display: none; flex-direction: column; gap: 16px; }
.payment-panel.visible { display: flex; }
.payment-summary {
  background: var(--gray-50); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md); padding: 16px;
}
.payment-summary-title {
  font-size: 11px; font-weight: 700; color: var(--gray-500);
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 10px;
}
.payment-summary-row {
  display: flex; justify-content: space-between; font-size: 14px;
  color: var(--black); margin-bottom: 6px;
}
.payment-summary-row:last-child {
  font-weight: 700; font-size: 16px; border-top: 1px solid var(--gray-200);
  padding-top: 10px; margin-top: 4px;
}
.stripe-card-label {
  font-size: 11px; font-weight: 700; color: var(--gray-700);
  letter-spacing: .2px; margin-bottom: 6px; display: block;
}
.stripe-fields { display: flex; flex-direction: column; gap: 10px; }
.stripe-field-group { display: flex; flex-direction: column; }
.stripe-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stripe-input-box {
  padding: 11px 13px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.stripe-input-box.StripeElement--focus { border-color: var(--black); box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.stripe-input-box.StripeElement--invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.08); }
#stripe-card-errors { color: #ef4444; font-size: 12px; margin-top: 6px; min-height: 16px; font-weight: 500; }
.stripe-powered-row { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 11px; color: #aaa; }
.stripe-powered-logo { font-weight: 800; font-size: 12px; color: #635BFF; letter-spacing: -.3px; }
/* Normalised submit button for older (Variant 1) templates */
.btn-pay-submit {
  width: 100%; margin-top: 16px; padding: 14px 20px;
  background: var(--black); color: var(--white);
  border: none; border-radius: var(--radius-md);
  font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: var(--font); letter-spacing: -.1px;
  transition: background .2s, transform .15s, box-shadow .2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-pay-submit:hover { background: var(--gray-900); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.btn-pay-submit:active { transform: translateY(0); box-shadow: none; }
.btn-pay-submit:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Success Panel ───────────────────────────────────────── */
.success-panel {
  padding: 48px 24px; display: none; flex-direction: column;
  align-items: center; text-align: center; gap: 16px;
}
.success-panel.visible { display: flex; }
.success-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
  animation: success-pop .4s cubic-bezier(.33,1,.68,1);
}
@keyframes success-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-title { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--black); }
.success-sub { font-size: 14px; color: var(--gray-500); max-width: 300px; }
.btn-download {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px;
  background: var(--black); color: var(--white); border-radius: var(--radius-md);
  font-size: 16px; font-weight: 700; cursor: pointer; border: none;
  font-family: var(--font); transition: all .2s; margin-top: 8px;
  animation: fade-up .4s ease both .2s;
}
.btn-download:hover { background: var(--gray-900); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.btn-new-doc {
  font-size: 13px; color: var(--gray-500); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; background: none; border: none;
  font-family: var(--font); margin-top: 4px;
}
.btn-new-doc:hover { color: var(--black); }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.3); border-top-color: white;
  animation: spin .7s linear infinite; display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Preview Panel ───────────────────────────────────────── */
.preview-panel { background: #ddd; position: relative; }
.preview-sticky {
  position: sticky; top: 124px; height: calc(100vh - 124px);
  display: flex; flex-direction: column; overflow: hidden;
}
.preview-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: #2a2a2a;
  border-bottom: 1px solid rgba(0,0,0,.35); flex-shrink: 0;
  position: relative; z-index: 25;
}
.preview-toolbar-left { display: flex; align-items: center; gap: 8px; }
.preview-label { font-size: 12px; font-weight: 700; color: #d1d5db; }
.preview-live-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  background: rgba(34,197,94,.2); border-radius: 100px;
  font-size: 11px; font-weight: 600; color: #4ade80;
}
.preview-live-dot {
  position: relative; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
}
.preview-live-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #22c55e;
  animation: _livePing 1.8s ease-out infinite;
}
@keyframes _livePing {
  0%   { transform: scale(1);   opacity: .8; }
  70%  { transform: scale(2.6); opacity: 0;  }
  100% { transform: scale(2.6); opacity: 0;  }
}

/* ── Watermark Overlay ───────────────────────────────────── */
.wm-overlay {
  position: absolute; top: 41px; left: 0; right: 0; bottom: 0; z-index: 20;
  pointer-events: none; user-select: none; overflow: hidden; transition: opacity .3s;
}
.wm-overlay.hidden { opacity: 0; }
.wm-inner {
  position: absolute; top: -60%; left: -30%; right: -30%; bottom: -60%;
  display: flex; flex-direction: column; gap: 52px;
  transform: rotate(-32deg); transform-origin: center center;
  justify-content: flex-start; padding-top: 40px;
}
.wm-row {
  white-space: nowrap; font-size: 11px; font-weight: 800;
  color: rgba(0,0,0,.12); letter-spacing: 5px; text-transform: uppercase;
  display: none; font-family: 'Inter', sans-serif;  /* hidden — replaced by .preview-page::before/after */
}

/* ── Preview Scroll ──────────────────────────────────────── */
.preview-scroll {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px 40px;
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 10;
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
.preview-scroll::-webkit-scrollbar { width: 5px; }
.preview-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); border-radius: 3px; }
.preview-scroll::-webkit-scrollbar-track { background: transparent; }
#contractPreview { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }

/* ── Preview Page (base — override padding in template) ───── */
.preview-page {
  background: var(--white);
  width: 100%;
  min-height: 906px;
  box-shadow: 0 2px 14px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08);
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  color: #1a1a1a;
  position: relative;
  box-sizing: border-box;
}
/* ── Preview-page watermark side strips (zoom-proof, on A4 paper itself) ── */
.preview-page::before,
.preview-page::after {
  content: 'DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · ';
  position: absolute; top: 0; bottom: 0; width: 24px; z-index: 5;
  pointer-events: none; overflow: hidden;
  font-size: 9px; font-weight: 800; color: rgba(0,0,0,.13);
  letter-spacing: 5px; text-transform: uppercase;
  font-family: 'Inter', Arial, sans-serif; white-space: nowrap;
  writing-mode: vertical-rl;
}
.preview-page::before { left: 0;  transform: rotate(180deg); }
.preview-page::after  { right: 0; transform: none; }

/* Hide strips after unlock (step 3) */
.dox-unlocked .preview-page::before,
.dox-unlocked .preview-page::after { content: none; }

.placeholder { color: #374151; font-style: normal; font-weight: inherit; }
.filled-val { font-weight: 600; color: #111; }
/* .contract-page-break: hidden on screen, forces new PDF page in print.
   Usage: insert <div class="contract-page-break"></div> between pages
   in buildContractPages() when content must start on a fresh PDF page. */
.contract-page-break { display: none; }

/* ── Zoom Reset Button ───────────────────────────────────── */
.zoom-reset-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: 6px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.1); font-size: 11px; font-weight: 700;
  color: #d1d5db; cursor: pointer; transition: all .15s; font-family: var(--font);
  min-width: 42px; text-align: center; justify-content: center;
}
.zoom-reset-btn:hover { background: rgba(255,255,255,.2); }
.zoom-reset-btn.visible { opacity: 1; }
.zoom-reset-btn:not(.visible) { opacity: 0.45; cursor: default; }

/* ── Ctrl+Scroll Hint ────────────────────────────────────── */
.tpl-ctrl-hint { font-size: 11px; color: #999; margin-left: 4px; }

/* ── View Sample Button ───────────────────────────────────── */
.sample-view-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px; border-radius: 5px; border: none;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  font-size: 11.5px; font-weight: 600; color: #1f2937; letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.8);
  transition: filter .15s, box-shadow .15s;
}
.sample-view-btn:hover { filter: brightness(0.95); }
.sample-view-btn svg { flex-shrink: 0; }
.sample-view-btn::after {
  content: ''; position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.6) 50%, transparent 80%);
  transform: skewX(-18deg);
  animation: _sampleShine 3.4s ease-in-out infinite;
}
@keyframes _sampleShine {
  0%   { left: -80%; }
  35%  { left: 130%; }
  100% { left: 130%; }
}

/* ── Mobile Tab Bar (Form | Preview) ─────────────────────── */
.mobile-tabs {
  display: none;
  width: 100%;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
}
.mobile-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-400);
  border: none;
  border-bottom: 2.5px solid transparent;
  background: none;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  font-family: var(--font);
  letter-spacing: -.1px;
}
.mobile-tab:active { background: var(--gray-50); }
.mobile-tab.active { color: var(--black); border-bottom-color: var(--black); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Show tab bar */
  .mobile-tabs { display: flex; }

  /* Layout stacks, extra top margin for tab bar (~44px) */
  .tpl-layout {
    grid-template-columns: 1fr;
    margin-top: 168px;
    min-height: calc(100vh - 168px);
  }

  /* Form panel — full height so absolute form-actions works */
  /* min-width:0 prevents CSS grid blowout; overflow-x:hidden clips any stray overflow */
  .form-panel { min-height: calc(100vh - 168px); min-width: 0; overflow-x: hidden; }

  /* Preview panel — hidden by default (form tab is active) */
  /* Preview panel — hidden by default (form tab is active) */
  .preview-panel { display: none; }
  .preview-panel.tab-visible {
    display: block;
    min-height: calc(100vh - 168px);
  }

  /* Preview sticky recalculated */
  .preview-sticky {
    top: 168px;
    height: calc(100vh - 168px);
  }

  /* Form panel hidden when preview tab active */
  .form-panel.tab-hidden { display: none; }

  .tpl-doc-title { max-width: 180px; }
  .step-label { display: none; }
}
@media (max-width: 600px) {
  .steps-bar { gap: 0; }
  .step-connector { width: 24px; }
  .tpl-header-right { display: none; }

  /* Stack 2-column form rows to single column on small screens */
  .field-row { grid-template-columns: 1fr; }
  .stripe-field-row { grid-template-columns: 1fr; }

  /* Let currency/id select shrink naturally — don't let inline min-width overflow */
  .currency-input-wrap select { max-width: 55%; }

  /* Tighter bottom action bar on small screens */
  .form-actions { padding: 12px 16px; gap: 8px; }
  /* Completion text wraps rather than overflowing */
  .completion-text { white-space: normal; font-size: 10px; line-height: 1.3; }

  /* Form padding reduced on very small screens */
  .form-scrollable { padding: 20px 16px 100px; }

  /* Ctrl+Scroll hint — desktop-only, pointless on touch devices */
  .tpl-ctrl-hint { display: none !important; }

  /* View Sample button — desktop-only, hides on mobile */
  .sample-view-btn { display: none !important; }
}

/* ── Print (watermark-protected) ─────────────────────────── */
@media print {
  /* Keep only the preview, hide chrome */
  .tpl-header, .form-panel, .preview-toolbar, ._dox-preview-cta { display: none !important; }
  .preview-panel { position: static; }
  .preview-sticky { position: static; height: auto; }
  .preview-scroll { padding: 0; overflow: visible; }
  #contractPreview { max-width: 100%; }
  .preview-page { box-shadow: none; border-radius: 0; min-height: 0; }

  /* Watermark stays visible and even stronger in print */
  .wm-overlay { display: block !important; opacity: 1 !important; position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; }
  .wm-row { color: rgba(0,0,0,.22) !important; display: none !important; }
  /* Side-strip pseudo-elements: stronger in print, always shown even if unlocked */
  .preview-page::before,
  .preview-page::after { color: rgba(0,0,0,.30) !important; content: 'DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · ' !important; }
  .dox-unlocked .preview-page::before,
  .dox-unlocked .preview-page::after { color: rgba(0,0,0,.30) !important; content: 'DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · DOXUNO · ' !important; }

  /* Print notice appended by JS */
  ._dox-print-notice {
    display: block !important; position: fixed; bottom: 8px; left: 0; right: 0;
    text-align: center; font-size: 9px; color: #555; font-family: Arial, sans-serif;
  }

  /* ── PDF / Print page break rules ──────────────────────────
     Puppeteer @media print kullanır; bu kurallar hem tarayıcı
     baskısında hem PDF üretiminde geçerlidir.
  ────────────────────────────────────────────────────────── */

  /* 1. Madde başlığı (MADDE X — BAŞLIK) asla sayfanın en altında
        yalnız kalmamalı — her zaman en az bir paragrafla birlikte. */
  .contract-article-title {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* 2. Tablo satırları: satır ortasında kesilmesin.
        Tablo kendisi sayfalara bölünebilir ama tek satır ikiye ayrılamaz.
        break-inside: avoid tablosunun tamamına uygulanmaz — büyük tablolarda
        boş beyaz alan bırakır; sadece tr'ye uygulanır. */
  .contract-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 3. İmza alanı asla bölünmesin — imza satırı ve isim tek sayfada kalmalı. */
  .contract-sig-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 3a. Tanık + noter bloğu asla bölünmesin.
         Tek imza kartları için .contract-sig-row yeterli;
         witness/notary alt bölümleri için bu sınıflar zorunlu. */
  .contract-witness-block,
  .contract-notary-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 3b. Notary seal box bölünmemeli; önceki notary içeriğiyle aynı sayfada kalmalı. */
  .contract-notary-seal {
    break-before: avoid;
    page-break-before: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 4. Taraflar özet bloğu (kiralayan/kiracı meta kartı) bölünmesin. */
  .contract-meta {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 5. Paragraf orphan/widow koruması:
        Sayfa başında veya sonunda en az 3 satır kalsın,
        tek "yetim" satır kalmasın. */
  .contract-article p {
    orphans: 3;
    widows: 3;
  }

  /* 6. Belge başlığı ve alt başlığı alt alta kesilmesin. */
  .contract-title,
  .contract-subtitle {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* 7. Uyarı / bilgi kutuları bölünmesin. */
  .contract-notice,
  .contract-info-box {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 8. EK DOSYA / ATTACHMENT KURALI — her .preview-page yeni PDF sayfasından başlar.
        İkinci ve sonraki .preview-page divları (ekler, Schedule A, Exhibit B vb.)
        MUTLAKA yeni bir PDF sayfasından başlamalıdır.
        + selector: ilk sayfayı etkilemez, sadece önünde başka .preview-page olan divlara uygulanır. */
  .preview-page + .preview-page {
    break-before: page;
    page-break-before: always;
  }

  /* 9. .contract-page-break: içerik ortasında zorla yeni sayfa.
        buildContractPages() içinde <div class="contract-page-break"></div>
        ekleyerek herhangi bir noktada sayfa kırılımı zorunlu kılınabilir. */
  .contract-page-break {
    display: block;
    break-before: page;
    page-break-before: always;
    height: 0;
    margin: 0;
    padding: 0;
  }
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   DOCUMENT PREVIEW STYLES — Doxuno Visual Standard v1
   ============================================================

   TYPOGRAPHY SCALE
   ─────────────────────────────────────────────────────────
   T1  Document Title      15pt  800  #0a0a0a  centered
   T2  Document Subtitle    9pt  500  #888     centered
   T3  Section Heading      8pt  700  #0a0a0a  UPPERCASE  tracking: 1px
   T4  Body Text           9.5pt 400  #1a1a1a  justify    line-height: 1.9
   T5  Meta Label          7.5pt 600  #999     UPPERCASE  tracking: 0.6px
   T6  Meta Value          9.5pt 600  #111
   T7  Date / Muted         9pt  500  #555
   T8  Signature Label     7.5pt 600  #999     UPPERCASE  tracking: 0.6px
   T9  Signature Name       9pt  700  #111

   SPACING SCALE
   ─────────────────────────────────────────────────────────
   Document padding        56px 60px
   Between articles        margin-bottom: 22px + padding-bottom: 18px
   Article separator       1px solid #ebebeb  (last article: hidden)
   Section heading gap     margin-bottom: 10px

   COLOUR TOKENS (siyah-gri, renksiz)
   ─────────────────────────────────────────────────────────
   Ink Black   #0a0a0a   — titles, headings, strong text
   Ink Dark    #1a1a1a   — body paragraphs
   Ink Mid     #555      — dates, muted info
   Ink Light   #999      — labels, meta keys
   Rule Light  #ebebeb   — article separators
   Rule Mid    #d8d8d8   — table borders
   Fill Pale   #f7f7f7   — meta block background
   Fill White  #ffffff   — page background

   ============================================================ */

/* ── Preview Page — default layout ──────────────────────── */
/* Contracts & Forms: 56 / 60 padding, comfortable line-height */
.preview-page {
  padding: 56px 60px;
  font-size: 9.5pt;
  line-height: 1.9;
  font-family: 'Inter', sans-serif;
  color: #1a1a1a;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ════════════════════════════════════════════════════════════
   CONTRACT & FORM DOCUMENT STYLES
   ════════════════════════════════════════════════════════════ */

/* T1 — Document Title ───────────────────────────────────── */
.contract-title {
  font-size: 15pt;
  font-weight: 800;
  text-align: center;
  color: #0a0a0a;
  letter-spacing: -0.4px;
  line-height: 1.25;
  margin-bottom: 6px;
}

/* T2 — Document Subtitle ────────────────────────────────── */
.contract-subtitle {
  font-size: 9pt;
  font-weight: 500;
  text-align: center;
  color: #888;
  letter-spacing: 0.1px;
  margin-bottom: 28px;
}

/* Parties / Meta block ──────────────────────────────────── */
.contract-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  background: #f7f7f7;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 24px;
}
.contract-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* T5 — Meta Label */
.contract-meta-label {
  font-size: 7.5pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #999;
}
/* T6 — Meta Value */
.contract-meta-value {
  font-size: 9.5pt;
  font-weight: 600;
  color: #111;
}

/* Article / Clause block ────────────────────────────────── */
.contract-article {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #ebebeb;
}
.contract-article:last-of-type { border-bottom: none; margin-bottom: 0; }

/* T3 — Section / Article Heading */
.contract-article-title {
  font-size: 8pt;
  font-weight: 700;
  color: #0a0a0a;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  margin-bottom: 10px;
}

/* T4 — Body Text */
.contract-article p {
  font-size: 9.5pt;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.9;
  text-align: justify;
  margin-bottom: 8px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.contract-article p:last-child { margin-bottom: 0; }

/* Ordered list within articles */
.contract-ol {
  padding-left: 20px;
  margin: 6px 0 8px;
}
.contract-ol li {
  font-size: 9.5pt;
  color: #1a1a1a;
  line-height: 1.9;
  margin-bottom: 4px;
}
.contract-ul {
  list-style: disc;
  padding-left: 22px;
  margin: 6px 0 8px;
}
.contract-ul li {
  font-size: 9.5pt;
  color: #1a1a1a;
  line-height: 1.9;
  margin-bottom: 2px;
}

/* Horizontal rule between major sections */
.contract-divider {
  border: none;
  border-top: 1px solid #ebebeb;
  margin: 24px 0;
}

/* Data Table ────────────────────────────────────────────── */
.contract-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 9pt;
}
.contract-table th,
.contract-table td {
  border: 1px solid #d8d8d8;
  padding: 7px 11px;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* T5 — Table header */
.contract-table th {
  background: #f4f4f4;
  font-size: 7.5pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
}
.contract-table tr:nth-child(even) td { background: #fbfbfb; }
/* Label column — sabit genişlik, uzun metin sarar */
.contract-table td:first-child {
  width: 130px;
  min-width: 130px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: #555;
  font-weight: 500;
}
/* Value column — kalan alanı kullanır, uzun metin sarar */
.contract-table td:last-child {
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* colspan cells — first-child constraints override edilir */
.contract-table td[colspan] {
  width: auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: #1a1a1a;
  font-weight: 400;
}

/* Signature Row ─────────────────────────────────────────── */
.contract-sig-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #e4e4e4;
}
.contract-sig-row.three-col { grid-template-columns: 1fr 1fr 1fr; }
.contract-sig-block { display: flex; flex-direction: column; gap: 4px; }

/* Signing line */
.contract-sig-line {
  height: 38px;
  border-bottom: 1px solid #aaa;   /* lighter — for handwritten signature */
  margin-bottom: 8px;
}
/* T8 — Signature Label */
.contract-sig-label {
  font-size: 7.5pt;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
/* T9 — Signature Name */
.contract-sig-name {
  font-size: 9pt;
  font-weight: 700;
  color: #111;
}
/* T7 — Signature Date */
.contract-sig-date {
  font-size: 9pt;
  font-weight: 500;
  color: #555;
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════
   FORM DOCUMENT STYLES  (model release, ihtarname, etc.)
   ════════════════════════════════════════════════════════════ */

/* T1 — Form Title */
.doc-title {
  font-size: 15pt;
  font-weight: 800;
  text-align: center;
  color: #0a0a0a;
  letter-spacing: -0.4px;
  line-height: 1.25;
  margin-bottom: 6px;
}
/* T2 — Form Subtitle */
.doc-subtitle {
  font-size: 9pt;
  font-weight: 500;
  text-align: center;
  color: #888;
  margin-bottom: 24px;
}

/* Currency field wrapper (form panels) */
.card-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.currency-input-wrap { display: flex; gap: 6px; align-items: center; }
.currency-input-wrap select { flex: 0 0 auto; width: auto; min-width: 88px; }
.currency-input-wrap input { flex: 1 1 0; min-width: 0; width: auto; }

/* ════════════════════════════════════════════════════════════
   LETTER DOCUMENT STYLES  (dilekçe, niyet, tavsiye)
   ════════════════════════════════════════════════════════════ */

/* Letter page has slightly more generous padding */
.letter-page { padding: 60px 64px; font-size: 9.5pt; line-height: 1.9; }
.preview-page.letter-page { padding: 60px 64px; }

/* Letter Header: sender left / date right ───────────────── */
.letter-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebebeb;
}
.letter-sender { font-family: 'Inter', sans-serif; }
/* Sender name = T1 adapted */
.letter-sender .name {
  font-size: 12pt;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.2px;
}
/* Sender detail = T7 */
.letter-sender .detail {
  font-size: 9pt;
  font-weight: 400;
  color: #555;
  margin-top: 3px;
  line-height: 1.6;
}
/* T7 — Date (always right-aligned in letter header) */
.letter-date {
  font-size: 9pt;
  font-weight: 500;
  color: #555;
  text-align: right;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}

/* Addressee block ───────────────────────────────────────── */
.letter-to {
  margin-bottom: 24px;
  font-family: 'Inter', sans-serif;
}
/* T5 — "ALICI" label */
.letter-to .label {
  font-size: 7.5pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #999;
  margin-bottom: 4px;
}
/* Recipient name = T6 */
.letter-to .to-name {
  font-size: 10pt;
  font-weight: 700;
  color: #0a0a0a;
}
/* Recipient detail = T7 */
.letter-to .to-detail {
  font-size: 9pt;
  font-weight: 400;
  color: #555;
}

/* Subject block ─────────────────────────────────────────── */
.letter-subject {
  background: #f7f7f7;
  border-left: 2px solid #0a0a0a;
  padding: 10px 14px;
  margin-bottom: 24px;
  font-family: 'Inter', sans-serif;
}
/* T5 — "KONU" label */
.letter-subject .s-label {
  font-size: 7.5pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #999;
  margin-bottom: 3px;
}
/* T3 — Subject text */
.letter-subject .s-text {
  font-size: 10pt;
  font-weight: 700;
  color: #0a0a0a;
}

/* Body paragraphs = T4 */
.letter-body { line-height: 1.9; }
.letter-body p {
  font-size: 9.5pt;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 14px;
  text-align: justify;
  line-height: 1.9;
}
.letter-body p:last-child { margin-bottom: 0; }

/* Closing / Valediction */
.letter-closing {
  margin-top: 28px;
  font-family: 'Inter', sans-serif;
}
.letter-closing p {
  font-size: 9.5pt;
  font-weight: 400;
  color: #333;
  margin-bottom: 4px;
}

/* Signature block */
.letter-sig {
  margin-top: 36px;
  font-family: 'Inter', sans-serif;
}
.letter-sig .sig-line {
  height: 38px;
  border-bottom: 1px solid #aaa;   /* same weight as contract sig line */
  width: 200px;
  margin-bottom: 8px;
}
/* T9 — Signer name */
.letter-sig .sig-name {
  font-size: 9pt;
  font-weight: 700;
  color: #111;
  margin-top: 0;
}

/* Letter org header (tavsiye mektubu letterhead) */
.letter-org {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebebeb;
  font-family: 'Inter', sans-serif;
}
/* T1 adapted — org name */
.letter-org .org-name {
  font-size: 13pt;
  font-weight: 800;
  color: #0a0a0a;
  letter-spacing: -0.3px;
}
/* T7 — org contact */
.letter-org .org-contact {
  font-size: 9pt;
  font-weight: 400;
  color: #555;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   CV DOCUMENT STYLES  (separate two-column layout — unchanged)
   ════════════════════════════════════════════════════════════ */

/* ─── Apple-Style CV ─────────────────────────────────────── */
.cv-preview-page { padding: 0 !important; }
.cv-apple {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 40px 44px 36px;
  min-height: 100%;
  background: #ffffff;
  color: #1d1d1f;
}

/* ── Header / Hero ── */
.cv-hero {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e5e7;
}
.cv-hero-name {
  font-size: 22pt;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #1d1d1f;
  margin: 0 0 4px;
}
.cv-hero-title {
  font-size: 10pt;
  font-weight: 500;
  color: #6e6e73;
  letter-spacing: 0.3px;
  margin: 0 0 14px;
}
.cv-hero-contact {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.cv-hero-contact-item {
  font-size: 8pt;
  color: #424245;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cv-hero-contact-item svg { flex-shrink: 0; }

/* ── Hero with photo ── */
.cv-hero-with-photo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e5e7;
}
.cv-hero-with-photo .cv-hero-text { flex: 1; }
.cv-hero-with-photo .cv-hero-name { text-align: left; }
.cv-hero-with-photo .cv-hero-title { text-align: left; }
.cv-hero-with-photo .cv-hero-contact { justify-content: flex-start; }
.cv-hero-photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e5e5e7;
  flex-shrink: 0;
}

/* ── Section Card ── */
.cv-card {
  background: #f5f5f7;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.cv-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cv-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #1d1d1f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cv-card-icon svg { display: block; }
.cv-card-title {
  font-size: 10pt;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.1px;
}

/* ── Summary ── */
.cv-summary-text {
  font-size: 8.5pt;
  color: #424245;
  line-height: 1.75;
}

/* ── Experience ── */
.cv-exp-entry { margin-bottom: 14px; }
.cv-exp-entry:last-child { margin-bottom: 0; }
.cv-exp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.cv-exp-role {
  font-size: 9pt;
  font-weight: 700;
  color: #1d1d1f;
}
.cv-exp-date {
  font-size: 7.5pt;
  color: #86868b;
  flex-shrink: 0;
  padding-left: 12px;
}
.cv-exp-org {
  font-size: 8pt;
  font-weight: 600;
  color: #0071e3;
  margin-bottom: 4px;
}
.cv-exp-detail {
  font-size: 8pt;
  color: #515154;
  line-height: 1.7;
}

/* ── Education ── */
.cv-edu-entry { margin-bottom: 10px; }
.cv-edu-entry:last-child { margin-bottom: 0; }
.cv-edu-degree-text {
  font-size: 9pt;
  font-weight: 700;
  color: #1d1d1f;
}
.cv-edu-school-text {
  font-size: 8pt;
  color: #0071e3;
  font-weight: 600;
}
.cv-edu-period {
  font-size: 7.5pt;
  color: #86868b;
  margin-top: 1px;
}

/* ── Skills (Pill Tags) ── */
.cv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cv-pill {
  display: inline-block;
  padding: 4px 12px;
  background: #ffffff;
  border-radius: 100px;
  font-size: 7.5pt;
  font-weight: 600;
  color: #1d1d1f;
  border: 1px solid #d2d2d7;
}

/* ── Languages (bar) ── */
.cv-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cv-lang-item:last-child { margin-bottom: 0; }
.cv-lang-name {
  font-size: 8pt;
  font-weight: 600;
  color: #1d1d1f;
  min-width: 80px;
}
.cv-lang-level {
  font-size: 7.5pt;
  color: #86868b;
}

/* ── Certificates ── */
.cv-cert-entry { margin-bottom: 8px; }
.cv-cert-entry:last-child { margin-bottom: 0; }
.cv-cert-name {
  font-size: 8.5pt;
  font-weight: 700;
  color: #1d1d1f;
}
.cv-cert-org {
  font-size: 7.5pt;
  color: #86868b;
}

/* ── Hobbies ── */
.cv-hobbies-text {
  font-size: 8.5pt;
  color: #424245;
  line-height: 1.7;
}

/* ── Two-column grid ── */
.cv-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cv-grid-2 .cv-card { margin-bottom: 0; }

/* ── References ── */
.cv-refs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cv-ref-entry { }
.cv-ref-name {
  font-size: 8.5pt;
  font-weight: 700;
  color: #1d1d1f;
}
.cv-ref-role {
  font-size: 7.5pt;
  color: #0071e3;
  font-weight: 600;
  margin-top: 1px;
}
.cv-ref-contact {
  font-size: 7.5pt;
  color: #86868b;
  margin-top: 2px;
}

/* ─── Sample Modal (View Sample overlay) ──────────────────────
   Shared across all templates. Do not override in template <style>
   blocks — edit here only.
   ─────────────────────────────────────────────────────────── */
._sp-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  z-index: 100002; display: flex; align-items: center;
  justify-content: center; padding: 16px;
}
._sp-modal {
  background: #fff; border-radius: 12px; width: min(880px, 100%);
  max-height: 92vh; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
._sp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid #e5e7eb;
  background: #f9fafb; flex-shrink: 0;
}
._sp-banner {
  padding: 9px 20px; background: #fef3c7;
  border-bottom: 1px solid #fde68a;
  font-size: 12px; color: #92400e;
  flex-shrink: 0; display: flex; align-items: center; gap: 7px;
}
._sp-preview-wrap {
  flex: 1; overflow-y: auto; background: #d1d5db;
  padding: 20px; position: relative;
  user-select: none; -webkit-user-select: none;
}
._sp-footer {
  padding: 12px 20px; border-top: 1px solid #e5e7eb; background: #f9fafb;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; gap: 12px; flex-wrap: wrap;
}
._sp-footer-note { font-size: 12px; color: #374151; }
/* X icon button in header */
._sp-close-x {
  width: 30px; height: 30px; border-radius: 6px; border: none;
  background: transparent; cursor: pointer; font-size: 17px;
  color: #6b7280; display: flex; align-items: center;
  justify-content: center; transition: background .15s; flex-shrink: 0;
}
._sp-close-x:hover { background: #e5e7eb; color: #111827; }
/* "Close" text button in footer */
._sp-close-btn {
  height: 32px; padding: 0 16px; border-radius: 7px;
  border: 1px solid #d1d5db; background: #fff; color: #374151;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .15s; white-space: nowrap;
}
._sp-close-btn:hover { background: #f3f4f6; }

/* ── Invoice templates: shared styles ─────────────────────────────────────── */
/* Logo upload drop zone */
.logo-drop-zone {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:14px 12px; border:1.5px dashed #d1d5db; border-radius:8px;
  cursor:pointer; color:#6c7179; font-size:12px; transition:border-color .15s, background .15s;
  text-align:center; background:#fafafa;
}
.logo-drop-zone:hover { border-color:#2563eb; background:#eff6ff; color:#2563eb; }
.logo-drop-zone svg { flex-shrink:0; }
.logo-drop-zone span { font-size:11px; color:#a9afbb; }
.logo-preview-wrap {
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb;
}
.logo-preview-wrap img { max-height:44px; max-width:180px; object-fit:contain; }
.logo-remove-btn {
  margin-left:auto; font-size:11px; color:#6c7179; background:none;
  border:1px solid #d1d5db; border-radius:5px; padding:3px 8px; cursor:pointer;
}
.logo-remove-btn:hover { background:#fee2e2; border-color:#fca5a5; color:#dc2626; }
/* Line items table */
.li-table { width:100%; border-collapse:collapse; margin:10px 0; }
.li-table th { background:#f3f4f6; padding:7px 8px; font-size:11px; font-weight:600; color:#6c7179; text-align:left; border-bottom:1px solid #e5e7eb; }
.li-table td { padding:5px 6px; vertical-align:middle; }
.li-table tr:nth-child(even) td { background:#f9fafb; }
.li-table input, .li-table select { width:100%; border:1px solid #d1d5db; border-radius:4px; padding:4px 6px; font-size:12px; box-sizing:border-box; font-family:inherit; }
.li-table input:focus, .li-table select:focus { outline:none; border-color:#6366f1; }
.li-table .td-desc { width:32%; }
.li-table .td-cat  { width:16%; }
.li-table .td-qty  { width:12%; }
.li-table .td-rate { width:15%; }
.li-table .td-amt  { width:17%; background:#f9fafb; font-size:12px; font-weight:600; color:#101010; padding:4px 8px; }
.li-table .td-del  { width:4%; text-align:center; }
.li-del-btn { background:none; border:none; cursor:pointer; color:#d1d5db; font-size:16px; padding:2px 4px; line-height:1; transition:color .15s; }
.li-del-btn:hover { color:#ef4444; }
.add-line-btn { display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:5px 12px; border:1px dashed #d1d5db; border-radius:6px; background:none; font-size:12px; color:#6c7179; cursor:pointer; transition:background .15s, border-color .15s; }
.add-line-btn:hover { background:#f3f4f6; border-color:#a9afbb; color:#34373c; }
/* Totals block */
.totals-block { display:flex; justify-content:flex-end; margin-top:12px; }
.totals-inner { width:280px; }
.totals-row { display:flex; justify-content:space-between; padding:4px 0; font-size:12px; color:#34373c; }
.totals-row.total-line { border-top:2px solid #101010; margin-top:4px; padding-top:8px; font-size:14px; font-weight:700; color:#101010; }
.totals-row.discount-line { color:#16a34a; }
.totals-row.deposit-line { color:#2563eb; }
/* Bank / payment details panel */
.bank-fields { margin-top:8px; padding:10px 12px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; }
.bank-fields .field-row { margin-bottom:8px; }
.bank-fields .field-row:last-child { margin-bottom:0; }