/* GRAY · אישור הזמנה — שובר זיכוי · variant page
   ---------------------------------------------------------------------------
   Loaded after each page's inline <style>. Two parts:
     1. LAYOUT — applies in both modes (this variant's structure differs from
        the original page in /order-approval).
     2. LIGHT MODE — colours only, active when <body> carries .light
        (toggled by the floating switch above the menu + comments buttons).
   --------------------------------------------------------------------------- */

/* ═══════════════ 1 · LAYOUT (both modes) ═══════════════ */

/* slightly wider content column — the data columns are fixed width and the row
   is space-between, so the extra width turns into breathing room between them */
.header, .content-inner, .details-card, .btn-area, .social-row{ max-width:380px; }

.content-inner{ gap:16px; }
/* the farewell line sits just under the note */
.farewell-out{ margin-top:-14px; }

/* order number = a square strip at the top of the card, flush above the poster,
   sharing the card's own background because it's part of it now */
.order-number{
  background-color:transparent;
  border:none;
  border-radius:0;
  font-size:24px;
  padding:12px 16px;
  margin-bottom:-16px;              /* cancels the card's row gap → flush to the photo */
  direction:rtl;
  justify-content:space-between;    /* label hugs the right, number hugs the left */
  gap:12px;
  letter-spacing:normal;
}
.order-number .on-label{ font-size:20px; font-weight:400; white-space:nowrap; }  /* same size as the מועד הגעה labels */
.order-number .on-value{ direction:ltr; font-weight:500; letter-spacing:1px; }

/* The two CTAs are the card's footer bar: full-bleed to its edges, square, no
   gap — so they read as part of the card instead of two pills floating in it.
   Primary sits on the right (RTL). */
.card-body{ padding-bottom:0; }
.card-cta{ width:100%; padding:0; display:flex; gap:0; direction:rtl; }
.card-cta .main-btn, .card-cta .secondary-btn{
  flex:1 1 0; min-width:0; width:auto;
  border:none; border-radius:0; box-shadow:none;
  border-top:1px solid var(--border);
  padding:14px 12px; font-size:20px; line-height:1;
}
.card-cta svg{ width:19px; height:19px; flex-shrink:0; }
.card-cta .secondary-btn{ background-color:transparent; }
.card-cta .secondary-btn:hover{ background-color:rgba(255,255,255,.07); }   /* just a touch lighter */
.card-cta .main-btn:hover{ opacity:1; filter:brightness(1.1); }

/* primary button: a hairline in a deeper shade of its own purple — same 1px
   weight as the outlined pills, just tinted, so it reads as an edge not a ring */
.main-btn{ box-shadow:inset 0 0 0 1px rgba(52,18,110,.35); }

/* the link buttons sit side by side and fill the content width; whichever one
   doesn't fit drops to the next line */
.social-row{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px; }
.social-btn{ flex:1 1 auto; width:auto; padding:8px 6px; font-size:15px; gap:6px; transition:background-color .15s ease; }
/* same hover as "הוספה ליומן": a touch lighter, no purple border */
.social-btn:hover{ border-color:var(--border); background-color:rgba(255,255,255,.07); }


/* ═══════════════ 2 · LIGHT MODE ═══════════════ */

body.light{
  --bg:       #fdefe7;             /* cream page */
  --bg-card:  #ffffff;
  --border:   rgba(32,32,32,.14);
  --text:     #202020;             /* ink */
  --label:    #3f7f6c;             /* darker teal so it holds up on cream */
}

/* the starfield texture is white — flip it to dark specks on cream */
body.light .page::before{ filter:invert(1); opacity:.22; }

/* icons and rules that were baked cream / dark-grey inside the SVG markup */
body.light [fill="#F6E3D5"], body.light [fill="#f6e3d5"]{ fill:#202020; }
body.light [stroke="#343434"]{ stroke:rgba(32,32,32,.16); }
body.light .cls-3{ fill:#202020; }   /* GRAY logo, cream layer */
body.light .cls-1{ fill:#3f7f6c; }   /* GRAY logo, teal layer — brand teal is too pale on cream */

/* text on the purple primary button stays light */
body.light .main-btn{ color:#fdefe7; }
body.light .main-btn [fill="#F6E3D5"], body.light .main-btn [fill="#f6e3d5"]{ fill:#fdefe7; }

/* on white there's no "lighter", so the hover is a soft cream tint */
body.light .card-cta .secondary-btn:hover,
body.light .social-btn:hover{ background-color:rgba(253,239,231,.75); }


/* ═══════════════ dark / light switch ═══════════════
   floating pill that sits ABOVE the menu + comments buttons; stays dark in both
   modes so it reads as page chrome, same as those two. */
#mode{
  position:fixed; bottom:120px; right:20px; z-index:2147481400;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px;
  background:#2a2a2a; color:#fdefe7; border:1px solid #343434;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  font-family:'Aduma','Heebo',Arial,sans-serif; font-weight:500; font-size:15px; line-height:1;
  cursor:pointer; direction:rtl;
  transition:border-color .15s ease, background-color .15s ease;
}
#mode:hover{ border-color:#74b09f; background:#303030; }
#mode svg{ display:block; width:17px; height:17px; }
#mode svg *{ stroke:#74b09f; }
#mode .ico-moon, #mode .t-dark{ display:none; }
body.light #mode .ico-sun, body.light #mode .t-light{ display:none; }
body.light #mode .ico-moon{ display:block; }
body.light #mode .t-dark{ display:inline; }
