/*
 * SUTI Festival theme for the pretix presale shop.
 * Mirrors sutifestival.com (suti-site/src/index.css): dark warm background with the
 * forest banner, glass panels, copper accents, Berimbau titles, Inter body text.
 *
 * Needs suti-base.css (tokens + fonts) and suti-components.css loaded first.
 * Loaded after pretix's own presale.css + per-event theme.css, so equal-specificity
 * rules here win. pretix is Bootstrap 3 underneath; most selectors below target
 * Bootstrap component classes, the rest pretix's own (checkout-flow, cart-row, …).
 * After a pretix upgrade: run dev/shots.py and compare with dev/shots/after.
 */

/* ---------- Page ---------- */
html { background: var(--suti-bg); }
body {
  font-family: var(--suti-font);
  color: var(--suti-text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}
/* The site's forest banner, fixed behind everything, under the same dark overlay */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background: url("img/banner.30b3b8329073.webp") center / cover no-repeat;
}
body::after {
  background:
    linear-gradient(to bottom, rgba(23, 21, 19, 0.35), rgba(23, 21, 19, 0.75) 60%, rgba(23, 21, 19, 0.9)),
    rgba(23, 21, 19, 0.35);
}
@media (max-width: 767px) {
  body::before { background-image: url("img/banner-mobile.c595f1d8af70.webp"); }
}
/* Embedded in an iframe (widget "open in popup" etc.): keep it plain and solid */
.in-iframe body { background: var(--suti-bg); }
.in-iframe body::before, .in-iframe body::after { display: none; }

/* Page titles: Berimbau, ALWAYS uppercase */
h1, .h1,
h2.content-header,
h2.subevent-head,
main > h2:not(.h3):not(.h4):not(.sr-only) {
  font-family: var(--suti-font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 3px 4px rgba(0, 0, 0, 0.8);
}
h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small,
h1 .small, h2 .small, h3 .small {
  color: var(--suti-highlight);
  font-family: var(--suti-font);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  text-shadow: none;
}
/* Event title + date: bigger, because Berimbau's thin strokes smear at small sizes */
h2.content-header { font-size: 38px; line-height: 1.15; }
h2.content-header small,
h2.content-header .small {
  font-family: var(--suti-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
  font-size: 0.72em;
  color: var(--suti-highlight);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}
@media (max-width: 767px) {
  h2.content-header { font-size: 30px; }
  h2.content-header small, h2.content-header .small { display: block; margin-top: 6px; font-size: 0.75em; }
}
/* Section titles (product categories, "Redeem a voucher", …): Berimbau caps like the site's .section-title */
h3.h3[id^="category-"],
main h2.h3 {
  font-family: var(--suti-font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 30px;
  color: #fff;
  text-shadow: 0 3px 4px rgba(0, 0, 0, 0.8);
}
/* ---------- Header ---------- */
/* Language switch / login: a glass pill like the site's nav bar */
.page-header-links > div.header-part { padding-top: 14px; }
.locales ul, .loginstatus {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 4px;
  background: var(--suti-glass-strong);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--suti-border);
  border-radius: var(--suti-radius-full);
}
.page-header-links > div.header-part a,
.locales a, .loginstatus a {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--suti-radius-full);
  color: var(--suti-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.page-header-links > div.header-part a:hover,
.locales a:hover, .loginstatus a:hover { color: #fff; background: var(--suti-glass-hover); }
.locales a.active {
  color: var(--suti-highlight);
  background: rgba(163, 110, 57, 0.22);
}
.page-header-links-outside { padding-top: 12px; }
.page-header {
  border-bottom: 0;
  margin-bottom: 0;
}
.page-header.pager-header-with-logo { background: transparent; }
.event-logo, .organizer-logo {
  border-radius: var(--suti-radius-xl);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ---------- Main box = one big glass card ---------- */
.main-box {
  background: var(--suti-glass) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--suti-border);
  border-radius: var(--suti-radius-2xl);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  margin-top: 16px;
  margin-bottom: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* The large logo sits flush on top of the card */
.page-header.pager-header-with-logo + .main-box,
header + .main-box { margin-top: 20px; }

footer, footer a, footer nav { color: var(--suti-text-dim); }
footer a:hover { color: var(--suti-highlight); }

/* ---------- Product list ---------- */
/* NB: pretix gives product rows transparent full-width borders and draws the visible,
   15px-inset dividers with ::before/::after (coloured in suti-components.css). Don't colour
   the row borders themselves, or doubled, overhanging lines appear. */
.product-row { transition: background-color 0.2s ease; }
/* Row tints are inset 15px each side so they end exactly at pretix's divider lines
   (the .row itself has -15px margins, so a plain background would overhang them) */
.product-row:hover,
.product-row.variation,
.alternating-rows .row:nth-child(even) {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(100% - 30px) 100%;
}
.product-row:hover { background-image: linear-gradient(hsla(35, 30%, 60%, 0.05), hsla(35, 30%, 60%, 0.05)); }
.alternating-rows .row:nth-child(even) { background-image: linear-gradient(hsla(35, 30%, 60%, 0.03), hsla(35, 30%, 60%, 0.03)); }
.product-row h4, .product-row .h4 { font-size: 16px; font-weight: 700; color: #fff; }
.product-row h5, .product-row .h5 { color: var(--suti-text); font-weight: 600; }
.product-row .price { color: var(--suti-highlight); font-weight: 600; font-variant-numeric: tabular-nums; }
.product-row .price .text-muted, .price small { color: var(--suti-text-dim); font-weight: 400; }
.product-row .product-description, .product-description p { color: var(--suti-text-muted); }
.product-row.variation { background-image: linear-gradient(hsla(25, 15%, 5%, 0.25), hsla(25, 15%, 5%, 0.25)); }
.product-row.variation:hover { background-image: linear-gradient(hsla(35, 30%, 60%, 0.06), hsla(35, 30%, 60%, 0.06)); }
.variations .variation h5::before,
.variation .variation-name::before { color: var(--suti-text-dim); }
.availability-box .text-muted,
.availability-left, .quota-left { color: var(--suti-text-dim); }
.availability-box.gone,
.availability-box .gone,
.availability-box.unavailable { color: var(--suti-danger); }
.availability-box.gone strong, .availability-box.unavailable strong { color: var(--suti-danger); letter-spacing: 0.06em; }
/* pretix pulls sold-out/unavailable boxes up 6px; keep them on the same line as the price */
.availability-box.gone, .availability-box.unavailable { margin-top: 0; }
.item-category > .category-description, .category-description { color: var(--suti-text-muted); }
.item-category + .item-category, section.item-category { border-color: var(--suti-border); }
.product-row .thumbnail, .productpicture img, .img-thumbnail {
  background: transparent;
  border-color: var(--suti-border);
  border-radius: var(--suti-radius-lg);
}

/* Front page info rows (location, dates) */
.info-row, .info-row-icon, .event-info { color: var(--suti-text-muted); }
.info-row .fa, .info-row-icon .fa { color: var(--suti-highlight); }
.front-page .info-row a { color: var(--suti-copper-light); }

/* ---------- Cart ---------- */
/* Cart rows */
.cart-row, .cart .row, .cart-row.row { border-color: var(--suti-border); }
.cart-row .price, .cart-row .totalprice, .cart .price { font-variant-numeric: tabular-nums; }
.cart-row .totalprice, .cart .total strong { color: var(--suti-highlight); }
.cart-row.total, .cart .total, .cart-row.total strong { color: #fff; }
.cart-row-giftcard { background: hsla(35, 30%, 60%, 0.06); }
.cart-icon-details, .cart-row dl, .cart-row dt, .cart-row dd { color: var(--suti-text-muted); }
.cart-row dt { color: var(--suti-text); font-weight: 500; }
/* The "Show full cart" fade-out on collapsed carts */
.sneak-peek-trigger {
  background: linear-gradient(0deg, hsla(25, 14%, 13%, 0.97) 44%, hsla(25, 14%, 13%, 0) 100%);
}
.cart .countdown, .cart-panel .countdown, #cart-deadline, .cart-deadline, .panel-heading .pull-right strong {
  color: var(--suti-highlight);
  font-variant-numeric: tabular-nums;
}
.cart-panel .panel-heading, #cart .panel-heading { font-weight: 700; }

/* ---------- Checkout step indicator ---------- */
.checkout-flow .checkout-step { color: var(--suti-text-dim); }
.checkout-flow .checkout-step:before,
.checkout-flow .checkout-step:after { background: hsla(35, 30%, 60%, 0.18); }
.checkout-flow .checkout-step .checkout-step-icon {
  background: var(--suti-bg-light);
  border-color: hsla(35, 30%, 60%, 0.35);
  color: var(--suti-text-dim);
}
.checkout-flow .checkout-step.step-done,
.checkout-flow .checkout-step.step-current { color: var(--suti-copper-light); }
.checkout-flow .checkout-step.step-done:before,
.checkout-flow .checkout-step.step-done:after,
.checkout-flow .checkout-step.step-current:before { background: var(--suti-copper); }
.checkout-flow .checkout-step.step-done .checkout-step-icon,
.checkout-flow .checkout-step.step-current .checkout-step-icon {
  background: var(--suti-copper);
  border-color: var(--suti-copper-light);
  color: #fff;
}
.checkout-flow .checkout-step.step-current .checkout-step-icon { box-shadow: var(--suti-glow); }
.checkout-flow .checkout-step.step-current .checkout-step-label { color: var(--suti-highlight); font-weight: 600; }

/* ---------- Order page ---------- */
/* Order status line ("Payment pending", "Paid", …) */
.order-status, .text-warning.order-status { color: var(--suti-warning); }
.progress { background: hsla(35, 30%, 60%, 0.12); border-radius: var(--suti-radius-full); box-shadow: none; }
.progress-bar { background: var(--suti-copper); }
.progress-bar-success { background: var(--suti-success); }

/* Thank-you block */
.thank-you, .thank-you h2, .thank-you .h2 { color: var(--suti-text); }
.thank-you h2, .thank-you .h2 {
  font-family: var(--suti-font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--suti-lime);
  text-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
}
.thank-you .fa-check-circle, .thank-you .big-icon, .thank-you .fa { color: var(--suti-lime); }

/* QR codes (EPC bank transfer, tickets) must stay dark-on-light to scan */
.banktransfer-swiss-cross-overlay, .qr-code, .qrcode, canvas, svg.qrcode,
[data-qrcode], .epc-qr, .banktransfer-qr, .order-qrcode, img[alt*="QR"] {
  background: #fff;
  border-radius: var(--suti-radius-md);
}
.banktransfer-qr, [data-qrcode], .qr-code, .qrcode { padding: 10px; display: inline-block; }

/* ---------- Calendars (organizer page with several events / subevents) ---------- */
.table-calendar, .week-calendar { color: var(--suti-text); }
.table-calendar th, .table-calendar td, .week-calendar .weekday { border-color: var(--suti-border); }
.table-calendar .day:nth-child(even), .week-calendar .weekday:nth-child(even) { background: hsla(35, 30%, 60%, 0.03); }
.table-calendar td.today, .week-calendar .today { background: rgba(163, 110, 57, 0.12); }
.week-calendar h3 { background: transparent; color: var(--suti-text); }
.table-calendar .event, .week-calendar .event,
.table-calendar a.event, .week-calendar a.event {
  border-radius: var(--suti-radius-md);
}
.event-list .row, .event-list > div { border-color: var(--suti-border); }

/* Customer accounts / saved profiles */
.profile-pre-select, .profile-select-container, .profile-save-container, .form-order-change-main {
  background: var(--suti-glass-soft);
  border-color: var(--suti-border);
  color: var(--suti-text);
}

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  .main-box {
    border-radius: var(--suti-radius-xl);
    margin-left: 8px;
    margin-right: 8px;
    width: auto;
  }
  .event-logo { border-radius: var(--suti-radius-lg); }
  h1, .h1 { letter-spacing: 0.05em; }
}

/* ---------- Print: plain, readable ---------- */
@media print {
  body::before, body::after { display: none !important; }
  body, .main-box, .panel { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, label, .control-label { color: #000 !important; text-shadow: none !important; }
}