/*
 * Create New Box builder (/create-giftbox) — loaded only on that page
 * (Build::index passes it to the header as a page style).
 */

/* ---- Sweet box preview (all boxes) ----------------------------------- */
/* A cream box with a tan rim; empty places are soft pastel tiles, one colour per
   row (rows layout) or per place (assorted), so customers see they can differ. */
.sweet-box-bg, .sweet-box-table, .box-card-kg { background-color:#f7f0e6; border:6px solid #e6d7c3; border-radius:10px; border-collapse:separate; border-spacing:4px; }
/* natural width (Bootstrap's .row > * would stretch it); the surrounding
   .box-and-price-container is already sticky, so the box itself is not */
.sweet-box-bg { margin:0 auto; width:auto !important; max-width:100%; flex:0 0 auto; position:static !important; }
.sweet-box-bg td, .sweet-box-table td { padding:0; border:0 !important; background:transparent; }
.sweet-box-table { margin:15px auto; cursor:pointer; }
.sweet, .modal-sweet, .sm-modal-sweet, .kg-sweet { display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:10px; cursor:pointer; }
.sweet { width:52px; height:52px; }
.sm-modal-sweet { width:64px; height:64px; }   /* 3x3 */
.modal-sweet { width:50px; height:50px; }      /* 4x4 */
.sweet-box-bg td > div img, .kg-sweet img { width:100%; height:100%; object-fit:contain; transform:scale(var(--zoom, 1)); }

/* 3x3 and 4x4 boxes: a thin tan line down the middle of the gaps between
   the places, like the dividers of the real box (the box itself is unchanged;
   not the 1kg box). --gap must match the table's border-spacing. */
.sweet-box-table, .sweet-box-bg:not(.sweet-box-kg) { --gap:4px; --line:2px; --line-colour:#d6c09d; }
.sweet-box-table td, .sweet-box-bg:not(.sweet-box-kg) td { position:relative; }
.sweet-box-table td:not(:last-child)::after, .sweet-box-bg:not(.sweet-box-kg) td:not(:last-child)::after {
    content:""; position:absolute; pointer-events:none; background:var(--line-colour);
    width:var(--line); right:calc((var(--gap) + var(--line)) / -2); top:calc(var(--gap) / -2); bottom:calc(var(--gap) / -2); }
.sweet-box-table tr:not(:last-child) td::before, .sweet-box-bg:not(.sweet-box-kg) tr:not(:last-child) td::before {
    content:""; position:absolute; pointer-events:none; background:var(--line-colour);
    height:var(--line); bottom:calc((var(--gap) + var(--line)) / -2); left:calc(var(--gap) / -2); right:calc(var(--gap) / -2); }
/* lines stop at the box's rim */
.sweet-box-table tr:first-child td::after, .sweet-box-bg:not(.sweet-box-kg) tr:first-child td::after { top:0; }
.sweet-box-table tr:last-child td::after, .sweet-box-bg:not(.sweet-box-kg) tr:last-child td::after { bottom:0; }
.sweet-box-table td:first-child::before, .sweet-box-bg:not(.sweet-box-kg) td:first-child::before { left:0; }
.sweet-box-table td:last-child::before, .sweet-box-bg:not(.sweet-box-kg) td:last-child::before { right:0; }

/* 3x3 and 4x4: an empty place shows a small pastel tile in its middle, like
   the 1kg box. The place keeps its size, so a sweet's picture still fills
   it (filling a place removes slot-empty). */
.sweet-box-table .sweet, .sweet-box-bg:not(.sweet-box-kg) .slot-empty { padding:22%; background-clip:content-box; border-radius:40%; }

/* placeholder colours (baby-soft pastels) */
.slot-c0  { background-color:#cfe6fb; } .slot-c1  { background-color:#fde0c5; } .slot-c2  { background-color:#d6f0dc; } .slot-c3  { background-color:#f9d3df; }
.slot-c4  { background-color:#e3dbf6; } .slot-c5  { background-color:#fff0b8; } .slot-c6  { background-color:#c9eeeb; } .slot-c7  { background-color:#ffd6cb; }
.slot-c8  { background-color:#dae6ff; } .slot-c9  { background-color:#efe1cf; } .slot-c10 { background-color:#e0f3c7; } .slot-c11 { background-color:#f5d5ee; }
.slot-c12 { background-color:#d2ebf6; } .slot-c13 { background-color:#ffe4b0; } .slot-c14 { background-color:#d9d4f5; } .slot-c15 { background-color:#c6eadb; }

/* 1kg box: one channel of sweets per row, plus the row description */
.sweet-box-bg.sweet-box-kg { --kg-row-w:250px; --kg-row-h:44px; border-spacing:0 4px; }
.sweet-box-kg td.kg-channel { background-color:#fffaf3; border-top:2px solid #e6d7c3 !important; border-bottom:2px solid #e6d7c3 !important; padding:3px 6px; }
.sweet-box-kg .kg-row { display:flex; align-items:center; justify-content:space-evenly; width:var(--kg-row-w); height:var(--kg-row-h); }
.kg-sweet { --kg-size:min(var(--kg-row-h), calc(var(--kg-row-w) / var(--kg-pieces, 6) - 4px)); flex:0 0 auto; width:var(--kg-size); height:var(--kg-size); border-radius:18%; } /* % scales with the tile (html2canvas cannot parse min() here) */
.sweet-box-kg .kg-unused { display:none; }
.sweet-box-kg.taking-picture td.kg-row-label { display:none; }
.sweet-box-kg td.kg-row-label { min-width:120px; max-width:160px; padding:0 8px; font-size:.8rem; line-height:1.2; text-align:left; color:#655d5b; cursor:pointer; white-space:normal; }

/* 1kg size card (no photo): a drawn box */
.box-card-kg { display:inline-flex; flex-direction:column; gap:6px; padding:10px; margin-top:20px; width:250px; transition:opacity .2s; }
.box-card-kg:hover { opacity:.7; }
.box-card-kg .kg-card-row { display:flex; justify-content:space-evenly; padding:6px 4px; background-color:#fffaf3; border-top:2px solid #e6d7c3; border-bottom:2px solid #e6d7c3; }
.box-card-kg .kg-card-row span { width:26px; height:26px; border-radius:8px; }
.box-image-note { font-size:.85rem; color:#655d5b; }


/* ---- Step 1: premium gift boxes first, the 1kg box as "Also available" -- */
.premium-card { position:relative; padding:44px 24px 24px; background:#fffdf8; border:2px solid #e9cf8f; border-radius:16px; box-shadow:0 6px 18px rgba(120, 90, 30, .12); }
.premium-badge { position:absolute; top:14px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:4px 12px; border-radius:20px; font-size:.8rem; color:#7a5a12; background:#fbefd0; }
.premium-card-title { font-size:1.35rem; margin-bottom:2px; }
.premium-card-price { color:#655d5b; margin-bottom:16px; }
.box-info-btn { padding:0 4px; border:0; background:none; color:#655d5b; font-size:1rem; vertical-align:middle; }
.box-info-btn:hover, .box-info-btn:focus { color:#7a5a12; }
/* all three box cards share one size: image area, then text, buttons at the bottom */
.box-choice-card { display:flex; flex-direction:column; }
.box-choice-image { height:240px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.box-choice-image img { max-height:240px; max-width:100%; object-fit:contain; border-radius:6px; }
.box-choice-actions { margin-top:auto; }
.kg-card { position:relative; padding:44px 24px 24px; background:#fff; border:1px solid #e3dcd4; border-radius:16px; box-shadow:0 6px 18px rgba(120, 90, 30, .08); }
.kg-badge { color:#4f6b5a; background:#e3f1e6; }
.box-choice-image .box-card-kg { margin:0; }
/* 3x3 / 4x4 cards without a picture: a drawing of the box (fills the picture area) */
.box-choice-image .box-card-drawing { width:100%; max-width:230px; table-layout:fixed; margin:0; cursor:default; }
.box-choice-image .box-card-drawing .sweet { width:100%; height:auto; aspect-ratio:1 / 1; cursor:default; }
.box-card-kg.box-card-kg-sm { width:120px; margin:0; padding:5px; gap:3px; border-width:4px; flex:0 0 auto; }
.box-card-kg-sm .kg-card-row { padding:3px 2px; }
.box-card-kg-sm .kg-card-row span { width:12px; height:12px; border-radius:3px; }

/* ---- Step 2: layout cards, previews drawn for the chosen box ---------- */
.layout-card { display:block; height:100%; padding:16px; border:1px solid #e3dcd4; border-radius:14px; text-align:center; text-decoration:none; color:inherit; background:#fff; cursor:pointer; transition:box-shadow .2s, border-color .2s; }
.layout-card:hover { color:inherit; border-color:#e9cf8f; box-shadow:0 6px 18px rgba(120, 90, 30, .12); }
.layout-card .sweet-box-table { margin:0 auto 12px; }
.layout-card .box-card-kg { margin:0 auto 12px; width:200px; }
.layout-card .box-card-kg-sm .kg-card-row span { width:20px; height:20px; }
.sweet-box-table-4 .sweet { width:38px; height:38px; }
/* the drawing scales with its card (phones: two narrow cards side by side),
   so it never spills out of the card or into the next step */
.layout-card { overflow:hidden; }
.layout-card .sweet-box-table { width:100%; max-width:220px; table-layout:fixed; }
.layout-card .sweet-box-table .sweet { width:100%; height:auto; aspect-ratio:1 / 1; }
.layout-card .box-card-kg { width:100%; max-width:200px; }
@media (max-width: 575.98px) {
    .layout-card { padding:10px; }
    .layout-card .sweet-box-table { border-width:4px; border-spacing:3px; --gap:3px; }
    .layout-card .box-card-kg-sm .kg-card-row span { width:14px; height:14px; }
}
.layout-card-title { font-size:1.15rem; margin-bottom:2px; }
.layout-card-hint { font-size:.85rem; color:#655d5b; }

/* ---- Step 3: layout bar (switch layout any time) and "in box" badges -- */
.layout-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; max-width:900px; margin:0 auto 10px; padding:10px 14px; border:1px solid #e3dcd4; border-radius:12px; background:#fbf7f1; }
.layout-bar-switch { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.layout-bar-label { font-size:.85rem; color:#655d5b; }
.layout-bar-switch .btn { border:1px solid #d9cfc4; background:#fff; color:#4f4542; border-radius:20px; }
.layout-bar-switch .btn.active { background:#231816; border-color:#231816; color:#fff; }
.in-box-badge { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:10px; font-size:.75rem; vertical-align:middle; color:#7a5a12; background:#fbefd0; }
/* how far the box is filled: under the price, above the 1kg price note */
.box-status { margin-top:-6px; color:#655d5b; }
.box-status:empty { display:none; }

/* ---- Phone: the box sits in the sticky header next to the price and buttons */
.header-area { position:fixed; visibility:hidden; z-index:999; width:100%; border-top:solid #fb9102;
    opacity:0; transform:translateY(-16px); transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
/* phones on the sweets step: the box slides down from under the navbar (box-builder.js) */
.header-area.header-shown { visibility:visible; opacity:.95; transform:none; transition:opacity .35s ease, transform .35s ease, visibility 0s; }
/* room for that header above the page title, opened and closed smoothly */
#tmw-curate #mobile { transition:padding-top .35s ease; }
.header-area.box-in-header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; }
.header-area #table-destination, .header-area #buttons-destination { float:none; margin:0; width:auto; }
.header-area .sweet-box-bg { border-width:4px; border-spacing:2px; border-radius:8px; margin:0; position:static !important; }
.header-area .sweet-box-bg:not(.sweet-box-kg) { --gap:2px; --line:1px; }
.header-area .sm-modal-sweet { width:30px; height:30px; border-radius:6px; }
.header-area .modal-sweet { width:23px; height:23px; border-radius:5px; }
.header-area .sweet-box-kg { --kg-row-w:104px; --kg-row-h:20px; border-spacing:0 2px; }
.header-area .sweet-box-kg td.kg-channel { padding:1px 3px; }
.header-area .kg-sweet { border-radius:3px; }
.header-area .sweet-box-kg td.kg-row-label { min-width:64px; max-width:72px; padding:0 3px; font-size:.58rem; line-height:1.15; }
.header-area #buttons-destination { flex:1 1 auto; min-width:0; }
.header-area #move-buttons > div:first-child { margin:0 0 6px !important; }
.header-area .box-status { margin:-4px 0 6px; font-size:.75rem; line-height:1.2; }
.header-area #move-buttons .fs-1 { font-size:1.3rem !important; white-space:nowrap; }
.header-area #move-buttons > div:last-child { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.header-area #move-buttons .btn { padding:.3rem .55rem; font-size:.8rem; white-space:nowrap; }

/* ---- Sweet list --------------------------------------------------------- */
/* flat, wide sweets (Kaju Katli) look small next to the others: a larger picture
   (the class is set by title in create-giftbox.php) */
.sweet-card-larger-picture .card-img-container { overflow:visible; }
.sweet-card-larger-picture .card-img-container img { transform:scale(1.2); }

/* ---- Sweets step: the sweet list rises in, and sinks out on the way back ---- */
.sweet-box-and-images.fill-entering { animation:fillIn .6s ease-out both; }
.sweet-box-and-images.fill-leaving { animation:fillOut .35s ease-in both; pointer-events:none; }
@keyframes fillIn { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:none; } }
@keyframes fillOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(32px); } }
@media (prefers-reduced-motion: reduce) {
    .sweet-box-and-images.fill-entering, .sweet-box-and-images.fill-leaving { animation:none; }
    .header-area, .header-area.header-shown, #tmw-curate #mobile { transition:none; }
}