/* =========================================================
   ANAN GIFT FLOW — shared styling
   used by: gift-verify.html, gift-schedule.html, gift-confirmation.html
   ========================================================= */

:root{
  --navy:#2B2D72;
  --navy-2:#1f2057;
  --orange:#F97316;
  --pink:#EC4089;
  --peach:#FF8C42;
  --gradient: linear-gradient(135deg,#FF8C42 0%,#F97316 50%,#EC4089 100%);
  --bg:#FAF7FF;
  --card:#FFFFFF;
  --ink:#1A1B3A;
  --muted:#6B6D8F;
  --border:rgba(43,45,114,.08);
  --border-strong:rgba(43,45,114,.14);
  --shadow:0 20px 60px -20px rgba(43,45,114,.25);
  --shadow-sm:0 8px 24px -12px rgba(43,45,114,.15);
  --success:#10B981;
  --success-bg:#ECFDF5;
  --danger:#DC2626;
  --danger-bg:#FEF2F2;
}
.o_anan_gift_flow, .o_anan_gift_flow *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.o_anan_gift_flow{font-family:'Cairo',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);min-height:100%;overflow-x:hidden}
.o_anan_gift_flow{
  background:
    radial-gradient(circle at 0% 0%, rgba(236,64,137,.10) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(249,115,22,.10) 0%, transparent 45%),
    var(--bg);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.o_anan_gift_flow a{text-decoration:none;color:inherit}
.o_anan_gift_flow[dir="rtl"]{
  direction:rtl;
  text-align:right;
}
.o_anan_gift_flow[dir="ltr"]{
  direction:ltr;
  text-align:left;
}

.o_anan_gift_flow[dir="rtl"] .topbar,
.o_anan_gift_flow[dir="rtl"] .activity-meta,
.o_anan_gift_flow[dir="rtl"] .panel-title,
.o_anan_gift_flow[dir="rtl"] .panel-actions,
.o_anan_gift_flow[dir="rtl"] .detail-row,
.o_anan_gift_flow[dir="rtl"] .alert,
.o_anan_gift_flow[dir="rtl"] .timeslots,
.o_anan_gift_flow[dir="rtl"] .seat-info,
.o_anan_gift_flow[dir="rtl"] .ga-buttons,
.o_anan_gift_flow[dir="rtl"] .btn-primary,
.o_anan_gift_flow[dir="rtl"] .btn-secondary{
  direction:rtl;
}

.o_anan_gift_flow[dir="ltr"] .topbar,
.o_anan_gift_flow[dir="ltr"] .activity-meta,
.o_anan_gift_flow[dir="ltr"] .panel-title,
.o_anan_gift_flow[dir="ltr"] .panel-actions,
.o_anan_gift_flow[dir="ltr"] .detail-row,
.o_anan_gift_flow[dir="ltr"] .alert,
.o_anan_gift_flow[dir="ltr"] .timeslots,
.o_anan_gift_flow[dir="ltr"] .seat-info,
.o_anan_gift_flow[dir="ltr"] .ga-buttons,
.o_anan_gift_flow[dir="ltr"] .btn-primary,
.o_anan_gift_flow[dir="ltr"] .btn-secondary{
  direction:ltr;
}

.o_anan_gift_flow[dir="rtl"] .activity-info,
.o_anan_gift_flow[dir="rtl"] .panel,
.o_anan_gift_flow[dir="rtl"] .gift-helper,
.o_anan_gift_flow[dir="rtl"] .form-label,
.o_anan_gift_flow[dir="rtl"] .form-help,
.o_anan_gift_flow[dir="rtl"] .form-error,
.o_anan_gift_flow[dir="rtl"] .activity-description,
.o_anan_gift_flow[dir="rtl"] .detail-row .det-content{
  text-align:right;
}

.o_anan_gift_flow[dir="ltr"] .activity-info,
.o_anan_gift_flow[dir="ltr"] .panel,
.o_anan_gift_flow[dir="ltr"] .gift-helper,
.o_anan_gift_flow[dir="ltr"] .form-label,
.o_anan_gift_flow[dir="ltr"] .form-help,
.o_anan_gift_flow[dir="ltr"] .form-error,
.o_anan_gift_flow[dir="ltr"] .activity-description,
.o_anan_gift_flow[dir="ltr"] .detail-row .det-content{
  text-align:left;
}

.o_anan_gift_flow[dir="rtl"] .schedule-scroll{
  direction:rtl;
}

.o_anan_gift_flow[dir="ltr"] .schedule-scroll{
  direction:ltr;
}

.o_anan_gift_flow[dir="rtl"] .btn-primary .fa-arrow-left{
  transform:none;
}

.o_anan_gift_flow[dir="ltr"] .btn-primary .fa-arrow-left{
  transform:rotate(180deg);
}

/* ============ TOP BAR ============ */
.topbar{
  width:100%;max-width:480px;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px 4px;
}
.brand{display:flex;align-items:center;gap:8px}
.brand img{height:56px;width:auto;display:block}
.brand span{font-size:20px;font-weight:900;color:var(--navy)}
.lang-toggle{
  background:#fff;border:1px solid var(--border);
  border-radius:999px;padding:6px 14px;
  font-family:inherit;font-weight:700;font-size:13px;color:var(--navy);
  cursor:pointer;display:flex;align-items:center;gap:6px;
  box-shadow:0 2px 8px rgba(43,45,114,.06);
  transition:transform .15s ease;
}
.lang-toggle:hover{transform:translateY(-1px)}
.lang-toggle i{font-size:14px;color:var(--orange)}

/* ============ MAIN CARD ============ */
.gift-card{
  width:100%;max-width:480px;
  padding:0 20px 28px;
  display:flex;flex-direction:column;gap:14px;
}

/* Hook headline */
.hook{text-align:center;padding:0}
.hook .sparkle{font-size:20px;display:inline-block;animation:wiggle 2.4s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.hook h1{font-size:22px;font-weight:800;color:var(--navy);line-height:1.35;margin-top:2px}
.hook .sub{margin-top:4px;font-size:13px;color:var(--muted);font-weight:500}
.hook .sub .name{color:var(--navy);font-weight:700}

/* Activity image */
.activity-media{
  position:relative;border-radius:24px;overflow:hidden;
  box-shadow:var(--shadow);
  aspect-ratio: 16/10;
  background:#F5F0FF;
}
.activity-media img{width:100%;height:100%;object-fit:cover;display:block}

/* Activity info */
.activity-info{
  background:#fff;border-radius:20px;padding:18px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.activity-title{font-size:20px;font-weight:800;color:var(--navy);line-height:1.3}
.activity-meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  margin-top:10px;font-size:13px;color:var(--muted);font-weight:600;
}
.activity-meta span{display:inline-flex;align-items:center;gap:5px}
.activity-meta i{color:var(--orange);font-size:14px}

/* Generic content card */
.panel{
  background:#fff;border-radius:20px;padding:18px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.gift-schedule-step{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.gift-schedule-step.d-none{display:none !important}
.gift-schedule-step:not(.d-none){display:flex !important}
.panel-title{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:12px;
}
.panel-title i{color:var(--orange);font-size:16px}

/* Activity description (paragraph at top of details panel) */
.activity-description{
  font-size:14px;color:var(--ink);font-weight:500;line-height:1.65;
  padding-bottom:14px;
  margin-bottom:6px;
  border-bottom:1px solid var(--border);
}

/* Inline action button row inside panels */
.panel-actions{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:14px;
}
.panel-actions > *{flex:1 1 calc(50% - 4px);min-width:140px}

/* ============ FORM ============ */
.form-label{
  display:block;font-size:13px;font-weight:700;color:var(--navy);
  margin-bottom:6px;
}
.form-help{
  display:block;font-size:11px;font-weight:500;color:var(--muted);
  margin-top:6px;
}
.form-error{
  display:none;font-size:12px;font-weight:600;color:var(--danger);
  margin-top:6px;
}
.form-error.show{display:block}
.gift-helper{
  font-size:13px;color:var(--muted);font-weight:500;line-height:1.5;margin:0 0 14px;
}
.gift-message-space{margin-top:14px}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-row input[type="date"]{
  background:#F8F7FB;border:1.5px solid var(--border-strong);
  border-radius:14px;padding:14px 16px;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);
  width:100%;appearance:none;-webkit-appearance:none;
}
.form-row input[type="date"]:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(249,115,22,.12);background:#fff;
}

.input-group{
  display:flex;align-items:stretch;
  background:#F8F7FB;
  border:1.5px solid var(--border-strong);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
  /* phone numbers always read left-to-right, even on RTL pages */
  direction:ltr;
}
.input-group input{text-align:left}
.input-group:focus-within{
  border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(249,115,22,.12);
  background:#fff;
}
.input-prefix{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 14px;
  font-weight:700;color:var(--navy);font-size:14px;
  border-right:1px solid var(--border);
  background:rgba(43,45,114,.04);
  white-space:nowrap;
}
.input-group input{
  flex:1;border:none;outline:none;
  background:transparent;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);
  padding:14px 16px;letter-spacing:1px;
  min-width:0;
}
.input-group input::placeholder{color:#A0A2B8;font-weight:500;letter-spacing:.5px}

/* ============ BUTTONS ============ */
.btn-primary,
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;
  border:none;border-radius:14px;
  font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease;
  text-align:center;
  text-decoration:none;
}
.btn-primary{
  background:var(--gradient);color:#fff;
  box-shadow:0 10px 24px -8px rgba(249,115,22,.55);
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-primary:active{transform:translateY(0)}
.btn-primary[disabled]{
  background:#E5E5EE;color:#9A9CB0;cursor:not-allowed;
  box-shadow:none;transform:none;filter:none;
}
.btn-secondary{
  background:#fff;color:var(--navy);
  border:1.5px solid var(--border-strong);
  padding:11px 16px;font-size:13px;
}
.btn-secondary:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px)}
.btn-secondary i{font-size:15px}
.btn-block{width:100%}
.btn-icon{font-size:18px;line-height:1}

/* spinner */
.spinner{
  width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  animation:spin .7s linear infinite;display:none;
}
.btn-primary.loading .spinner{display:inline-block}
.btn-primary.loading .btn-text{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ SCHEDULE PILLS ============ */
.schedule-scroll{
  display:flex;gap:10px;overflow-x:auto;
  padding-bottom:8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling:touch;
}
.schedule-scroll::-webkit-scrollbar{height:6px}
.schedule-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px}

.schedule-card{
  flex:0 0 auto;
  min-width:170px;
  scroll-snap-align:start;
  background:#fff;
  border:1.5px solid var(--border-strong);
  border-radius:14px;
  /* extra top padding reserves space for the corner check mark
     so long Arabic text (which centers and fills the card width)
     never collides with it */
  padding:24px 14px 12px;
  cursor:pointer;
  text-align:center;
  transition:all .15s ease;
  position:relative;
}
.schedule-card .days{
  font-size:13px;font-weight:800;color:var(--navy);line-height:1.3;
}
.schedule-card .range{
  display:block;margin-top:4px;
  font-size:11px;font-weight:600;color:var(--muted);
  unicode-bidi:isolate;
}
.schedule-card:hover{border-color:var(--orange);transform:translateY(-1px)}
.schedule-card.selected{
  border-color:transparent;
  background:var(--gradient);
  box-shadow:0 10px 22px -10px rgba(249,115,22,.6);
}
.btn-check:checked + .schedule-card{
  border-color:transparent;
  background:var(--gradient);
  box-shadow:0 10px 22px -10px rgba(249,115,22,.6);
}
.schedule-card.selected .days,
.schedule-card.selected .range,
.btn-check:checked + .schedule-card .days,
.btn-check:checked + .schedule-card .range{color:#fff}
.schedule-card.selected::after{
  content:'✓';
  position:absolute;top:6px;inset-inline-end:8px;
  width:18px;height:18px;
  background:rgba(255,255,255,.28);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#fff;line-height:1;
}
.btn-check:checked + .schedule-card::after{
  content:'✓';
  position:absolute;top:6px;inset-inline-end:8px;
  width:18px;height:18px;
  background:rgba(255,255,255,.28);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#fff;line-height:1;
}
.schedule-option{flex:0 0 auto}
.empty-state{font-size:13px;color:var(--muted);font-weight:700;margin:0}
.schedule-empty-state{
  flex:1 0 100%;
  width:100%;
  min-height:112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#F8F7FB;
  border:1.5px dashed var(--border-strong);
  border-radius:14px;
  padding:18px 16px;
  text-align:center;
  color:var(--muted);
}
.schedule-empty-state i{
  width:36px;height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--orange);
  font-size:17px;
}
.schedule-empty-state p{
  margin:0;
  max-width:420px;
  color:var(--navy);
  font-size:13px;
  font-weight:800;
  line-height:1.55;
}
.time-title{margin-top:18px}

/* ============ TIME SLOT PILLS ============ */
.timeslots{
  display:flex;flex-wrap:wrap;gap:8px;
}
.timeslot{
  background:#F8F7FB;
  border:1.5px solid var(--border-strong);
  border-radius:999px;
  padding:9px 16px;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--navy);
  cursor:pointer;
  transition:all .15s ease;
}
.timeslot:hover:not([disabled]){border-color:var(--orange);color:var(--orange)}
.timeslot.selected{
  background:var(--gradient);color:#fff;border-color:transparent;
  box-shadow:0 6px 16px -6px rgba(249,115,22,.5);
}
.timeslot[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.timeslot-container .timeslot-option{display:inline-flex}
.timeslot-container .btn-check:checked + .timeslot{
  background:var(--gradient);color:#fff;border-color:transparent;
  box-shadow:0 6px 16px -6px rgba(249,115,22,.5);
}

/* seat counter sits under timeslots */
.seat-info{
  display:flex;align-items:center;gap:6px;
  margin-top:12px;font-size:12px;font-weight:600;color:var(--muted);
}
.seat-info .seat-dot{
  width:8px;height:8px;border-radius:50%;background:var(--success);display:inline-block;
}
.seat-info .seat-dot.low{background:var(--orange)}
.seat-info .seat-dot.full{background:var(--danger)}

/* ============ DETAIL ROWS ============ */
.detail-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;
  border-top:1px solid var(--border);
}
.detail-row:first-of-type{border-top:none;padding-top:0}
.detail-row .det-icon{
  width:34px;height:34px;border-radius:10px;
  background:rgba(249,115,22,.1);color:var(--orange);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;
}
.detail-row .det-content{flex:1;min-width:0}
.detail-row .det-label{
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;
}
.detail-row .det-value{
  font-size:14px;font-weight:700;color:var(--navy);
  margin-top:2px;line-height:1.5;word-break:break-word;
}

/* ============ SUCCESS HERO ============ */
.success-hero{text-align:center;padding:8px 0 0}
.success-icon{
  width:84px;height:84px;border-radius:50%;
  background:var(--gradient);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:12px;
  box-shadow:0 16px 36px -12px rgba(249,115,22,.55);
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1);
}
.success-icon svg{width:42px;height:42px;color:#fff}
.success-icon i{font-size:42px;color:#fff}
.success-hero h1{font-size:26px;font-weight:900;color:var(--navy);line-height:1.3}
.success-hero .sub{margin-top:6px;font-size:14px;color:var(--muted);font-weight:600}
@keyframes popIn{
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.1)}
  100%{transform:scale(1);opacity:1}
}

/* ============ ALERTS ============ */
.alert{
  border-radius:14px;padding:14px 16px;
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;font-weight:600;line-height:1.5;
}
.alert i{font-size:18px;flex-shrink:0;margin-top:1px}
.alert.alert-success{background:var(--success-bg);color:#065F46}
.alert.alert-success i{color:var(--success)}
.alert.alert-danger{background:var(--danger-bg);color:#991B1B}
.alert.alert-danger i{color:var(--danger)}
.alert.alert-info{background:#EEF2FF;color:#3730A3}
.alert.alert-info i{color:var(--navy)}

/* ============ GET-THE-APP block (bottom of every page) ============ */
.get-app{text-align:center}
.get-app .ga-title{
  font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px;
}
.get-app .ga-sub{
  font-size:12px;color:var(--muted);font-weight:500;margin-bottom:14px;line-height:1.5;
}
.get-app .ga-buttons{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.get-app .ga-buttons a{flex:1 1 calc(50% - 5px);min-width:140px}
.get-app svg{width:20px;height:20px;flex-shrink:0}

/* ============ FOOTER ============ */
.footer-note{text-align:center;font-size:12px;color:var(--muted);margin-top:8px}
.footer-note strong{color:var(--navy);font-weight:800}

/* ============ TABLET ============ */
@media (min-width:600px){
  .gift-card{max-width:560px;padding:8px 24px 32px;gap:16px}
  .hook h1{font-size:26px}
  .activity-title{font-size:22px}
}

/* ============ DESKTOP — split-screen ============ */
@media (min-width:960px){
  .o_anan_gift_flow{justify-content:flex-start}
  .topbar{max-width:1200px;padding:24px 48px}
  .brand img{height:80px}
  .lang-toggle{padding:8px 18px;font-size:14px}

  .gift-card{
    max-width:1200px;
    padding:8px 48px 64px;
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    column-gap:48px;
    row-gap:18px;
    align-items:start;
    grid-auto-flow:row;
  }
  /* Default: every direct child lands in the right column, in source order */
  .gift-card > * { grid-column: 2; }
  /* Image: left column, vertically centered, spans every right-column row */
  .gift-card > .activity-media{
    grid-column: 1;
    grid-row: 1 / span 100;
    align-self: center;
    border-radius: 28px;
    margin: 0;
  }
  /* Footer: full width across both columns */
  .gift-card > .footer-note{
    grid-column: 1 / -1;
    margin-top: 32px;padding-top: 24px;
    border-top:1px solid var(--border);
  }
  /* Pages without the image opt-in via .no-media on .gift-card */
  .gift-card.no-media{grid-template-columns:1fr}
  .gift-card.no-media > *{grid-column:1}
  .gift-card.no-media > .activity-media{display:none}

  .hook{text-align:start;padding:8px 0 4px}
  .hook .sparkle{font-size:26px}
  .hook h1{font-size:34px;line-height:1.25;margin-top:6px}
  .hook .sub{font-size:16px;margin-top:8px}

  .activity-title{font-size:24px}

  .success-hero{text-align:center}
  .success-hero h1{font-size:32px}
  .success-icon{width:96px;height:96px}
  .success-icon svg{width:48px;height:48px}

  /* ====== Two-column layout (.has-cols) — used by gift-verify and
     gift-schedule on desktop. ======================================
     Hook is a full-width header on top.
     Below it, two flex columns side by side that BOTH end at the same line:
       - Left  column: image (grows to fill leftover space) + (optional extras)
       - Right column: activity title + About + (optional extras) + Get-the-app
     Footer spans both columns. */
  .gift-card.has-cols{
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    column-gap:48px;
    row-gap:24px;
    align-items:stretch;          /* both columns stretch to the same height */
  }
  .gift-card.has-cols > *{ grid-column:auto; }   /* unset the default rule */
  .gift-card.has-cols > .hook       { grid-column: 1 / -1; text-align:start; }
  .gift-card.has-cols > .col-left   { grid-column: 1; }
  .gift-card.has-cols > .col-right  { grid-column: 2; }
  .gift-card.has-cols > .get-app{
    grid-column: 1 / -1;
    margin-top: 8px;
  }
  .gift-card.has-cols > .footer-note{
    grid-column: 1 / -1;
    margin-top: 16px; padding-top: 24px;
    border-top: 1px solid var(--border);
  }

  .gift-card.has-cols .col-left,
  .gift-card.has-cols .col-right{
    display:flex; flex-direction:column; gap:18px;
    min-width:0;
  }
  /* Image keeps its native 16:10 proportion so quality is preserved
     (no upscaling / cropping). Other panels fill the rest of the column. */
  .gift-card.has-cols .col-left .activity-media{
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    margin:0;
    border-radius:28px;
    overflow:hidden;
  }
  .gift-card.has-cols .col-left .activity-media img{
    width:100%; height:100%;
    object-fit:cover;
  }
}

/* ====== Mobile: collapse the wrappers so the original
   single-column source order is preserved.  `display:contents`
   removes the wrapper from layout so its children become flex
   items of `.gift-card`, which is already a flex column. */
@media (max-width: 959px){
  .gift-card.has-cols .col-left,
  .gift-card.has-cols .col-right { display:contents; }
}

/* Mobile interleaving: items in the LEFT wrapper need to be re-shuffled
   into the natural reading order hook → image → activity-info → About →
   (page-specific action panels) → get-app. */
@media (max-width: 959px){
  /* Schedule page */
  .gift-card.layout-schedule > .hook              { order:1; }
  .gift-card.layout-schedule .activity-media      { order:2; }
  .gift-card.layout-schedule .activity-info       { order:3; }
  .gift-card.layout-schedule .about-panel         { order:4; }
  .gift-card.layout-schedule #schedulePanel       { order:5; }
  .gift-card.layout-schedule #timeSlotPanel       { order:6; }
  .gift-card.layout-schedule #gift_service_selection_date { order:5; }
  .gift-card.layout-schedule .get-app             { order:7; }
  .gift-card.layout-schedule > .footer-note       { order:8; }

  /* Verify page */
  .gift-card.layout-verify > .hook                { order:1; }
  .gift-card.layout-verify .activity-media        { order:2; }
  .gift-card.layout-verify .activity-info         { order:3; }
  .gift-card.layout-verify #greetingMsg           { order:4; }
  .gift-card.layout-verify .about-panel           { order:5; }
  .gift-card.layout-verify #verifyPanel           { order:6; }
  .gift-card.layout-verify #bookingPanel          { order:6; }
  .gift-card.layout-verify #gift_service_selection_date { order:7; }
  .gift-card.layout-verify .get-app               { order:8; }
  .gift-card.layout-verify > .footer-note         { order:9; }

  /* Confirmation page — desktop swaps booking-details under title (right)
     and Get-the-app under image (left); mobile keeps natural reading order */
  .gift-card.layout-confirmation > .hook          { order:1; }
  .gift-card.layout-confirmation .activity-media  { order:2; }
  .gift-card.layout-confirmation .activity-info   { order:3; }
  .gift-card.layout-confirmation #bookingPanel    { order:4; }
  .gift-card.layout-confirmation .get-app         { order:5; }
  .gift-card.layout-confirmation > .footer-note   { order:6; }
}

/* ====== Description clamp + See more / See less ====== */
.desc-wrap{ display:block; }
.activity-description.clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.desc-toggle{
  display:none;             /* JS toggles to inline-flex if it overflows */
  align-items:center;
  background:none; border:none; padding:4px 0;
  font-family:inherit; font-weight:700; font-size:14px;
  color:var(--orange, #F97316);
  cursor:pointer;
}
.desc-toggle:hover{ text-decoration:underline; }

/* ====== Print styles for the confirmation download ====== */
@media print{
  .o_anan_gift_flow{ background:#fff !important; }
  .topbar, .lang-toggle, .get-app, .panel-actions,
  #downloadBtn, .footer-note, .desc-toggle{ display:none !important; }
  .gift-card{
    box-shadow:none !important;
    max-width:100% !important;
    padding:24px !important;
    margin:0 !important;
  }
  .activity-description.clamp-2{
    display:block !important;
    -webkit-line-clamp:unset !important;
    overflow:visible !important;
  }
  .panel{ break-inside: avoid; page-break-inside: avoid; }
  a{ color:inherit; text-decoration:none; }
}

@media (min-width:1280px){
  .hook h1{font-size:38px}
  .activity-title{font-size:26px}
}