/* Satyanara Ticketing, booking flow styles.
   1:1 port of the prototype's #tickets section (satyanara-prototype/index.html):
     assets/css/booking.css       → panels, steps, calendar, qty, summary, e-ticket
     assets/css/base.css          → fonts, tokens, reset, type scale, buttons
     assets/css/prototype.css     → .addon-row, .self-declare
     assets/css/visit.css         → .callout, .price-table
   Everything from base.css is scoped to .booking-shell so the plugin never
   restyles the rest of the theme. */

/* ---------- fonts ---------- */
@font-face { font-family:'Calder'; src:url('../fonts/Calder-LC.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Articulat CF'; src:url('../fonts/ArticulatCF-Normal.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Articulat CF'; src:url('../fonts/ArticulatCF-NormalOblique.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Articulat CF'; src:url('../fonts/ArticulatCF-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Articulat CF'; src:url('../fonts/ArticulatCF-MediumOblique.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Articulat CF'; src:url('../fonts/ArticulatCF-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Articulat CF'; src:url('../fonts/ArticulatCF-BoldOblique.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; }

/* ---------- tokens ---------- */
:root{
  --terrain:#655837;
  --mankind:#cdc1a2;
  --purity:#ffffff;
  --moss:#1e2d24;
  --olive:#5d6d4f;
  --clay:#976c39;
  --golden-sand:#d6af56;
  --terra-cotta:#88411e;
  --darkgrey:#3D3530;
  --midgrey:#8C8070;
  --offwhite:#F7F5F1;
  --font-display:'Calder', serif;
  --font-body:'Articulat CF', 'Helvetica Neue', Arial, sans-serif;
  --gutter:24px;
}

/* ---------- page + reset (scoped) ---------- */
.satya-tickets{background:var(--offwhite);padding:1px 0 0}
.booking-shell{max-width:760px;margin:0 auto;padding:0 var(--gutter);font-family:var(--font-body);font-weight:400;color:var(--darkgrey);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;text-align:left}
.satya-tickets,.booking-shell,.booking-shell *{box-sizing:border-box}
.booking-shell *{margin:0;padding:0}
.booking-shell img{max-width:100%;display:block}
.booking-shell a{color:inherit}

/* ---------- type scale ---------- */
.booking-shell .display{font-family:var(--font-display);font-weight:400;text-transform:lowercase;line-height:1.05;letter-spacing:-.01em}
.booking-shell h1.display{font-size:clamp(48px,7vw,96px)}
.booking-shell .h2{font-family:var(--font-body);font-weight:400;font-size:clamp(28px,3vw,36px);color:var(--terrain);line-height:1.25}
.booking-shell .caption{font-size:13px;color:var(--midgrey);letter-spacing:.02em}

/* ---------- buttons ---------- */
.booking-shell .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1;padding:14px 28px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:opacity .18s ease,background .18s ease,color .18s ease,transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s;white-space:nowrap}
.booking-shell .btn:hover{transform:translateY(-2px)}
.booking-shell .btn:active{transform:translateY(0)}
.booking-shell .btn-primary{background:var(--terrain);color:var(--purity)}
.booking-shell .btn-primary:hover{opacity:.85;color:var(--purity)}
.booking-shell .btn-outline{background:transparent;color:var(--terrain);border-color:var(--terrain)}
.booking-shell .btn-outline:hover{background:var(--terrain);color:var(--purity)}
.booking-shell .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.booking-shell .btn:focus-visible,.booking-shell a:focus-visible,.booking-shell input:focus-visible,.booking-shell select:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.booking-shell .text-link{font-weight:500;color:var(--clay);text-decoration:none;border-bottom:1px solid var(--mankind);padding-bottom:1px}
.booking-shell .text-link:hover{border-color:var(--clay)}

/* ---------- callout (visit.css) ---------- */
.booking-shell .callout{background:var(--offwhite);border:1px solid var(--mankind);border-radius:8px;padding:18px 22px;font-size:15px;margin-top:22px}
.booking-shell .self-declare{border-color:#e9dfc9;background:#fdfaf4}

/* ---------- booking shell + steps ---------- */
.steps{display:flex;gap:0;margin:36px 0 40px;counter-reset:step}
.steps li{flex:1;list-style:none;text-align:center;position:relative;font-size:12px;color:var(--midgrey);padding-top:34px}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--offwhite);border:1.5px solid var(--mankind);color:var(--midgrey);font-weight:500;font-size:12px}
.steps li::after{content:"";position:absolute;top:13px;left:calc(50% + 16px);right:calc(-50% + 16px);height:1.5px;background:var(--mankind)}
.steps li:last-child::after{display:none}
.steps li.is-active{color:var(--terrain);font-weight:500}
.steps li.is-active::before{background:var(--terrain);border-color:var(--terrain);color:var(--purity)}
.steps li.is-done::before{background:var(--olive);border-color:var(--olive);color:var(--purity);content:"✓"}
@media(max-width:640px){.steps li span{display:none}}

/* ---------- booking panel + fields ---------- */
.bk-panel{background:var(--purity);border:1px solid rgba(205,193,162,.6);padding:36px;margin-bottom:28px}
@media(max-width:640px){.bk-panel{padding:22px 18px}}
.bk-panel h2{font-family:var(--font-display);text-transform:lowercase;font-weight:400;font-size:30px;color:var(--terrain);margin-bottom:6px}
.bk-sub{color:var(--midgrey);font-size:15px;margin-bottom:34px}
/* Repeated at higher specificity on purpose. A theme stylesheet that loads
   after this one and resets p{margin:0} would otherwise win on the single
   class, and the lede would sit flush against the first field. */
.bk-panel .bk-sub{margin-bottom:34px}
@media(max-width:640px){.bk-panel .bk-sub{margin-bottom:24px}}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;font-weight:500;color:var(--terrain);margin-bottom:7px;letter-spacing:.04em}
.field label.check-line{display:flex;align-items:center;margin-bottom:0}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;padding:12px 16px;border:1px solid var(--mankind);border-radius:6px;background:var(--purity);color:var(--darkgrey)}
.field input:focus,.field select:focus{border-color:var(--terrain)}
.field .hint{font-size:12px;color:var(--midgrey);margin-top:5px}
.field.has-error input{border-color:var(--terra-cotta)}
.err-msg{font-size:12px;color:var(--terra-cotta);margin-top:5px;display:none}
.has-error .err-msg{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}

/* ---------- calendar ---------- */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head button{background:none;border:1px solid var(--mankind);border-radius:50%;width:34px;height:34px;cursor:pointer;color:var(--terrain);font-size:16px}
.cal-head button:hover{border-color:var(--terrain);background:var(--offwhite);color:var(--terrain)}
.cal-head button:focus,.cal-head button:focus-visible{outline:2px solid var(--terrain);outline-offset:2px;background:var(--offwhite);border-color:var(--terrain);color:var(--terrain)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.cal-grid .dow,.cal-grid .cal-dow{font-size:11px;color:var(--midgrey);letter-spacing:.05em;padding:4px 0}
.cal-day{border:1px solid transparent;background:var(--offwhite);border-radius:6px;padding:9px 0;font-size:14px;cursor:pointer;color:var(--darkgrey);font-family:inherit;position:relative}
.cal-day:hover:not(:disabled){background:var(--offwhite);color:var(--darkgrey);border:1px solid #000000}
.cal-day.is-selected,.cal-day.is-sel{background:var(--terrain);color:var(--purity);font-weight:700}
.cal-day:disabled,.cal-day.is-off{background:transparent;color:#cfc8bd;cursor:not-allowed;border-color:transparent}
.cal-day.is-soldout{background:transparent;color:#cfc8bd;text-decoration:line-through;cursor:not-allowed}
.cal-legend{display:flex;gap:18px;font-size:12px;color:var(--midgrey);margin-top:12px}
.avail-pill{display:inline-block;font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px;background:rgba(93,109,79,.12);color:var(--olive)}
.avail-pill.low{background:rgba(214,175,86,.18);color:#8a6d1f}
.avail-pill.out{background:rgba(136,65,30,.12);color:var(--terra-cotta)}

/* ---------- qty + stepper ---------- */
.qty-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid rgba(205,193,162,.45)}
.qty-row:last-child{border-bottom:0}
.qty-info{flex:1}
.qty-info .t{font-weight:500;color:var(--darkgrey)}
.qty-info .d{font-size:13px;color:var(--midgrey)}
.qty-price{font-size:15px;color:var(--terrain);min-width:110px;text-align:right}
.stepper{display:flex;align-items:center;border:1px solid var(--mankind);border-radius:999px;overflow:hidden}
/* Every state is written out, including !important on the two properties a
   theme is most likely to set. The theme styles button:focus and button:active
   in its own accent, which is pink: pressing plus once left the button pink
   until something else was clicked, and it read as an error state. Only hover
   and focus-visible change anything now, and only to the off-white. */
.stepper button{
  width:38px;height:38px;border:0;font-size:18px;cursor:pointer;
  font-family:inherit;
  background:var(--purity) !important;
  color:var(--terrain) !important;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
}
.stepper button:hover,
.stepper button:focus-visible{background:var(--offwhite) !important;color:var(--terrain) !important}
/* :focus without :focus-visible is the mouse click. It keeps the plain look,
   so the button returns to normal the moment the finger lifts. */
.stepper button:focus,
.stepper button:active{background:var(--purity) !important;color:var(--terrain) !important;outline:none}
.stepper button:focus-visible{outline:2px solid var(--terrain);outline-offset:-2px}
.stepper button:disabled{color:#cfc8bd !important;background:var(--purity) !important;cursor:not-allowed}
/* An input now, styled to sit like the plain number it replaced. */
.stepper .q{width:44px;text-align:center;font-weight:500;border:0;background:transparent;font-size:inherit;font-family:inherit;-moz-appearance:textfield;appearance:textfield;padding:0}
.stepper .q::-webkit-outer-spin-button,.stepper .q::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- add-ons (prototype.css) ---------- */
/* No cursor:pointer: the row is no longer one big label, the stepper inside it
   is what you click. */
.addon-row{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid rgba(205,193,162,.45)}
.addon-row span,.addon-row small{display:block}
.addon-row small{color:var(--midgrey)}
.addon-row.disabled{opacity:.55;cursor:not-allowed}

/* A place refused for want of a ticket. Collapsed until it has something to
   say, so it never leaves a gap under the list. */
.addon-limit{
  margin:0;
  max-height:0;
  overflow:hidden;
  font-size:13px;
  line-height:1.55;
  color:#7a5a1e;
  opacity:0;
  transition:max-height .18s ease, opacity .18s ease, margin .18s ease, padding .18s ease;
}
.addon-limit.is-shown{
  max-height:6em;
  opacity:1;
  margin-top:12px;
  padding:11px 13px;
  background:#fdf8ee;
  border:1px solid #f0e0c4;
}
@media (prefers-reduced-motion: reduce){
  .addon-limit{ transition:none; }
}

/* ---------- order summary ---------- */
.sum-row{display:flex;justify-content:space-between;padding:9px 0;font-size:15px}
.sum-row.total{border-top:1.5px solid var(--terrain);margin-top:10px;padding-top:14px;font-weight:700;font-size:18px;color:var(--terrain)}
.sum-row .muted{color:var(--midgrey)}
.discount{color:var(--olive)}
.bk-nav{display:flex;gap:14px;justify-content:space-between;margin-top:8px}
/* On a phone the two buttons side by side overflow the screen ("Proceed to
   payment" alone is wider than half of it). Stacked, full width, the primary
   action ends up at the bottom where the thumb already is. */
@media(max-width:640px){
  .bk-nav{ flex-wrap:wrap; }
  .bk-nav .btn{ flex:1 1 100%; }
}
.bk-sticky-total{position:sticky;bottom:0;background:var(--moss);color:var(--purity);display:flex;align-items:center;gap:16px;padding:14px 22px;margin-top:24px;border-radius:10px 10px 0 0}
.bk-sticky-total .amt{font-weight:700;font-size:20px}
.bk-sticky-total .lbl{font-size:13px;color:var(--mankind)}
.bk-sticky-total .caption{color:var(--mankind)}

/* ---------- confirmation + e-ticket ---------- */
.confirm-hero{text-align:center;padding:20px 0 8px}
.confirm-hero .ok{width:64px;height:64px;border-radius:50%;background:var(--olive);color:var(--purity);font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.ticket-card{max-width:420px;margin:30px auto;background:var(--purity);border:1px solid var(--mankind);border-radius:14px;overflow:hidden;text-align:center}
.ticket-card .tc-head{background:var(--moss);color:var(--mankind);padding:18px;display:flex;justify-content:center}
.ticket-card .tc-head img{height:26px}

/* The logo file is one flat colour on transparency, and the header it sits on
   is dark. Rather than ship a second, inverted copy that has to be redrawn
   every time the mark changes, the shape is used as a mask and the colour is
   painted behind it. The <img> inside is the fallback: where masks are not
   supported it simply shows, in its own colour. */
.tc-logo{display:block;line-height:0}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .tc-logo{
    width:190px; height:26px;
    background-color:var(--mankind);
    -webkit-mask:url(../img/logo-satyanara.png) no-repeat center/contain;
            mask:url(../img/logo-satyanara.png) no-repeat center/contain;
  }
  .tc-logo img{display:none}
}

@media print{
  /* Masks and backgrounds are the first things a printer drops, and this card
     exists to be printed. On paper the header prints white, so the logo is
     shown as the plain image in its own colour, which reads correctly there. */
  .tc-logo{width:auto;height:auto;background:none;-webkit-mask:none;mask:none}
  .tc-logo img{display:block;height:26px}
}
.ticket-card .tc-body{padding:26px}
.ticket-card .ref{font-size:13px;color:var(--midgrey);letter-spacing:.1em;text-transform:uppercase}
.ticket-card .ref b{display:block;font-size:21px;color:var(--terrain);letter-spacing:.05em;margin-top:4px}
#eticket-qr,#bs-qr{display:flex;justify-content:center;margin:22px 0}
.tc-meta{font-size:14px;color:var(--darkgrey);border-top:1px dashed var(--mankind);padding-top:18px;margin-top:4px}
.tc-meta div{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:4px 0}
.tc-meta div>span:last-child{flex:1;text-align:right}
.tc-meta .k{flex:0 0 auto;color:var(--midgrey);text-align:left}
.confirm-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.satya-kvrow{display:flex;justify-content:space-between;gap:20px;padding:9px 0;font-size:15px;border-bottom:1px solid rgba(205,193,162,.45)}
.satya-kvrow .k{color:var(--midgrey)}
.satya-kvrow>span:last-child{text-align:right}
.satya-kvrow>span:last-child div{text-align:right}
.spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.35);border-top-color:var(--purity);border-radius:50%;animation:satya-spin .7s linear infinite;display:inline-block;vertical-align:middle}
@keyframes satya-spin{to{transform:rotate(360deg)}}
.alert-error{background:rgba(136,65,30,.08);border:1px solid var(--terra-cotta);color:var(--terra-cotta);padding:14px 18px;border-radius:8px;font-size:14px;margin-bottom:18px;display:none}
.alert-error.is-visible{display:block}
@media print{body *{visibility:hidden}.ticket-card,.ticket-card *{visibility:visible}.ticket-card{position:absolute;left:50%;top:20px;transform:translateX(-50%)}}

/* ---------- booking mode switcher ---------- */
.bk-mode{display:inline-flex;gap:4px;margin:20px auto 0;padding:4px;background:var(--purity);border:1px solid var(--mankind);border-radius:999px}
.bk-mode-btn{font:inherit;font-size:14px;font-weight:700;padding:9px 22px;border:0;background:transparent;color:var(--midgrey);border-radius:999px;cursor:pointer;transition:background .2s,color .2s}.bk-mode-btn:hover{background:transparent!important;color:var(--midgrey)!important}.bk-mode-btn.is-active:hover{background:var(--terrain)!important;color:var(--purity)!important}
.bk-mode-btn.is-active{background:var(--terrain);color:var(--purity)}

/* ---------- group booking ---------- */
.gtype-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gtype{font:inherit;font-size:15px;font-weight:500;text-align:left;padding:16px 18px;border:1.5px solid var(--mankind);border-radius:10px;background:var(--purity);color:var(--darkgrey);cursor:pointer;transition:border-color .2s,background .2s}
.gtype:hover{border:1px solid #8C8070!important;background:transparent!important;color:#3D3530!important}
.gtype.is-active{border-color:var(--terrain);background:var(--offwhite);box-shadow:inset 0 0 0 1px var(--terrain);color:var(--darkgrey)}
.check-line{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;line-height:1.5}
.check-line input{width:18px;height:18px;accent-color:var(--terrain);flex:none}
.check-line span{padding-top:3px}
@media(max-width:520px){.gtype-grid{grid-template-columns:1fr}}

/* ---------- price table (visit.css) ---------- */
.price-table{width:100%;border-collapse:collapse;font-size:16px}
.price-table td,.price-table th{padding:13px 4px;border-bottom:1px solid rgba(205,193,162,.5);text-align:left}
.price-table th{font-weight:500;color:var(--terrain);font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* ---------------------------------------------- add-ons and vouchers */

.booking-shell .field > .hint{
  font-size:14px;
  color:var(--midgrey);
  margin:2px 0 12px;
  line-height:1.55;
}

/* Rows read as a list of offers, with the price pulled to the right. */
.addon-row{
  align-items:flex-start;
  padding:16px 14px;
  border:1px solid rgba(205,193,162,.55);
  border-radius:10px;
  margin-bottom:10px;
  background:#fff;
  transition:border-color .15s ease, background .15s ease;
}
.addon-row:last-child{ margin-bottom:0; }
.addon-row:hover{ border-color:var(--terrain); background:#fdfcfa; }
/* Highlighted when the quantity is not zero.
   A class, not :has([value]): the value attribute keeps whatever was rendered,
   while typing and the +/- buttons only change the live .value property, so an
   attribute selector would highlight the wrong rows. JS sets .is-picked. */
.addon-row.is-picked{ border-color:var(--terrain); background:#faf8f3; }
/* The description takes the space; the stepper keeps its own width and stays
   centred against the row rather than pinned to the top. */
.addon-row > span:first-child{ flex:1; min-width:0; }
.addon-row > .stepper{ flex:none; align-self:center; }
.addon-row strong{
  display:block;
  font-size:16px;
  line-height:1.35;
  margin-bottom:4px;
  color:var(--terrain);
}
.addon-row small{
  font-size:13.5px;
  line-height:1.5;
  color:var(--midgrey);
}
.addon-row .addon-price{
  display:block;
  font-weight:700;
  color:var(--darkgrey);
  margin-top:4px;
}
.addon-row .addon-worth{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:99px;
  background:#f3efe6;
  color:var(--clay,#976c39);
  font-size:12px;
  font-weight:700;
}

/* ------------------------------------------------------- responsive */

@media (max-width:640px){
  .booking-shell{ padding-left:16px; padding-right:16px; }
  .booking-shell .callout{ padding:14px 16px; font-size:14px; }
  .addon-row{ padding:14px 12px; }
  .addon-row strong{ font-size:15px; }
  .sum-row.total{ font-size:16px; }
}

/* Breathing room so the checkout does not sit flush against the theme header. */
.booking-shell{ padding-top:48px; padding-bottom:64px; }
@media (max-width:640px){ .booking-shell{ padding-top:28px; padding-bottom:44px; } }

/* ==========================================================================
   Theme guards.
   The tickets page inherits link colours from whatever theme is active, and
   a default hover, often red, shows through on anchors and buttons we style
   ourselves. These rules pin the brand colours so nothing else can repaint
   them. Kept narrow: only inside .booking-shell.
   ========================================================================== */

.booking-shell a,
.booking-shell a:link,
.booking-shell a:visited{
  color:var(--terrain);
  text-decoration:none;
}
.booking-shell a:hover,
.booking-shell a:focus,
.booking-shell a:active{
  color:var(--clay);
  text-decoration:none;
}

.booking-shell .btn,
.booking-shell .btn:link,
.booking-shell .btn:visited{ text-decoration:none; }

.booking-shell .btn-primary,
.booking-shell .btn-primary:link,
.booking-shell .btn-primary:visited,
.booking-shell .btn-primary:hover,
.booking-shell .btn-primary:focus,
.booking-shell .btn-primary:active{
  background:var(--terrain);
  color:var(--purity);
  border-color:var(--terrain);
}
.booking-shell .btn-primary:hover{ opacity:.85; }

.booking-shell .btn-outline:hover,
.booking-shell .btn-outline:focus,
.booking-shell .btn-outline:active{
  background:var(--terrain);
  color:var(--purity);
  border-color:var(--terrain);
}

.booking-shell .text-link:hover,
.booking-shell .text-link:focus{ color:var(--clay); }

/* Calendar days: a soft brand outline rather than a hard black box. */
.booking-shell .cal-day:hover:not(:disabled){
  background:var(--offwhite);
  color:var(--darkgrey);
  border:1px solid var(--terrain);
}
.booking-shell .cal-day:focus-visible{
  outline:2px solid var(--terrain);
  outline-offset:2px;
}

/* Checkbox and radio rows must not pick up a theme hover colour either. */
.booking-shell .addon-row:hover,
.booking-shell .check-line:hover,
.booking-shell label:hover{ color:inherit; }

/* Same guard on the checkout, including the sticky hover on touch screens. */
.booking-shell a,
.booking-shell button,
.booking-shell .addon-row{ -webkit-tap-highlight-color:transparent; }

@media (hover:none){
  .booking-shell .addon-row:hover{ border-color:rgba(205,193,162,.55); background:#fff; }
  .booking-shell .btn-outline:hover{ background:transparent; color:var(--terrain); }
  .booking-shell .cal-day:hover:not(:disabled){ background:var(--offwhite); border-color:transparent; }
  .booking-shell .gtype:hover{ border-color:var(--mankind); }
}

/* Soft edges on the checkout, matching the public pages. */
.booking-shell .callout,
.booking-shell .addon-row,
.booking-shell .summary,
.booking-shell .alert-error{ border-radius:14px; }
.booking-shell .cal-day{ border-radius:10px; }
.booking-shell .gtype{ border-radius:12px; }
.booking-shell input[type=text],
.booking-shell input[type=email],
.booking-shell input[type=tel],
.booking-shell input[type=number],
.booking-shell select,
.booking-shell textarea{ border-radius:10px; }
@media(max-width:560px){
  .booking-shell .callout,
  .booking-shell .addon-row{ border-radius:12px; }
}


/* ==========================================================================
   Mobile pass (items 57 to 58).
   ========================================================================== */
@media (max-width: 640px) {
  /* 57: the title sat flush against the theme header on a phone. */
  .satya-tickets .booking-shell > div:first-child { padding-top: 28px !important; }
  .satya-tickets h1.display { padding: 0 16px; line-height: 1.12; }

  /* 58: the summary reads as a receipt on a phone: each row gets air, long
     programme names wrap without shoving the amount off screen, and the
     grand total is ruled off from the rows above it. */
  .booking-shell .sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
  .booking-shell .sum-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .booking-shell .sum-row > span:last-child { white-space: nowrap; }
  .booking-shell .sum-row.total { border-top: 1px solid rgba(0,0,0,.14); margin-top: 6px; padding-top: 12px; font-size: 18px; }
  .bk-sticky-total .amt { font-size: 22px; }
}


/* Feedback 14: phone-size touch targets. The steppers were 38px and the
   category column got squeezed; at the door that means mis-taps. */
@media(max-width:640px){
  .stepper button{ width:44px; height:44px; font-size:20px; }
  .stepper .q{ width:52px; font-size:17px; }
  /* Category column first-class: full width on its own line, price and
     stepper beneath, so long names like "Wisatawan mancanegara" stop
     squeezing the controls. */
  .qty-row{ flex-wrap:wrap; gap:8px 12px; }
  .qty-info{ flex:1 1 100%; }
  .qty-info .t{ font-size:16px; }
  .qty-price{ margin-right:auto; }
}

/* --------------------------------------------------------------------------
   Pressed-state colour, everywhere on the booking form.

   Same cause as the stepper: the theme paints button:focus and button:active
   in its accent, so any button kept that tint after a tap. This covers the
   group-type tiles and the calendar cells too, which are buttons as well.
   -------------------------------------------------------------------------- */

.gtype:focus,
.gtype:active{ background:var(--purity); color:var(--darkgrey); outline:none; }
.gtype.is-active:focus,
.gtype.is-active:active{ background:var(--offwhite); color:var(--darkgrey); }
.gtype:focus-visible{ outline:2px solid var(--terrain); outline-offset:2px; }
.gtype{ -webkit-tap-highlight-color:transparent; }

.cal-grid button{ -webkit-tap-highlight-color:transparent; }
.cal-grid button:focus{ outline:none; }
.cal-grid button:focus-visible{ outline:2px solid var(--terrain); outline-offset:-2px; }

/* The line shown when the chosen date carries no programme at all. Not an
   error, so it is not red: the visitor can still buy entry tickets. */
.addon-none{
  margin:0 0 12px;
  padding:12px 14px;
  background:var(--offwhite);
  border-left:3px solid var(--mankind);
  font-size:13.5px;
  line-height:1.55;
  color:var(--darkgrey);
}
.addon-none strong{ display:block; color:var(--terrain); margin-bottom:2px; }

/* --------------------------------------------------------------------------
   Load more, and the rows that cannot be picked.

   The programme block now lists every programme, not only the ones the chosen
   date can sell, so it needs a fold. A rule with a word set into it, rather
   than a solid button: on this step the only control that must be pressed is
   Continue, and a second filled button beside it would compete.
   -------------------------------------------------------------------------- */

.addon-more{
  display:flex; align-items:center; gap:14px;
  width:100%; margin:14px 0 0; padding:6px 0;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--terrain);
  -webkit-tap-highlight-color:transparent;
}
/* The rules are drawn, not typed. Written as dashes they would break at a
   different place on every screen width. */
.addon-more::before,
.addon-more::after{
  content:""; flex:1 1 auto; height:1px; background:var(--mankind); opacity:.55;
}
/* display:flex beat the hidden attribute, so the line showed even when there
   was nothing left to load. An attribute that means "not here" has to win. */
.addon-more[hidden]{ display:none !important; }

/* Same pressed-state problem as the steppers: with no :focus or :active rule
   of its own, the theme painted this in its accent after a tap and the colour
   stayed. Every state is written out, and only hover moves. */
.addon-more,
.addon-more:focus,
.addon-more:active,
.addon-more:visited{ color:var(--terrain) !important; background:none !important; }
.addon-more:hover,
.addon-more:focus-visible{ color:var(--darkgrey) !important; }
.addon-more:hover::before,
.addon-more:hover::after{ opacity:.9; }
.addon-more:focus{ outline:none; }
.addon-more:focus-visible{ outline:2px solid var(--terrain); outline-offset:3px; }

/* Why a row is grey, said in the row. Greyed out on its own invites the
   visitor to keep clicking it. */
.addon-flag{
  align-self:center; flex:0 0 auto;
  font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mankind); white-space:nowrap;
}
.addon-row.disabled .addon-worth{ color:var(--mankind); }

@media(max-width:520px){
  /* The badge repeats what the price line already says on a narrow screen,
     where it would wrap onto its own line and look like a second control. */
  .addon-flag{ display:none; }
}
/* A row that cannot be picked should not light up under the cursor. */
.addon-row.disabled:hover{ border-color:rgba(205,193,162,.45); background:transparent; }