/* ================================================================
   Árajánlat Szerkesztő — custom styles
   Extracted from: online_arajanlat_szerkeszthető_43.html
   ================================================================ */

*{box-sizing:border-box;}
html,body{margin-top:0 !important;padding-top:0 !important;}
body{font-family:Verdana,Arial,sans-serif;background:#f0f2f5;color:#1f2937;overflow-x:hidden;}

/* FLOATING LABEL */
.fi-group{position:relative;border:1.5px solid #e5e7eb;border-radius:.5rem;padding:.5rem .75rem;background:#fff;transition:border-color .2s;}
.fi-group:focus-within{border-color:#009879;box-shadow:0 0 0 3px rgba(0,152,121,.1);}
.fi-label{position:absolute;top:-.4rem;left:.5rem;background:#fff;padding:0 .25rem;font-size:.68rem;line-height:1;color:#6b7280;pointer-events:none;font-weight:500;z-index:5;white-space:nowrap;}
.fi-input{position:relative;z-index:6;width:100%;min-width:0;border:none;outline:none;background:transparent;font-size:.875rem;color:#111827;font-family:Verdana,Arial,sans-serif;-moz-appearance:textfield;appearance:textfield;}
.fi-input::-webkit-inner-spin-button,.fi-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.fi-group span{position:relative;z-index:6;}

/* COVER */
#cover-section{--cover-height:440px;background-size:cover;background-position:center;height:var(--cover-height)!important;min-height:var(--cover-height)!important;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:2.5rem var(--a4-content-x,1.75rem) 1.875rem;transition:background .3s;-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* LOGO */
#logo-wrapper{display:inline-block;position:relative;z-index:20;cursor:pointer;user-select:none;margin-bottom:1rem;}
#logo-placeholder{display:flex;align-items:center;justify-content:center;font-family:Verdana,Arial,sans-serif;font-weight:800;font-size:1.4rem;color:#fff;background:#009879;border-radius:.5rem;width:72px;height:72px;cursor:pointer;border:2px dashed rgba(255,255,255,.5);transition:background .2s;}
#logo-img{border-radius:.5rem;object-fit:contain;display:block;cursor:pointer;box-sizing:content-box;transition:box-shadow .2s;}
body:not(.preview-mode) #logo-img{outline:2px dashed rgba(255,255,255,.55);outline-offset:4px;}
body:not(.preview-mode) #logo-img:hover{outline:2px dashed rgba(255,255,255,.9);outline-offset:4px;box-shadow:0 0 0 6px rgba(255,255,255,.12);}
body:not(.preview-mode) #logo-placeholder:hover{background:#007a61;outline:2px dashed rgba(255,255,255,.7);outline-offset:3px;}
.logo-drag-hint{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:.6rem;color:inherit;white-space:nowrap;pointer-events:none;}
.logo-edit-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.55);color:#fff;font-size:.6rem;font-weight:600;padding:.2rem .45rem;border-radius:.3rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;}
body:not(.preview-mode) #logo-wrapper:hover .logo-edit-hint{opacity:1;}

/* COVER EDIT BTN */
#cover-edit-btn{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:25;}

/* FLOATING PANELS */
.fpanel{position:fixed;background:#fff;border:1px solid #e5e7eb;border-radius:.875rem;box-shadow:0 8px 40px rgba(0,0,0,.18);z-index:9999;overflow-y:auto;max-height:90vh;}
.fpanel-header{display:flex;justify-content:space-between;align-items:center;padding:.875rem 1.125rem;border-bottom:1px solid #f1f5f9;}
.fpanel-body{padding:1rem 1.125rem;}

/* ITEM TABLE */
.item-row{display:grid;gap:.5rem;align-items:center;padding:.75rem .5rem;border-bottom:1px solid #f3f4f6;transition:background .15s;}
.item-row:hover{background:#fafafa;}
.item-row.dragging{opacity:.4;}
.item-row.touch-dragging{box-shadow:0 8px 22px rgba(0,0,0,.14);background:#f0fdf9;}
.row-touch-drag-active{touch-action:none;user-select:none;}
.row-drag-handle{touch-action:none;}
.sortable-zone.drag-over{background:rgba(0,152,121,.04);outline:1px dashed rgba(0,152,121,.28);outline-offset:2px;}
.table-head{font-size:.68rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;}
@media(max-width:767px){
  .table-head{font-size:.88rem;letter-spacing:.03em;}
  .item-row .text-sm{font-size:1.125rem;}
  .item-row .text-xs{font-size:.975rem;}
  .row-drag-handle{position:relative;width:38px;height:38px;display:inline-flex!important;align-items:center;justify-content:center;flex-shrink:0;margin-top:0!important;border:1.5px solid #99d9cd;border-radius:.7rem;background:#f0fdf9;color:#007a61!important;font-size:1.35rem!important;font-weight:800;line-height:1;box-shadow:0 2px 8px rgba(0,152,121,.14);}
  .row-drag-handle::after{content:'Fogd';position:absolute;transform:translateY(27px);font-size:.55rem;font-weight:700;color:#009879;letter-spacing:.02em;}
}

/* AUTOCOMPLETE */
.ac-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;box-shadow:0 8px 20px rgba(0,0,0,.1);z-index:100;max-height:320px;overflow-y:auto;display:none;}
.ac-list.open{display:block;}
.ac-item{padding:.5rem 1rem;cursor:pointer;border-bottom:1px solid #f9fafb;display:flex;justify-content:space-between;align-items:center;gap:.5rem;}
.ac-item:hover{background:#e6f5f3;}
.ac-price{font-size:.75rem;color:#6b7280;white-space:nowrap;flex-shrink:0;}

/* DATE POPOVER */
.date-popover{display:none;position:absolute;z-index:300;background:#fff;border:1px solid #dbe3ea;border-radius:.75rem;box-shadow:0 16px 40px rgba(15,23,42,.18);padding:.9rem;width:292px;left:0;top:110%;color:#111827 !important;text-shadow:none !important;font-family:Verdana,Arial,sans-serif;}
.date-popover.open{display:block;}
.date-popover *{color:inherit;text-shadow:none !important;}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;gap:.75rem;}
.cal-title{font-size:.92rem;font-weight:700;color:#111827 !important;text-align:center;line-height:1.2;}
.cal-nav-btn{width:32px;height:32px;border:1px solid #e5e7eb;border-radius:.5rem;background:#fff;color:#374151 !important;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s,color .15s;position:relative;z-index:1;}
.cal-nav-btn:hover{background:#f0fdf9;border-color:#99d9cd;color:#007a61 !important;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:.35rem;}
.cal-weekdays{margin-bottom:.25rem;}
.cal-weekdays div{text-align:center;font-size:.68rem;font-weight:700;color:#6b7280 !important;padding:.25rem 0;}
.cal-day{appearance:none;border:0;background:transparent;text-align:center;height:34px;border-radius:.45rem;cursor:pointer;font-size:.82rem;line-height:34px;transition:background .15s,color .15s,box-shadow .15s;color:#111827 !important;padding:0;}
.cal-day:hover:not(.cal-other){background:#e6f5f3;color:#007a61 !important;}
.cal-day.cal-other{cursor:default;}
.cal-day.cal-today{background:#eef2ff;color:#1e40af !important;font-weight:700;}
.cal-day.cal-selected{background:#009879;color:#fff !important;font-weight:700;box-shadow:0 4px 10px rgba(0,152,121,.22);}
.cal-footer{margin-top:.85rem;padding-top:.7rem;border-top:1px solid #eef2f7;display:flex;justify-content:space-between;align-items:center;}
.cal-link{appearance:none;border:0;background:transparent;color:#6b7280 !important;font-size:.78rem;font-weight:600;cursor:pointer;padding:.25rem .35rem;border-radius:.35rem;}
.cal-link:hover{background:#f3f4f6;color:#374151 !important;}
.cal-link-primary{color:#009879 !important;}
.cal-day.cal-other{color:#d1d5db !important;pointer-events:none;}

/* MODALS */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);z-index:1100;display:none;}
.modal-backdrop.open{display:flex;align-items:center;justify-content:center;}
.modal-box{background:#fff;border-radius:1rem;padding:1.5rem;width:90%;max-width:480px;box-shadow:0 25px 60px rgba(0,0,0,.2);}

/* DISCOUNT BADGE */
.disc-badge{display:inline-flex;align-items:center;background:#fef2f2;color:#ef4444;border-radius:9999px;padding:.1rem .5rem;font-size:.7rem;font-weight:600;}

/* ITEM ROW with discount - tighter line height */
.item-row .line-through{line-height:1.1;}

/* ITEM EDITOR */
#new-item-editor{border:1.5px solid #e5e7eb;border-radius:.75rem;padding:1rem;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.06);}

/* GROUP */
.group-container{border-bottom:1px solid #f1f5f9;}
.group-header{display:flex;align-items:center;padding:.6rem .5rem;background:#fafafa;border-radius:.5rem;transition:background .15s;}
.group-header:hover{background:#f3f4f6;}
.group-header [contenteditable]{min-width:0;}
/* A csoport összesítő a fejléc legfontosabb számadata: nem zsugorodhat és nem
   törhet el, ha a csoportnév hosszú — a név rövidül helyette (min-width:0 fent). */
/* A csoport összesítő hangsúlyosabb, mint egy tételsor összege: nagyobb és a főcímek
   színét viseli (--heading-color), ahogy a PDF-ben is (V2DocumentBuilder.AddGroupRow). */
.group-subtotal{flex-shrink:0;font-size:1.0625rem;line-height:1.2;font-weight:700;color:var(--heading-color);font-variant-numeric:tabular-nums;}
.group-items{padding-left:1.5rem;min-height:36px;}
.group-add-item-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:34px;padding:.42rem .78rem;margin-right:.3rem;border:1px solid #008a6e;border-radius:.65rem;background:#009879;color:#fff;font-size:.82rem;font-weight:800;line-height:1;box-shadow:0 2px 8px rgba(0,152,121,.22);transition:background .15s,box-shadow .15s,transform .15s;}
.group-add-item-btn:hover{background:#007f66;box-shadow:0 4px 12px rgba(0,152,121,.28);}
.group-add-item-btn:active{transform:translateY(1px);}

/* CONTENTEDITABLE */
[contenteditable]:focus{outline:2px solid rgba(0,152,121,.4);outline-offset:2px;border-radius:3px;}
[contenteditable].ce-dynamic:empty::before{content:attr(data-ph);opacity:0.45;font-style:italic;}
[contenteditable].ce-gray:empty::before{content:attr(data-ph);color:#9ca3af;font-style:italic;}

/* RANGE */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:#e5e7eb;border-radius:9999px;outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#009879;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);}

/* MOBIL: dupla méretű csúszka thumb */
@media (max-width: 767px) {
  input[type=range]{height:6px;}
  input[type=range]::-webkit-slider-thumb{width:30px;height:30px;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.25);}
  input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#009879;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.25);}
  .group-add-item-btn{min-height:38px;padding:.52rem .9rem;font-size:.9rem;border-radius:.75rem;}
  /* Mobilon a csoport összesítő a legfontosabb leolvasható érték a fejlécben. */
  .group-subtotal{margin-right:.5rem;}
}

/* TÉTEL DRAWER (mobil) */
#item-drawer-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;
  transition:opacity .25s;opacity:0;
}
#item-drawer-backdrop.open{display:block;opacity:1;}
#item-drawer{
  position:fixed;bottom:0;left:0;right:0;z-index:1001;
  background:#fff;border-radius:1.25rem 1.25rem 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.18);
  max-height:92vh;overflow-y:auto;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  padding:0 0 env(safe-area-inset-bottom,16px);
}
#item-drawer.open{transform:translateY(0);}
.drawer-handle{width:40px;height:4px;background:#d1d5db;border-radius:9999px;margin:12px auto 4px;}
.drawer-section{padding:0 1.25rem 1rem;}
.drawer-label{font-size:.7rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem;display:block;}
.drawer-input{width:100%;border:1.5px solid #e5e7eb;border-radius:.6rem;padding:.65rem .75rem;font-size:1rem;color:#111827;background:#fff;outline:none;transition:border .15s;}
.drawer-input:focus{border-color:#009879;box-shadow:0 0 0 3px rgba(0,152,121,.12);}
.drawer-input-sm{padding:.5rem .65rem;font-size:.95rem;}
.drawer-row{display:flex;gap:.75rem;align-items:flex-end;}
.drawer-total-box{background:#f0fdf9;border:1.5px solid #bbf7e8;border-radius:.6rem;padding:.6rem .9rem;display:flex;justify-content:space-between;align-items:center;}
.drawer-save-btn{width:100%;padding:.9rem;background:#009879;color:#fff;font-size:1rem;font-weight:700;border-radius:.75rem;border:none;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:.5rem;}
.drawer-save-btn:active{background:#007a61;}
.drawer-cancel-btn{width:100%;padding:.75rem;background:#fff;color:#ef4444;font-size:.9rem;font-weight:600;border-radius:.75rem;border:1.5px solid #fecaca;cursor:pointer;margin-top:.5rem;}

/* COLOR SWATCH */
.cswatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s;flex-shrink:0;}
.cswatch:hover{transform:scale(1.15);}
.cswatch.active{border-color:#009879;box-shadow:0 0 0 2px rgba(0,152,121,.35);}

/* Egyéni szín választó: ugyanaz a korong, mint a preset swatch-ok, de halvány
   színkör-átmenettel — így ránézésre elkülönül a fix színektől, és látszik, hogy
   ott bármilyen szín választható. A natív <input type="color"> átlátszóan fedi a
   korongot, hogy a kattintás a rendszer színválasztóját nyissa. */
.cswatch-custom{position:relative;display:inline-flex;flex-shrink:0;line-height:0;}
.cswatch-custom .cswatch{
  /* A preset korongok <div>-ek; itt <span>, ezért a méret csak blokk-szinten érvényes. */
  display:block;
  background:conic-gradient(from 90deg,
    #f87171,#fbbf24,#a3e635,#34d399,#22d3ee,#60a5fa,#a78bfa,#f472b6,#f87171);
  border:1.5px solid #d1d5db;
  /* Halvány, pasztell hatás: a telített színkör fehérrel tompítva. */
  box-shadow:inset 0 0 0 26px rgba(255,255,255,.35);
}
/* Az aktív keret erősebb a saját szürke keretnél (azonos specificitás, ezért
   a sorrend számít — ez a szabály áll később). A box-shadow itt egyszerre viszi
   a pasztell fátylat és az aktív glow-t, mert egyetlen property. */
.cswatch-custom .cswatch.active{
  border-color:#009879;
  box-shadow:inset 0 0 0 26px rgba(255,255,255,.35),0 0 0 2px rgba(0,152,121,.35);
}
/* A közepén a jelenleg választott egyéni szín, hogy visszajelzést is adjon. */
.cswatch-custom .cswatch-dot{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:10px;height:10px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
  pointer-events:none;
}
.cswatch-custom input[type=color]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:none;padding:0;
}

/* SECTION CARD */
.section-card{background:transparent;border-bottom:1px solid #f1f5f9;}
.section-card:last-child{border-bottom:none;}

/* RICH EDITOR */
.rich-editor{border:1.5px solid #e5e7eb;border-radius:.5rem;padding:.75rem;min-height:70px;font-size:.875rem;color:#374151;outline:none;background:#fafafa;}
.rich-editor:focus{border-color:#009879;background:#fff;}

/* SUMMARY BOX */
#summary-box{border:1.5px solid #e5e7eb;border-radius:.75rem;background:#fff;}

/* DATE FIELD */
.date-field-wrapper{position:relative;}
.date-display{cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;}
.date-display:hover .date-text{text-decoration:underline;text-decoration-style:dotted;}

/* QUICK DATE */
.qdate-btn{font-size:.68rem;font-weight:500;padding:.2rem .5rem;border-radius:.375rem;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.15);color:inherit;cursor:pointer;transition:all .15s;}
.qdate-btn:hover{background:rgba(255,255,255,.3);}

/* TEMPLATE THUMB */
.tmpl-thumb{height:50px;background-size:cover;background-position:center;border-radius:.375rem;position:relative;display:flex;align-items:flex-end;padding:4px 6px;overflow:hidden;cursor:pointer;}
.tmpl-thumb::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.38);border-radius:.375rem;}
.tmpl-name{position:relative;font-size:.68rem;font-weight:700;color:#fff;}
.tmpl-card{border-radius:.5rem;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .15s;}
.tmpl-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15);}
.tmpl-card.active{border-color:#009879;}

/* ── A4 OLDAL LAYOUT ─────────────────────────────────── */
.a4-page {
  --a4-content-x: 1.75rem;
  width: 794px;
  background: white;
  position: relative;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  border-radius: .75rem;
  overflow: hidden;
  border: 1px solid #d1d5db;
}

#a4-wrapper {
  width: 794px;
  margin: 0 auto;
}

/* Összesítő és megjegyzés ne törjön szét */
#summary-box { break-inside: avoid; page-break-inside: avoid; }
.section-card:last-child { break-inside: avoid; page-break-inside: avoid; }

@media (max-width: 820px) {
  #a4-wrapper { transform-origin: top left; }
}

/* PANEL ANIM */
.panel-in{animation:pIn .18s ease;}
@keyframes pIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ── SABLONVÁLASZTÓ ─────────────────────────────────── */
#template-selector{
  position:fixed;left:0;right:0;bottom:0;top:var(--layout-header-height, 104px);z-index:900;
  background:linear-gradient(135deg,#f0fdf9 0%,#e8f5f0 50%,#f0f9ff 100%);
  overflow-y:auto;
  display:flex;flex-direction:column;
}
/* A fejléc pozicionálása/animációja változatlanul a theme.css + theme.js dolga
   (absolute/top:25px, majd görgetéskor .fixedHeader + animated flipInX), hogy
   ugyanúgy nézzen ki, mint a többi oldalon. Egyedül a rétegsorrendet emeljük:
   a theme.css .header_1{z-index:5} a szerkesztő elemei (#logo-wrapper:20,
   #cover-edit-btn:25) alá kerülne, így a legördülő almenü mögéjük csúszna. */
header#header.header_1{z-index:1000;}
/* A sablonválasztó teljes képernyőt takar: alatta a lap ne görögjön, különben a
   mögötte lévő szerkesztő kilátszik az overlay teteje fölött. */
body.template-selector-open{overflow:hidden;}
#template-selector.hidden{display:none;}

.ajanlat-szerkeszto-wrapper{
  padding-top:var(--layout-header-height, 104px);
}

.ts-header{
  display:none;
}
.ts-header-logo{width:32px;height:32px;background:#009879;border-radius:.5rem;display:flex;align-items:center;justify-content:center;}
.ts-body{max-width:1200px;margin:0 auto;padding:2.5rem 2rem 4rem;width:100%;}
.ts-title{font-size:1.7rem;font-weight:800;color:#0f172a;margin-bottom:.4rem;font-family:Verdana,Arial,sans-serif;}
.ts-sub{color:#6b7280;font-size:1rem;margin-bottom:2.5rem;}

.ts-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.75rem;
}
@media(max-width:900px){.ts-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem;}}
@media(max-width:560px){.ts-grid{grid-template-columns:1fr 1fr;gap:.85rem;}}
@media(max-width:380px){.ts-grid{grid-template-columns:1fr;}}

.ts-card{
  background:white;border-radius:1rem;overflow:hidden;
  border:2px solid #e5e7eb;cursor:pointer;
  transition:transform .22s,box-shadow .22s,border-color .22s;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  position:relative;
}
.ts-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 18px 40px rgba(0,0,0,.14);border-color:#009879;}
.ts-card:active{transform:translateY(-1px);}
.ts-card.meggyozo{border-color:#f59e0b;}
.ts-card.meggyozo:hover{border-color:#d97706;box-shadow:0 18px 40px rgba(245,158,11,.2);}

/* A4 arány: 1 : √2 ≈ 1 : 1.4142 */
.ts-card-img{
  width:100%;aspect-ratio:1/1.4142;object-fit:contain;display:block;
  background:#f3f4f6;
}
.ts-card-img-placeholder{
  width:100%;aspect-ratio:1/1.4142;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
  color:#9ca3af;font-size:.75rem;
}
.ts-hover-label{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
  color:white;font-size:.85rem;font-weight:700;
  padding:.9rem .75rem .6rem;
  opacity:0;transition:opacity .2s;
  font-family:Verdana,Arial,sans-serif;
}
.ts-card:hover .ts-hover-label{opacity:1;}
.ts-badge{
  position:absolute;top:.6rem;right:.6rem;
  background:#f59e0b;color:white;
  font-size:.65rem;font-weight:700;
  padding:.2rem .5rem;border-radius:9999px;
  text-transform:uppercase;letter-spacing:.04em;
}

/* ── Locked card (Alap csomag gating) ─────────────────── */
.ts-card.ts-locked{cursor:not-allowed;opacity:.78;}
.ts-card.ts-locked:hover{transform:none;box-shadow:0 2px 8px rgba(0,0,0,.06);border-color:#e5e7eb;}
.ts-card.ts-locked .ts-card-img,.ts-card.ts-locked .ts-card-img-placeholder{filter:grayscale(.55) brightness(.95);}
.ts-card.ts-locked::after{
  content:'';position:absolute;inset:0;background:rgba(255,255,255,.18);
  pointer-events:none;border-radius:1rem;
}
.ts-lock-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(17,24,39,.92);color:#fff;
  padding:.5rem .75rem;border-radius:.6rem;
  display:flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:600;font-family:Verdana,Arial,sans-serif;
  box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:3;
  white-space:nowrap;pointer-events:none;
}
.ts-badge.ts-badge-pro{
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff;
  display:flex;align-items:center;gap:.25rem;
  text-transform:none;letter-spacing:.02em;font-size:.68rem;
}

/* ── Skeleton loader (template selector) ───────────────── */
.ts-skeleton-card{
  background:white;border-radius:1rem;overflow:hidden;
  border:2px solid #e5e7eb;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  aspect-ratio:1/1.4142;
  position:relative;
}
.ts-skeleton-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#f3f4f6 0%,#e5e7eb 50%,#f3f4f6 100%);
  background-size:200% 100%;
  animation:tsShimmer 1.4s ease-in-out infinite;
}
@keyframes tsShimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* ── Full-page loader (ajánlat editor load) ────────────── */
#editor-load-overlay{
  position:fixed;inset:0;z-index:99998;
  background:rgba(255,255,255,.92);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:1.25rem;
  transition:opacity .25s;
}
#editor-load-overlay.hidden{opacity:0;pointer-events:none;}
.edl-spinner{
  width:54px;height:54px;border-radius:50%;
  border:4px solid #e5e7eb;border-top-color:#009879;
  animation:edlSpin .9s linear infinite;
}
@keyframes edlSpin{to{transform:rotate(360deg);}}
.edl-text{
  font-family:Verdana,Arial,sans-serif;font-weight:600;font-size:.95rem;
  color:#374151;letter-spacing:.01em;
}
.edl-subtext{
  font-size:.78rem;color:#6b7280;margin-top:-.35rem;
}

/* Adatbekérő modal */
#meggyozo-modal{
  position:fixed;inset:0;z-index:3000;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
}
#meggyozo-modal.hidden{display:none;}
.mm-box{
  background:white;border-radius:1.25rem;
  width:100%;max-width:480px;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.2);
}
.mm-header{
  padding:1.5rem 1.5rem 0;
  display:flex;justify-content:space-between;align-items:flex-start;
}
.mm-title{font-size:1.15rem;font-weight:800;color:#0f172a;font-family:Verdana,Arial,sans-serif;}
.mm-sub{font-size:.8rem;color:#6b7280;margin-top:.2rem;}
.mm-body{padding:1.25rem 1.5rem;}
.mm-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
@media(max-width:480px){.mm-row{grid-template-columns:1fr;}}
.mm-field{margin-bottom:.85rem;position:relative;}
.mm-label{display:block;font-size:.72rem;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem;}
.mm-label span{color:#ef4444;}
.mm-input{width:100%;border:1.5px solid #e5e7eb;border-radius:.6rem;padding:.6rem .75rem;font-size:.9rem;color:#111827;outline:none;transition:border .15s;font-family:inherit;}
.mm-input:focus{border-color:#009879;box-shadow:0 0 0 3px rgba(0,152,121,.1);}
.mm-input.error{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.1);}
.mm-footer{padding:0 1.5rem 1.5rem;display:flex;gap:.75rem;flex-direction:column;}
.mm-btn-primary{background:#009879;color:white;border:none;border-radius:.75rem;padding:.85rem;font-size:1rem;font-weight:700;cursor:pointer;transition:background .15s;font-family:inherit;}
.mm-btn-primary:hover{background:#007a61;}
.mm-btn-secondary{background:white;color:#6b7280;border:1.5px solid #e5e7eb;border-radius:.75rem;padding:.75rem;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;}
.mm-btn-secondary:hover{background:#f9fafb;}
.mm-error-msg{color:#ef4444;font-size:.75rem;margin-top:.2rem;display:none;}
.mm-error-msg.show{display:block;}

/* ── Heading color system (logo dominant color) ──────────────────── */
:root { --heading-color: #009879; }
.doc-heading { color: var(--heading-color) !important; }

/* A Bemutatkozás és az Ajánlat részletei főcím flex-konténerben ül (mellettük gombok vannak),
   így flex-elemként csak a saját tartalmuk szélességét veszik fel — a text-align:center/right
   ilyenkor nem látszik, miközben a PDF teljes szélességű bekezdésként rendereli őket.
   Ha van beállított igazítás, kinyújtjuk a rendelkezésre álló szélességre, hogy a szerkesztő
   ugyanazt mutassa, mint a PDF. */
.doc-heading[style*="text-align"] { flex: 1 1 auto; min-width: 0; }

/* Hide removed logo in preview mode */
body.preview-mode #logo-wrapper[data-logo-removed="1"] { display: none !important; }

/* Section hidden in bemutatkozas */
#bemutatkozas-section.section-hidden #bemutatkozas-content { display: none; }
body.preview-mode #bemutatkozas-section.section-hidden { display: none !important; }

/* ── Rich text formatting toolbar ───────────────────────────────── */
.fmt-toolbar{display:none;position:fixed;z-index:1100;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;padding:.25rem .35rem;gap:.2rem;box-shadow:0 4px 16px rgba(0,0,0,.12);align-items:center;flex-wrap:nowrap;white-space:nowrap;max-width:calc(100vw - 16px);overflow-x:auto;}
.fmt-toolbar.visible{display:flex;}
.fmt-toolbar.docked-mobile{position:static;z-index:auto;width:100%;max-width:100%;margin:0 0 .35rem;border-radius:.6rem;justify-content:flex-start;box-shadow:none;}
/* A drawerek (z-index:1001) f\u00f6l\u00e9 emelj\u00fck a fmt-toolbart */
#megjegyzes-drawer .megjegyzes-editor:empty:before,
#text-edit-drawer #text-edit-textarea:empty:before { content: attr(data-ph); color:#9ca3af; pointer-events:none; }
.drawer-input[contenteditable="true"]{ white-space:pre-wrap; }
.material-icons{font-family:'Material Icons';font-style:normal;font-weight:400;}
.fmt-btn{border:none;background:transparent;border-radius:.3rem;cursor:pointer;padding:.25rem .35rem;font-size:.8rem;font-weight:600;color:#374151;line-height:1;transition:background .15s,color .15s;}
.fmt-btn:hover{background:#f3f4f6;}
.fmt-btn.active{background:#e5e7eb;color:#111;}
.fmt-sep{width:1px;height:16px;background:#e5e7eb;margin:0 .1rem;flex-shrink:0;}
.fmt-size-select{border:1px solid #e5e7eb;border-radius:.3rem;font-size:.7rem;padding:.15rem .2rem;padding-right:1.1rem;color:#374151;background:#fff;cursor:pointer;outline:none;width:62px !important;min-width:0 !important;max-width:62px !important;height:22px !important;line-height:1.1 !important;flex:0 0 auto;-webkit-appearance:menulist;appearance:menulist;}
.fmt-color-input{width:22px;height:22px;border:1px solid #e5e7eb;border-radius:.3rem;padding:0;cursor:pointer;background:none;align-self:center;vertical-align:middle;}
#fmt-brand-color{padding:0 3px !important;}
#fmt-brand-color:hover{background:#f3f4f6;}

/* ── Lista-igazítás: a globális CSS reset (padding:0) + .a4-page overflow:hidden felülírása ──── */
/* preset.css: ul li { list-style: none; } → li-n kell explicit felülírni (0,1,2 > 0,0,2) */
[data-fmt="1"] ol,[data-fmt="1"] ul{padding-left:1.5em;margin:.25em 0;list-style-position:outside;}
[data-fmt="1"] ul > li{list-style-type:disc;}
[data-fmt="1"] ol > li{list-style-type:decimal;}
[data-fmt="1"] li{padding-left:.15em;}

/* ── Portrait photo ──────────────────────────────────────────────── */
.portrait-ring{width:160px;height:160px;border-radius:16px;overflow:hidden;border:3px dashed #d1d5db;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s;background:#f9fafb;}
.portrait-ring:hover{border-color:#009879;}
.portrait-ring.no-portrait:hover .portrait-placeholder{color:#009879;}
.portrait-ring img{width:100%;height:100%;object-fit:cover;display:block;}
.portrait-placeholder{display:flex;flex-direction:column;align-items:center;gap:.35rem;color:#9ca3af;font-size:.72rem;pointer-events:none;}
.portrait-shape-btn{transition:all .15s;}

/* ── Signature canvas ───────────────────────────────────────────── */
.sig-canvas-wrapper{border:1.5px dashed #d1d5db;border-radius:.5rem;background:#fff;cursor:crosshair;overflow:hidden;display:block;position:relative;}
.sig-img-display{max-width:100%;object-fit:contain;display:block;}
#sig-canvas,#sig-drawer-canvas{position:relative;z-index:2;width:100%;height:100%;display:block;touch-action:none;-ms-touch-action:none;}
.sig-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:300;font-size:13px;color:#d4d6db;pointer-events:none;user-select:none;transition:opacity .2s;z-index:1;}
.sig-canvas-wrapper.has-ink .sig-placeholder{opacity:0;}

.sig-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:.4rem;}
.sig-color-pill,.sig-thick-pill{display:flex;align-items:center;gap:4px;background:#f1f1f3;border-radius:999px;padding:4px;}
.sig-color-btn{width:18px;height:18px;border-radius:999px;border:2px solid transparent;cursor:pointer;padding:0;transition:.15s;}
.sig-color-btn.active{box-shadow:0 0 0 1.5px #fff,0 0 0 3px #111827;}
.sig-custom-btn{width:18px;height:18px;border-radius:999px;background:#fff;border:1px solid #e4e4e7;display:grid;place-items:center;position:relative;overflow:hidden;cursor:pointer;padding:0;}
.sig-custom-ring{position:absolute;inset:2px;border-radius:999px;background:conic-gradient(from 0deg,#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#a855f7,#ef4444);}
.sig-custom-btn.has-custom .sig-custom-ring{background:var(--sig-custom-color,#111827);}
.sig-custom-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;}
.sig-thick-btn{width:22px;height:18px;border-radius:999px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0;transition:.15s;}
.sig-thick-btn.active{background:#111827;}
.sig-thick-btn.active .sig-t-dot{background:#fff;}
.sig-t-dot{border-radius:999px;background:#3f3f46;display:block;}
.sig-tool-btn{width:22px;height:22px;border-radius:999px;background:#fff;border:1px solid #e7e7ea;display:grid;place-items:center;cursor:pointer;color:#3f3f46;transition:.15s;padding:0;}
.sig-tool-btn:hover{border-color:#111827;color:#111827;}
.sig-tool-btn.active{background:#111827;border-color:#111827;color:#fff;}

.sig-mobile-hint{display:none;}
@media (max-width:767px){
  /* Csak amíg nincs aláírás — has-ink esetén elrejtjük, mint a .sig-placeholder/.sig-desktop-hint
     feliratokat. Enélkül a "Koppints ide az aláíráshoz" a kész aláírás fölött is kint maradt. */
  .sig-canvas-wrapper:not(.has-ink) .sig-mobile-hint{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;padding:.4rem;background:rgba(255,255,255,.6);color:#374151;font-size:.68rem;font-weight:600;pointer-events:none;}
}
.sig-canvas-wrapper:not(.has-ink) .sig-desktop-hint{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;padding:.4rem;background:rgba(255,255,255,.0);color:#9ca3af;font-size:.7rem;font-weight:500;pointer-events:none;}

/* ALÁÍRÁS DRAWER (mobil + desktop modal) — nagyobb rajzfelület popupban */
#sig-drawer-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;
  transition:opacity .25s;opacity:0;
}
#sig-drawer-backdrop.open{display:block;opacity:1;}
#sig-drawer{
  position:fixed;bottom:0;left:0;right:0;z-index:1001;
  background:#fff;border-radius:1.25rem 1.25rem 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.18);
  max-height:92vh;overflow-y:auto;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  padding:0 0 env(safe-area-inset-bottom,16px);
  pointer-events:none;
}
#sig-drawer.open{transform:translateY(0);pointer-events:auto;}
@media (min-width:768px){
  #sig-drawer{
    bottom:auto;left:50%;right:auto;
    top:50%;width:min(560px,96vw);
    border-radius:1.25rem;
    transform:translate(-50%,-50%) scale(.95);
    transition:transform .25s cubic-bezier(.32,.72,0,1),opacity .25s;
    opacity:0;
  }
  #sig-drawer.open{transform:translate(-50%,-50%) scale(1);opacity:1;}
}

@media (max-width: 767px) {
  body { overflow-x: hidden; }

  /* A4 oldal fix 794px marad – JS scale()-val lesz lekicsinyítve */
  main.py-6.px-4 { padding: 0 !important; margin-top: 8px !important; }

  /* Az oldal felső padding (Layout header miatt) */
  .ajanlat-szerkeszto-wrapper { padding-top: var(--layout-header-height, 78px) !important; }

  #template-selector {
    top: var(--layout-header-height, 78px);
  }

  .modal-backdrop { align-items: center; justify-content: center; padding: 1rem; }
  .modal-box { width: 100% !important; max-width: calc(100vw - 2rem) !important; }

  .fpanel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 2rem) !important;
    max-width: 360px !important;
    max-height: 85vh !important;
    overflow-y: auto;
  }

  .date-popover {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 290px !important;
    z-index: 9999 !important;
  }

  #cover-section {
    padding: 80px var(--a4-content-x,1.75rem) 1.25rem !important;
  }
  #cover-text-wrapper {
    padding-top: 0 !important;
  }

  /* ── Editor toolbar mobilon alul marad (fixed bottom-0), kompakt méret ── */
  #editor-toolbar {
    padding: .35rem .5rem !important;
    gap: .25rem;
  }
  #editor-toolbar > div:first-child { display: none !important; }
  #editor-toolbar #preview-btn span,
  #editor-toolbar #save-as-template-btn span,
  #editor-toolbar button.bg-brand-600 span { display: inline !important; }
  #editor-toolbar #save-as-template-btn { flex-shrink: 0; }
  #editor-toolbar button {
    padding: .4rem .55rem !important;
    font-size: .75rem !important;
    min-width: unset;
    justify-content: center;
  }
  #editor-toolbar .flex.gap-2 {
    gap: .25rem;
    flex: 1;
    justify-content: flex-end;
  }
}


/* GLOBAL TEXT STYLE defaults */
#cover-section { --text-color: #ffffff; --text-shadow: none; }
#cover-section .text-xs{font-size:.75rem!important;line-height:1rem!important;}
#cover-section .text-sm{font-size:.875rem!important;line-height:1.25rem!important;}
#cover-section .text-base{font-size:1rem!important;line-height:1.5rem!important;}
#cover-section .text-lg{font-size:1.125rem!important;line-height:1.75rem!important;}
#cover-section .text-4xl{font-size:2.25rem!important;line-height:2.5rem!important;}
#cover-section .leading-tight{line-height:1.25!important;}
#cover-section h1, #cover-section h2, #cover-section p,
#cover-section div:not(.date-popover):not(.date-popover *), #cover-section span:not(.date-popover *),
#cover-text-wrapper [contenteditable] {
  color: var(--text-color) !important;
  text-shadow: var(--text-shadow) !important;
}
@media (max-width:767px){#cover-text-wrapper{transform:translateY(-40px);}}