/* ==========================================================================
   Atlaso --- components.css
   Reusable UI: form fields, segmented control, swatches, book-cover, cards.
   ========================================================================== */

/* --- Floating-label fields (label sits inside, rises on focus/fill) ------ */
/* Markup: <label class="fld"><input class="fld__input" placeholder=" "><span class="fld__label">שם</span></label> */
.fld { position: relative; display: block; margin-bottom: 16px; }
.fld__input, .fld__select, .fld__textarea {
    width: 100%;
    padding: 22px 14px 8px;
    border: 1.5px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-ink);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.fld__textarea { min-height: 88px; resize: vertical; }
.fld__input::placeholder { color: transparent; }
.fld__label {
    position: absolute; inset-inline-start: 14px; top: 15px;
    color: var(--c-muted); pointer-events: none; font-size: 1rem;
    transform-origin: inset-inline-start top;
    transition: transform 0.18s var(--ease), color 0.18s;
}
/* RTL-correct float origin */
[dir="rtl"] .fld__label { transform-origin: right top; }
.fld__input:focus, .fld__select:focus, .fld__textarea:focus {
    outline: none; border-color: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(232, 131, 126, 0.12);
}
.fld__input:focus + .fld__label,
.fld__input:not(:placeholder-shown) + .fld__label,
.fld__textarea:focus + .fld__label,
.fld__textarea:not(:placeholder-shown) + .fld__label,
.fld.is-filled .fld__label,
.fld__select:focus + .fld__label {
    transform: translateY(-11px) scale(0.76);
    color: var(--c-primary);
    font-weight: 600;
}
.fld__err { display: block; color: var(--c-primary-d); font-size: 0.8rem; margin-top: 5px; }

.field { display: block; margin-bottom: 16px; }
.field__label { display: block; font-weight: 600; font-size: 0.86rem; color: var(--c-ink-soft); margin-bottom: 6px; }
.field__input {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-ink);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.field__input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(232, 131, 126, 0.12);
}
.field__err { display: block; color: var(--c-primary-d); font-size: 0.8rem; margin-top: 5px; font-style: normal; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.check {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.92rem; color: var(--c-ink-soft); margin: 8px 0; cursor: pointer;
}
.check input { width: 18px; height: 18px; accent-color: var(--c-primary); }
.check a { color: var(--c-primary); text-decoration: underline; }
.privacy-check { align-items:flex-start; padding:11px 12px; border:1px solid #e3e6ec; border-radius:11px; background:#fafbfc; font-size:.8rem; line-height:1.45; }
.privacy-check input { flex:none; margin-top:1px; }
.privacy-check span { min-width:0; }

/* Segmented control */
.seg { display: inline-flex; background: var(--c-bg); border-radius: var(--radius-pill); padding: 4px; gap: 4px; }
.seg__btn {
    padding: 8px 18px; border-radius: var(--radius-pill);
    font-weight: 600; font-size: 0.9rem; color: var(--c-muted);
    transition: all 0.25s var(--ease);
}
.seg__btn.is-active { background: #fff; color: var(--c-ink); box-shadow: var(--shadow-sm); }

/* Palette swatches --- compact, pastel */
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, 32px); gap: 8px; }
.swatch {
    width: 32px; height: 32px; border-radius: 9px; position: relative;
    background: linear-gradient(135deg, var(--a) 0 62%, var(--b) 62% 100%);
    transition: transform 0.18s var(--ease), box-shadow 0.18s;
    box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.08);
}
.swatch:hover { transform: translateY(-2px) scale(1.08); box-shadow: var(--shadow); }
.swatch.is-active { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--c-ink); }

/* Custom colour pickers */
.custom-colors { display: flex; gap: 14px; }
.cc { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--c-ink-soft); }
.cc input[type="color"] { width: 42px; height: 38px; padding: 0; border: 1.5px solid var(--c-line); border-radius: 10px; background: none; cursor: pointer; }
.cc input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.cc input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

/* Custom background colour picker */
.bg-color-row { display: flex; align-items: center; gap: 12px; }
.bg-color-input {
    width: 52px; height: 40px; padding: 0; border: 1.5px solid var(--c-line);
    border-radius: var(--radius-sm); background: none; cursor: pointer; flex: none;
}
.bg-color-input::-webkit-color-swatch-wrapper { padding: 3px; }
.bg-color-input::-webkit-color-swatch { border: none; border-radius: 6px; }
.bg-color-hint { font-size: 0.8rem; color: var(--c-muted); }

/* SVG suggestions */
.svg-suggest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.svg-suggest__item {
    aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--c-bg);
    display: flex; align-items: center; justify-content: center; padding: 14px;
    color: var(--c-ink); transition: transform 0.2s var(--ease), background 0.2s, box-shadow 0.2s;
    box-shadow: inset 0 0 0 1.5px var(--c-line);
}
.svg-suggest__item svg { width: 100%; height: 100%; }
.svg-suggest__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.svg-suggest__item.is-active { background: var(--c-ink); color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent); }

/* --- Book cover (used in builder + samples) ----------------------------- */
.book-cover {
    position: relative; width: 100%;
    /* Matches the active product proportions (square for 20x20, tall for A4). */
    aspect-ratio: var(--cover-ratio, 0.707);
    border-radius: 6px; overflow: hidden;
    background: var(--bg); color: var(--text);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 12% 10%; text-align: center;
    box-shadow: var(--shadow);
}
/* (spine line removed --- looked like an unwanted thin frame on every cover) */
.book-cover__spine { display: none; }
.book-cover__dest {
    font-family: var(--title-font, var(--font-title)); font-weight: 900;
    /* Title fills ~90% of the cover width; single line (JS shrinks to fit). */
    width: 90%;
    font-size: clamp(1.4rem, 3.4vw, 2.6rem); line-height: 0.86;
    letter-spacing: -0.02em; white-space: nowrap; overflow: hidden;
    text-transform: uppercase;   /* Latin -> ALL CAPS (Hebrew unaffected) */
    position: relative; z-index: 2;
}
.book-cover__dest .lat { display: inline; }
.book-cover__sub { font-size: 0.74rem; text-transform: uppercase; margin-top: 7px; opacity: 0.92; font-weight: 600; position: relative; z-index: 2; }
.book-cover__year { font-size: 0.68rem; text-transform: uppercase; margin-top: 4px; color: var(--accent); font-weight: 700; position: relative; z-index: 2; }
/* Bigger illustrations --- intentionally large; may overlap the title. */
.book-cover__ill { width: 58%; aspect-ratio: 1; margin-top: -6%; color: var(--accent); position: relative; z-index: 1; }
.book-cover__ill svg { width: 100%; height: 100%; }

/* ---- Layout variants (distinct compositions, big typography) ----------- */
/* classic: centered, very large title */
.book-cover--classic .book-cover__dest { font-size: clamp(1.8rem, 4.2vw, 3.2rem); }

/* stacked: title pinned BOTTOM-LEFT, illustration on top */
.book-cover--stacked { justify-content: flex-end; align-items: flex-start; text-align: right; }
.book-cover--stacked .book-cover__ill { order: -1; align-self: center; margin: 0 0 -4% 0; width: 64%; }
.book-cover--stacked .book-cover__dest { font-size: clamp(1.7rem, 4vw, 3.2rem); }

/* band: accent stripe behind a refined title */
.book-cover--band { justify-content: center; }
.book-cover--band::before {
    content: ''; position: absolute; left: 0; right: 0; top: 40%; height: 22%;
    background: var(--accent); opacity: 0.28; z-index: 0;
}
.book-cover--band .book-cover__dest { font-size: clamp(1.3rem, 3vw, 2.3rem); }
.book-cover--band .book-cover__ill { width: 46%; }

/* split: title pinned TOP-RIGHT, illustration drifts low-left */
.book-cover--split { justify-content: flex-end; align-items: flex-end; text-align: right; }
.book-cover--split .book-cover__dest { position: absolute; top: 8%; inset-inline-end: 8%; width: 70%; font-size: clamp(1.6rem, 3.8vw, 3rem); }
.book-cover--split .book-cover__sub, .book-cover--split .book-cover__year { position: absolute; top: 26%; inset-inline-end: 8%; }
.book-cover--split .book-cover__ill { position: absolute; bottom: -4%; inset-inline-start: -4%; width: 62%; }

/* frame: title ROTATED 90° down the side, big illustration */
.book-cover--frame { box-shadow: inset 0 0 0 4px var(--accent), var(--shadow); justify-content: center; }
.book-cover--frame .book-cover__dest {
    position: absolute; top: 50%; inset-inline-end: 6%; transform-origin: right center;
    transform: translateY(-50%) rotate(-90deg); width: 120%; text-align: center;
    font-size: clamp(1.6rem, 3.8vw, 3rem);
}
.book-cover--frame .book-cover__ill { margin-top: 0; width: 58%; }

.co-error-banner {
    background: #fff0f3; color: var(--c-primary-d); border: 1px solid #ffd4dd;
    padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 600;
}

/* --- Status screens (failed / thank-you / resume) --- globally available --- */
.status-screen { min-height: calc(100vh - var(--topbar-h)); display: grid; place-items: center; padding: 24px; }
.status-card {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: clamp(30px, 6vw, 56px); max-width: 520px; width: 100%; text-align: center; position: relative; overflow: hidden;
}
.status-card h1 { font-family: var(--font-title); font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 10px; }
.status-card p { color: var(--c-ink-soft); margin-bottom: 8px; }
.status-sub { font-size: 0.9rem; color: var(--c-muted); }
.status-icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; margin: 0 auto 18px; color: #fff; }
.status-icon--ok { background: var(--c-teal); }
.status-icon--fail { background: var(--c-primary); }
.status-icon--wait { background: var(--c-accent); }
.status-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.status-summary { list-style: none; display: flex; gap: 18px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.status-summary li { display: flex; flex-direction: column; }
.status-summary span { font-size: 0.75rem; color: var(--c-muted); }
.status-summary strong { font-size: 1.1rem; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
/* Confetti falling from the very top of the viewport */
.confetti-top { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.delivery-scene { margin: -6px 0 14px; }
.delivery-scene svg { display: block; }
.resume-form { display: flex; gap: 10px; margin: 18px 0; }
.resume-form .field__input { flex: 1; }
.card-close {
    position: absolute; top: 14px; inset-inline-start: 14px;
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; color: var(--c-ink-soft);
    background: var(--c-bg); transition: background 0.2s, transform 0.2s var(--ease);
}
.card-close:hover { background: var(--c-line); transform: rotate(90deg); }

/* --- Login/register popup (blurred backdrop) --- global ------------------- */
.privacy-inline { margin:8px 0 13px; color:var(--c-muted); font-size:.72rem; line-height:1.5; }
.privacy-inline a { color:var(--c-primary-d); font-weight:800; text-decoration:underline; text-underline-offset:2px; }
.lp-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.lp-modal[hidden] { display: none; }
.lp-modal__backdrop { position: absolute; inset: 0; background: rgba(20,20,40,0.30); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: lpFade 0.25s ease; }
.lp-modal__card {
    position: relative; background: #fff; border-radius: var(--radius-lg); padding: clamp(26px, 5vw, 38px);
    width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); animation: lpPop 0.34s var(--ease);
}
@keyframes lpFade { from { opacity: 0; } }
/* transform-only entrance (never leaves the card invisible) */
@keyframes lpPop { 0% { transform: translateY(18px) scale(0.94); } 60% { transform: translateY(-3px) scale(1.012); } 100% { transform: translateY(0) scale(1); } }
.lp-modal__x { position: absolute; top: 14px; inset-inline-start: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--c-bg); color: var(--c-ink-soft); display: grid; place-items: center; transition: background 0.2s; }
.lp-modal__x:hover { background: var(--c-line); }
.lp-modal__card h2 {
    font-family: var(--font-title); font-size: clamp(2rem, 6vw, 2.7rem); line-height: 1.05;
    text-align: center; padding-inline: 42px; margin: 0 0 8px;
}
.lp-modal__sub { color: var(--c-muted); font-size: 0.9rem; line-height: 1.55; text-align: center; margin: 6px 0 18px; }
.auth-tabs { display: flex; background: var(--c-bg); border-radius: var(--radius-pill); padding: 4px; gap: 4px; margin-bottom: 18px; }
.auth-tab { flex: 1; padding: 10px; border-radius: var(--radius-pill); font-weight: 700; color: var(--c-muted); transition: all 0.2s var(--ease); }
.auth-tab.is-active { background: #fff; color: var(--c-ink); box-shadow: var(--shadow-sm); }
.auth-error { background: #fff0f3; color: var(--c-primary-d); padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; font-weight: 600; }
.auth-form { display: flex; flex-direction: column; }
.auth-form[hidden] { display: none; }
.google-auth-btn {
    width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 1.5px solid var(--c-line); border-radius: var(--radius-pill); background: #fff; color: var(--c-ink);
    font-weight: 800; box-shadow: 0 10px 22px -18px rgba(18, 24, 40, 0.6);
    transition: transform 0.18s var(--ease), border-color 0.18s, box-shadow 0.18s;
}
.google-auth-btn:hover { transform: translateY(-1px); border-color: rgba(20, 27, 46, 0.22); box-shadow: 0 14px 26px -20px rgba(18, 24, 40, 0.75); }
.google-auth-btn__icon { width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--c-muted); font-size: 0.82rem; font-weight: 700; }
.auth-divider::before,
.auth-divider::after { content: ""; height: 1px; background: var(--c-line); flex: 1; }

/* Sticky mobile CTA */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
    border-top: 1px solid var(--c-line);
}

/* Login modal: the "why log in" points */
.lp-modal__sub { margin-bottom: 10px; }
.lp-modal__points { list-style: none; margin: 0 0 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
    background: #FBF6F2; border: 1px solid rgba(232,131,126,0.25); border-radius: 14px;
    font-size: 0.86rem; color: var(--c-ink-soft); line-height: 1.5; }
.lp-modal__points li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; }
.lp-modal__points li > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.lp-modal__points strong { color: var(--c-ink); }
.lp-modal__points small { color: var(--c-muted); font-size: .76rem; line-height: 1.35; }
.lp-modal__point-icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--c-primary-d); background: #fff; border: 1px solid rgba(232,131,126,.22); }
.lp-modal__point-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cover-art__newborn-pattern{position:absolute;inset:0;z-index:0;opacity:var(--nb-pattern-strength,1);pointer-events:none}
.cover-art__newborn-pattern--diamonds{background-image:linear-gradient(45deg,transparent 48.7%,var(--nb-pattern) 49%,var(--nb-pattern) 51%,transparent 51.3%),linear-gradient(-45deg,transparent 48.7%,var(--nb-pattern) 49%,var(--nb-pattern) 51%,transparent 51.3%);background-size:var(--nb-pattern-w,22%) var(--nb-pattern-h,16%)}
.cover-art__newborn-pattern--quilt{background-image:linear-gradient(45deg,transparent 49%,var(--nb-pattern) 49.5%,transparent 50%),linear-gradient(-45deg,transparent 49%,var(--nb-pattern) 49.5%,transparent 50%),radial-gradient(circle,var(--nb-pattern) 0 1.5px,transparent 2px);background-size:var(--nb-pattern-w,26%) var(--nb-pattern-h,18%)}
.cover-art__newborn-pattern--bows{background-image:radial-gradient(ellipse at 42% 50%,transparent 0 7%,var(--nb-pattern) 8% 10%,transparent 11%),radial-gradient(ellipse at 58% 50%,transparent 0 7%,var(--nb-pattern) 8% 10%,transparent 11%);background-size:var(--nb-pattern-w,28%) var(--nb-pattern-h,18%)}
.cover-art__newborn-pattern--stars{background-image:radial-gradient(circle,var(--nb-pattern) 0 2px,transparent 2.5px),radial-gradient(circle,var(--nb-pattern) 0 1px,transparent 1.5px);background-position:0 0,28px 35px;background-size:var(--nb-pattern-w,56px) var(--nb-pattern-h,70px)}
.cover-art__newborn-pattern--levin{background:var(--nb-pattern);-webkit-mask:url('/assets/css/../img/newborn/pattern-levin.svg') repeat;mask:url('/assets/css/../img/newborn/pattern-levin.svg') repeat;-webkit-mask-size:var(--nb-pattern-w,38%) var(--nb-pattern-h,auto);mask-size:var(--nb-pattern-w,38%) var(--nb-pattern-h,auto);opacity:var(--nb-pattern-strength,1)}
.cover-art__newborn-pattern--pattern2,.cover-art__newborn-pattern--pattern3,.cover-art__newborn-pattern--pattern4,.cover-art__newborn-pattern--pattern5,.cover-art__newborn-pattern--pattern6,.cover-art__newborn-pattern--pattern7{background:var(--nb-pattern);-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:var(--nb-pattern-w,34%) var(--nb-pattern-h,auto);mask-size:var(--nb-pattern-w,34%) var(--nb-pattern-h,auto)}
.cover-art__newborn-pattern--pattern2{-webkit-mask-image:url('/assets/css/../img/newborn/pattern-2.svg');mask-image:url('/assets/css/../img/newborn/pattern-2.svg')}.cover-art__newborn-pattern--pattern3{-webkit-mask-image:url('/assets/css/../img/newborn/pattern-3.svg');mask-image:url('/assets/css/../img/newborn/pattern-3.svg')}.cover-art__newborn-pattern--pattern4{-webkit-mask-image:url('/assets/css/../img/newborn/pattern-4.svg');mask-image:url('/assets/css/../img/newborn/pattern-4.svg')}.cover-art__newborn-pattern--pattern5{-webkit-mask-image:url('/assets/css/../img/newborn/pattern-5.svg');mask-image:url('/assets/css/../img/newborn/pattern-5.svg')}.cover-art__newborn-pattern--pattern6{-webkit-mask-image:url('/assets/css/../img/newborn/pattern-6.svg');mask-image:url('/assets/css/../img/newborn/pattern-6.svg')}.cover-art__newborn-pattern--pattern7{-webkit-mask-image:url('/assets/css/../img/newborn/pattern-7.svg');mask-image:url('/assets/css/../img/newborn/pattern-7.svg')}
.cover-art__newborn-pattern--dots{background-image:radial-gradient(circle,var(--nb-pattern) 0 2px,transparent 2.7px);background-size:var(--nb-pattern-w,58px) var(--nb-pattern-h,58px);background-position:center}
.cover-art__newborn-top,.cover-art__newborn-name{position:absolute;z-index:2;width:84%;transform:translate(-50%,-50%);text-align:center;text-transform:none;text-wrap:balance;line-height:1}
.cover-art__newborn-top,.cover-art__newborn-name{font-weight:400;-webkit-text-stroke:0!important;text-shadow:none!important}
.cover-art__newborn-top{font-size:12cqw}.cover-art__newborn-name{font-size:6.5cqw}