/* =========================================================================
   WOOP! 2026 redesign — shared design system (colors, typography, elements)
   Source: Figma "Shop-jul2026" (colors, typography, elements frames)
   This file is loaded on every page (injected by js/allpage.js) so the
   header/footer and any redesigned page share the same look & feel.
   ========================================================================= */

:root{
  --woop-black:#000000;
  --woop-white:#ffffff;
  --woop-blue:#00ccff;
  --woop-pink:#fc00a6;
  --woop-yellow:#ffd400;
  --woop-grey-1:#fafafa;
  --woop-grey-2:#dedede;
  --woop-grey-3:#262626;
  --woop-outline:#4f4f4f;

  --woop-font-head:'Herokid','Oswald',Impact,sans-serif;
  --woop-font-body:'Inter','Montserrat',Arial,sans-serif;
}

@font-face{
  font-family:'Herokid';
  src:url('fonts/Herokid-BoldNarrow.woff2') format('woff2'),
      url('fonts/Herokid-BoldNarrow.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-Italic.ttf') format('truetype');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

/* 2026 redesign drops the legacy full-page background image and swaps the
   legacy Montserrat body font for Inter (main.css's `body{font-family:
   "Montserrat"}` still wins by source order otherwise, since most text
   nodes have no dedicated .woop-* typography class to override it) */
body{ background:none !important; font-family:var(--woop-font-body); }

/* ---------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------- */
.woop-h1, .woop-h2, .woop-h3, .woop-h4{
  font-family:var(--woop-font-head);
  font-weight:700;
  text-transform:uppercase;
  color:var(--woop-black);
  margin:0;
}
.woop-h1{ font-size:40px; line-height:45px; }
.woop-h2{ font-size:35px; line-height:40px; }
.woop-h3{ font-size:25px; line-height:32px; }
.woop-h4{ font-size:20px; line-height:32px; }

.woop-body-lg{ font-family:var(--woop-font-body); font-size:16px; line-height:24px; color:var(--woop-black); }
.woop-body-bold{ font-family:var(--woop-font-body); font-weight:700; font-size:16px; line-height:24px; color:var(--woop-black); }
.woop-legal{ font-family:var(--woop-font-body); font-size:14px; line-height:18px; color:var(--woop-black); }
.woop-legal-sm{ font-family:var(--woop-font-body); font-size:12px; line-height:15px; color:var(--woop-black); }

@media (max-width:767.98px){
  .woop-h1{ font-size:32px; line-height:36px; }
  .woop-h2{ font-size:26px; line-height:30px; }
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn-woop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:var(--woop-font-body);
  font-weight:500;
  font-size:14px;
  line-height:18px;
  padding:9px 18px;
  border-radius:0;
  border:2px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-woop:focus{ outline:none; box-shadow:none; }

.btn-woop-yellow{ background:var(--woop-yellow); border-color:var(--woop-yellow); color:var(--woop-black); }
.btn-woop-yellow:hover{ background:var(--woop-black); border-color:var(--woop-black); color:var(--woop-white); }
.btn-woop-yellow:active{ background:var(--woop-black); border-color:var(--woop-black); color:var(--woop-white); }
.btn-woop-yellow.disabled,.btn-woop-yellow:disabled{ background:var(--woop-grey-2); border-color:var(--woop-grey-2); color:var(--woop-outline); pointer-events:none; }

.btn-woop-pink{ background:var(--woop-pink); border-color:var(--woop-pink); color:var(--woop-white); }
.btn-woop-pink:hover{ background:var(--woop-black); border-color:var(--woop-black); color:var(--woop-white); }

.btn-woop-outline{ background:transparent; border-color:var(--woop-white); color:var(--woop-white); }
.btn-woop-outline:hover{ background:var(--woop-white); color:var(--woop-black); }

.btn-woop-outline-black{ background:transparent; border-color:var(--woop-black); color:var(--woop-black); }
.btn-woop-outline-black:hover{ background:var(--woop-black); color:var(--woop-white); }

.btn-woop-blue{ background:var(--woop-blue); border-color:var(--woop-blue); color:var(--woop-white); }
.btn-woop-blue:hover{ background:var(--woop-black); border-color:var(--woop-black); color:var(--woop-white); }

.btn-woop-block{ width:100%; }

/* Mobile fixed bottom payment bar (cart.html, markup injected by js/cart.js
   when screen.width<600) — matches Figma node 1664:9771/9772: dark bar
   background behind the flat pink "Dodaj aktivnost" / yellow "Nadaljuj na
   plačilo" buttons. */
.woop-mobile-paybar{
  background:var(--woop-grey-3);
  margin:0;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  z-index:1030;
}
.woop-mobile-paybar .btn-woop{ margin:0; }

/* Close (X) icon for the login modal (cart.html #loginModal) */
.woop-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  background:transparent;
  border:0;
  font-size:20px;
  line-height:1;
  color:var(--woop-black);
  cursor:pointer;
  z-index:1;
}
.woop-modal-close:hover{ color:var(--woop-pink); }

/* ---------------------------------------------------------------------
   Header / Footer chrome
   --------------------------------------------------------------------- */
.site-header-2026{ background:var(--woop-black); }
.site-header-2026 .header-topbar{
  background:var(--woop-grey-3);
  color:var(--woop-white);
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  padding:6px 0;
}
.site-header-2026 .header-topbar a{ color:var(--woop-white); }
.site-header-2026 .header-location span{ margin:0 6px; opacity:.6; }
.site-header-2026 .header-flags img{ width:22px; height:auto; margin-left:8px; border-radius:2px; }

.site-header-2026 .header-main{ padding:16px 0; }
.site-header-2026 .header-logo img{ width:100px; height:auto; }

.site-header-2026 .header-actions{ display:flex; align-items:center; gap:20px; }
.site-header-2026 .header-actions a{ color:var(--woop-white); text-decoration:none; font-family:var(--woop-font-body); font-size:16px; display:inline-flex; align-items:center; gap:6px; }
.site-header-2026 .header-actions a:not(.btn-woop):hover{ color:var(--woop-blue); }
.site-header-2026 .header-actions a.btn-woop-outline:hover{ color:var(--woop-black); }
.site-header-2026 .header-actions .badge-cart{ background:var(--woop-pink); color:var(--woop-white); border-radius:50%; font-size:11px; padding:1px 6px; margin-left:2px; }

@media (max-width:991.98px){
  .site-header-2026 .header-actions a span.txt{ display:none; }
  .site-header-2026 .header-actions{ gap:14px; }
}

.site-footer-2026{ background:var(--woop-black); padding:22px 0; position:relative; }
.site-footer-2026 p{ color:var(--woop-white); font-family:var(--woop-font-body); font-size:16px; line-height:18px; text-align:center; margin:0; }
.site-footer-2026 .footer-mascot{
  position:absolute;
  right:6%;
  bottom:100%;
  transform:translateY(14px);
  height:110px;
  width:auto;
  pointer-events:none;
}
@media (max-width:767.98px){
  .site-footer-2026 .footer-mascot{ height:64px; right:8%; transform:translateY(9px); }
}

/* ---------------------------------------------------------------------
   Attraction / event cards
   --------------------------------------------------------------------- */
.woop-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
@media (min-width:992px){ .woop-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ .woop-grid{ grid-template-columns:repeat(4,1fr); } }

.woop-card{
  background:var(--woop-white);
  border-radius:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
}
.woop-card .woop-card-img{ width:100%; aspect-ratio:168/95; object-fit:cover; display:block; }
.woop-card .woop-card-body{
  background:var(--woop-blue);
  padding:14px 16px 18px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.woop-card .woop-card-title{ font-family:var(--woop-font-head); font-weight:700; font-size:20px; line-height:32px; text-transform:uppercase; color:var(--woop-black); margin:0; }
.woop-card .woop-card-title .badge-new{ color:var(--woop-black); font-weight:900; font-size:13px; text-transform:uppercase; }
.woop-card .btn-woop{ align-self:flex-start; margin-top:auto; }

@media (max-width:767.98px){
  .woop-card .woop-card-body{ padding:10px 12px 14px; gap:6px; }
  .woop-card .woop-card-title{ font-size:16px; line-height:24px; }
}

/* Descriptions are hidden in every panel (attraction and event cards alike) */
.woop-card-text{ display:none; }

/* ---------------------------------------------------------------------
   Shop product cards (shop.html) - product photo is 4:3, not 16:9, and
   cards show a price line above the "Nakup" button.
   --------------------------------------------------------------------- */
.SHOP .woop-card .woop-card-img{ aspect-ratio:4/3; background:var(--woop-blue); }
.woop-card .woop-card-price{ font-family:var(--woop-font-body); font-size:16px; line-height:18px; color:var(--woop-black); margin:0; }
/* Figma (node 1664:9900): card body under the photo is white with a blue
   border wrapping it (no border on the top edge, flush against the photo);
   only the photo itself sits on a blue background (shows through if the
   product image has transparency) - the shared .woop-card-body{blue} rule
   is for attraction/event cards elsewhere, not shop product cards. */
.SHOP .woop-card .woop-card-body{ background:var(--woop-white); border:2px solid var(--woop-blue); border-top:none; }
.SHOP .woop-card .woop-card-title{ font-size:25px; line-height:32px; }
@media (max-width:767.98px){
  .SHOP .woop-card .woop-card-title{ font-size:20px; line-height:26px; }
}

/* mainpast.css's legacy .bottomRibbon is blue - Figma shows white here. */
.SHOP .bottomRibbon{ background:var(--woop-white); }

/* css/mainpast.css (only loaded on shop.html/shopitem.html) has an
   `a, a:link, a:visited{background-color:transparent}` rule whose matched
   `a:link`/`a:visited` selector out-specifies a plain `.btn-woop-yellow`
   class on anchor buttons (extra type selector ties the class-count tier,
   then wins on the type tier) - override with an equally-specific compound
   selector so the "Nakup" buttons render solid yellow, not transparent. */
.SHOP a.btn-woop-yellow{ background:var(--woop-yellow); border-color:var(--woop-yellow); color:var(--woop-black); }
.SHOP a.btn-woop-yellow:hover{ background:var(--woop-black); border-color:var(--woop-black); color:var(--woop-white); }

/* Static promo banners between shop groups - client supplies the real
   image later, this is just an empty placeholder slot until then. */
.woop-shop-banner{
  width:100%;
  aspect-ratio:1300/300;
  background:var(--woop-grey-1);
  border:1px dashed var(--woop-grey-2);
}
.woop-shop-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Mobile banner image (PAT_shop_banner_mobile.jpg etc) is a 360x360 square,
   not a scaled-down copy of the wide desktop banner - the wrapper's
   aspect-ratio must switch too, or object-fit:cover just crops the square
   mobile image into the wide desktop box instead of showing it properly. */
@media (max-width:767px){
  .woop-shop-banner{ aspect-ratio:1/1; }
}

/* Events grid: reuse the exact same column widths as the attraction grid
   above (not a separate fixed-width track) so a lone event card matches
   the attraction cards' size instead of stretching wider/narrower. */
.woop-grid-events{ justify-content:start; }

.woop-event-card{
  background:var(--woop-white);
  border-radius:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.woop-event-card .woop-card-img{ width:100%; aspect-ratio:333/159; object-fit:cover; display:block; }
.woop-event-card .woop-card-body{
  background:var(--woop-blue);
  padding:16px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.woop-event-card .woop-card-title{ font-family:var(--woop-font-head); font-weight:700; font-size:20px; line-height:32px; text-transform:uppercase; color:var(--woop-black); margin:0; }
.woop-event-card .woop-card-text{ font-family:var(--woop-font-body); font-size:16px; line-height:18px; color:var(--woop-black); margin:0; }
.woop-event-card .btn-woop{ align-self:flex-start; }

/* ---------------------------------------------------------------------
   Extra buttons (reservation flow)
   --------------------------------------------------------------------- */
.btn-woop-outline-pink{ background:transparent; border-color:var(--woop-pink); color:var(--woop-pink); }
.btn-woop-outline-pink:hover{ background:var(--woop-pink); color:var(--woop-white); }

.btn-woop-black{ background:var(--woop-black); border-color:var(--woop-black); color:var(--woop-white); }
.btn-woop-black:hover{ background:var(--woop-grey-3); border-color:var(--woop-grey-3); color:var(--woop-white); }

/* Figma buttons (Nazaj/Naprej) are plain squared rectangles, no rounding */
.btn-woop-square{ border-radius:0; padding:6px 23px; }

/* ---------------------------------------------------------------------
   Reservation flow (breadcrumb steps, age/ticket steppers, cart panel)
   Shared across all ticket*.html pages via BreadCrumbs()/RefreshAgeList()
   in js/allpage.js and the per-page ticket-list renderers.
   --------------------------------------------------------------------- */
.woop-steps{
  list-style:none;
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  margin:0;
  padding:0;
  border:2px solid var(--woop-pink);
  border-radius:0;
  overflow:hidden;
  counter-reset:woopstep;
}
.woop-step{
  counter-increment:woopstep;
  position:relative;
  flex:1 1 0;
  text-align:center;
  font-family:var(--woop-font-body);
  font-size:16px;
  line-height:18px;
  padding:9px 12px;
  color:var(--woop-black);
  white-space:nowrap;
}
.woop-steps > .woop-step::before{ content:counter(woopstep) ". "; }

/* Current step: solid pink chevron/arrow shape (flat trailing edge, pointed
   leading edge) drawn behind the text via ::after, matching Figma node 1663:5912 */
.woop-step.is-current{ color:var(--woop-white); font-weight:700; }
.woop-step.is-current::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--woop-pink);
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}
.woop-step.is-current:not(:first-child)::after{
  clip-path:polygon(16px 50%, 0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}
.woop-step.is-current:last-child::after{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.woop-step.is-current:not(:first-child):last-child::after{
  clip-path:polygon(16px 50%, 0 0, 100% 0, 100% 100%, 0 100%);
}

.woop-ticket-panel{ background:var(--woop-white); border:2px solid var(--woop-pink); border-radius:0; }

/* ticketer.html room-select grid (#content-desktop/#content-mobile) —
   pink row dividers + vertical column divider, white card background,
   matches Figma "Katere vstopnice želite?" room-select box */
.SELECT-TICKETS-TWO .woop-ticket-panel .single-selection .form-check, .TERM .woop-ticket-panel .single-selection .form-check{ background:var(--woop-white); }
.SELECT-TICKETS-TWO .woop-ticket-panel .border-bottom-lg, .TERM .woop-ticket-panel .border-bottom-lg{ border-bottom:2px solid var(--woop-pink) !important; }
.SELECT-TICKETS-TWO .woop-ticket-panel .single-selection.border-bottom, .TERM .woop-ticket-panel .single-selection.border-bottom{ border-bottom:2px solid var(--woop-pink) !important; }
@media (min-width:768px){
  /* single unbroken line spanning the whole grid height, instead of a
     per-row border-right (which leaves visible gaps where row heights differ) */
  .SELECT-TICKETS-TWO .woop-ticket-panel #content-desktop,
  .TERM .woop-ticket-panel#selectticket,
  .TERM .woop-ticket-panel#selectticketcard{ position:relative; }
  .SELECT-TICKETS-TWO .woop-ticket-panel #content-desktop::after,
  .TERM .woop-ticket-panel#selectticket::after,
  .TERM .woop-ticket-panel#selectticketcard::after{
    content:''; position:absolute; top:0; bottom:0; left:50%;
    width:2px; background:var(--woop-pink); pointer-events:none;
  }
}

.woop-cart-panel{ background:var(--woop-yellow); border-radius:0; padding:20px; }
/* row dividers (.border-top) default to a barely-visible grey on the yellow panel */
.woop-cart-panel .border-top{ border-top-color:var(--woop-black) !important; }
.woop-cart-panel h6, .woop-cart-panel #idbKosaricaPrazna{
  font-family:var(--woop-font-head);
  font-weight:700;
  font-size:20px;
  line-height:32px;
  text-transform:uppercase;
  color:var(--woop-black);
}

.woop-input{ border:2px solid var(--woop-black) !important; border-radius:0; background:var(--woop-white) !important; font-family:var(--woop-font-body); font-weight:400; color:var(--woop-black); }
.woop-input::placeholder{ font-family:var(--woop-font-body); font-style:italic; font-weight:400; color:var(--woop-black); opacity:1; }

/* Age / ticket quantity steppers share the ".common"/".plus"/".minus"/".count" markup */
.common .plus i, .common .minus i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border:none;
  border-radius:50%;
  background:var(--woop-pink);
  color:var(--woop-white);
  padding:0;
  font-size:10px;
}
.common .disable{
  border:none !important;
  background:var(--woop-grey-2) !important;
  color:var(--woop-white) !important;
}
.common input.count{ font-family:var(--woop-font-body); font-size:16px; }

.single-option{ border-color:var(--woop-grey-2) !important; }
/* Cancel the panel's own padding so the pink divider (border-bottom) reaches the panel's left/right border instead of stopping at the padded content edge */
.purchase-option{
  border-color:var(--woop-pink) !important; border-bottom-width:2px !important;
  margin-left:-1rem; margin-right:-1rem; padding-left:1rem !important; padding-right:1rem !important;
}
/* Last group's own separator line would sit right next to the panel's own bottom border, looking like a duplicate line */
.purchase-option:last-child{ border-bottom:none !important; }
/* Product "TopText" pink highlight (e.g. "TOP IZBIRA") appended after the ticket name */
.woop-top-badge{ color:var(--woop-pink); font-weight:700; }
.woop-top-sep{ color:var(--woop-pink); font-weight:700; }
@media (max-width:767px){
  /* On mobile the badge drops to its own line with pink up-arrow icons framing the text instead of the inline " - " separator */
  .woop-top-sep{ display:none; }
  .woop-top-badge{
    display:flex; align-items:center; justify-content:flex-start; gap:6px;
    margin-top:2px;
  }
  .woop-top-badge::before, .woop-top-badge::after{
    content:"\f062"; font-family:"Font Awesome 5 Free"; font-weight:900; color:var(--woop-pink); font-size:11px;
  }
}
@media (min-width:768px){
  .purchase-option{ margin-left:-1.5rem; margin-right:-1.5rem; padding-left:1.5rem !important; padding-right:1.5rem !important; }
}
.arrow a.text-dark{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--woop-pink); color:var(--woop-white) !important;
}
.arrow a.text-dark i{ font-size:12px; transition:transform .2s; }
.arrow.open a.text-dark{ background:var(--woop-black); }
.arrow.open a.text-dark i{ transform:rotate(180deg); }
.purchase-option .some{ padding-bottom:10px; margin-bottom:8px; }
.purchase-option .some.open{ border-bottom:2px solid var(--woop-black); }
/* Ticket rows have an empty spacer col before the product name that pushes it off the left edge — drop it so rows align with the group title above (Bootstrap's .d-md-block responsive utility is !important, so this override must be too) */
.purchase-option .col-1{ display:none !important; }
/* Without the spacer col, "justify-content-around" would still add leading space before the name — force rows flush left and pin the qty stepper to the right edge instead */
.purchase-option .row{ justify-content:flex-start !important; }
.purchase-option .row > .common{ margin-left:auto; }
.purchase-option .row > .col-6{ padding-left:0; }

/* ---------------------------------------------------------------------
   Shop item page (shopitem.html) — Figma node 1664:10210
   --------------------------------------------------------------------- */
.SHOP-ITEM .woop-item-image{
  background:var(--woop-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  aspect-ratio:611/458;
}
.SHOP-ITEM .woop-item-image img{ width:100%; height:100%; object-fit:contain; }

.SHOP-ITEM .woop-item-price{ font-family:var(--woop-font-body); font-size:25px; line-height:32px; color:var(--woop-black); }
.SHOP-ITEM .woop-item-label{ font-family:var(--woop-font-body); font-size:16px; line-height:18px; color:var(--woop-black); }

/* #itemDesc is raw CMS-supplied HTML (headings/paragraphs/lists) — style the
   tags directly since the markup itself carries no woop-* classes */
.SHOP-ITEM #itemDesc h1, .SHOP-ITEM #itemDesc h2, .SHOP-ITEM #itemDesc h3, .SHOP-ITEM #itemDesc h4{
  font-family:var(--woop-font-head); font-weight:700; font-size:25px; line-height:32px;
  text-transform:uppercase; color:var(--woop-black); margin:24px 0 12px;
}
.SHOP-ITEM #itemDesc h1:first-child, .SHOP-ITEM #itemDesc h2:first-child, .SHOP-ITEM #itemDesc h3:first-child{ margin-top:0; }
.SHOP-ITEM #itemDesc p, .SHOP-ITEM #itemDesc li{ font-family:var(--woop-font-body); font-size:16px; line-height:18px; color:var(--woop-black); }
.SHOP-ITEM #itemDesc ul, .SHOP-ITEM #itemDesc ol{ padding-left:20px; margin:0 0 12px; }

/* "Izberi artikel" size dropdown — squared 2px black border, matches .woop-input */
.SHOP-ITEM .woop-select-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:180px; max-width:100%;
  background:var(--woop-white); border:2px solid var(--woop-black); border-radius:0;
  font-family:var(--woop-font-body); font-weight:400; font-size:14px; color:var(--woop-black);
  padding:6px 14px;
}
.SHOP-ITEM .woop-select-toggle:hover, .SHOP-ITEM .woop-select-toggle:focus, .SHOP-ITEM .woop-select-toggle:active{
  background:var(--woop-white) !important; border-color:var(--woop-black) !important; color:var(--woop-black) !important; box-shadow:none !important;
}
.SHOP-ITEM .woop-select-menu{ border-radius:0; border:2px solid var(--woop-black); font-family:var(--woop-font-body); font-size:14px; }

/* Qty stepper reuses the shared pink-circle .common/.plus/.minus markup */
.SHOP-ITEM .common{ gap:16px; }
.SHOP-ITEM .common .plus, .SHOP-ITEM .common .minus{ cursor:pointer; }
.SHOP-ITEM .common .count{ font-family:var(--woop-font-body); font-size:16px; font-weight:700; min-width:20px; text-align:center; }

.SHOP-ITEM .woop-add-alert{ border:2px solid var(--woop-black); border-radius:0; background:var(--woop-white); font-family:var(--woop-font-body); }
.single-option .age h6{
  font-family:var(--woop-font-body);
  font-weight:700;
  font-size:16px;
  text-transform:none;
  color:var(--woop-black);
}
.purchase-option p.h6{
  font-family:var(--woop-font-head);
  font-weight:700;
  font-size:20px;
  line-height:28px;
  text-transform:uppercase;
  color:var(--woop-black);
}
.single-option .age p{
  font-family:var(--woop-font-body);
  color:var(--woop-black);
}
.purchase-option .fz-12{
  font-family:var(--woop-font-body);
  color:var(--woop-black);
}

/* Mobile breadcrumb mini-list (current + next step, Figma) — stretches to
   fill the row, unlike the desktop steps which share a fixed-width parent */
.woop-steps-mobile{ flex:1 1 auto; min-width:0; }

/* Number preceding the step-1 headings (e.g. "1. Kdo pride v fun park?") */
.woop-step-number{ font-family:var(--woop-font-head); font-weight:700; }

/* Yellow circle backdrop behind the mobile cart icon next to the breadcrumb */
.woop-mobile-cart-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--woop-yellow);
}

/* Mobile cart popup (#cart modal, opened via the mobile cart icon next to the
   breadcrumb) — yellow panel matching the desktop .woop-cart-panel sidebar,
   instead of the default white bootstrap modal background */
#cart .modal-dialog{ border-radius:0 !important; }
#cart .modal-content{ background:var(--woop-yellow); border-radius:0; }
#cart .border-top{ border-top-color:var(--woop-black) !important; }
#cart h6, #cart #idbKosaricaPrazna{
  font-family:var(--woop-font-head);
  font-weight:700;
  font-size:20px;
  line-height:32px;
  text-transform:uppercase;
  color:var(--woop-black);
}

/* Info/message popup (shared #error-msg / #qtydlg-msg modals) restyled to match brand */
#error-msg .modal-content, #qtydlg-msg .modal-content{ border-radius:0; }
#error-msg .modal-header, #qtydlg-msg .modal-header{ border:none; position:relative; justify-content:center; padding:28px 44px 8px; }
#error-msg .modal-title, #qtydlg-msg .modal-title{ font-family:var(--woop-font-head); text-transform:uppercase; font-weight:700; text-align:center; width:100%; }
#error-msg .modal-title a, #qtydlg-msg .modal-title a{ display:none; }
#error-msg .modal-body, #qtydlg-msg .modal-body{ text-align:center; padding:8px 44px 28px; }
#error-msg .modal-footer, #qtydlg-msg .modal-footer{ background:transparent; border:none; justify-content:center; gap:12px; padding:0 44px 32px; }

/* Košarica "Prijava/Registracija/Gost" popup (cart.html #loginModal) — reuses
   the .LOGIN panel look from login.html, modal-content itself just becomes
   an invisible wrapper so the .LOGIN square pink border is the only frame. */
#loginModal .modal-content{ border-radius:0; border:none; box-shadow:none; background:transparent; }

/* Attraction/room detail info popup (ticketer.html #more-info-msg, iframe video/detail) */
#more-info-msg .modal-content{ border-radius:0; box-shadow:none; }
#more-info-msg .modal-header{ border:none; position:relative; justify-content:center; padding:28px 44px 8px; }
#more-info-msg .modal-title{ font-family:var(--woop-font-head); text-transform:uppercase; font-weight:700; text-align:center; width:100%; }
#more-info-msg .modal-title a{ display:none; }
#more-info-msg .modal-footer{ background:transparent; border:none; justify-content:center; padding:0 44px 32px; }
/* Video placeholder area is transparent until the iframe's content loads - give it a solid black box like a normal video player */
#more-info-msg .embed-responsive{ background:var(--woop-black); }

.woop-popup-close{ position:absolute; top:8px; right:10px; width:24px; height:24px; border-radius:50%; border:2px solid var(--woop-black); background:var(--woop-black); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; color:var(--woop-white); font-size:11px; line-height:1; }
.woop-popup-close:hover{ background:var(--woop-white); color:var(--woop-black); }

/* Termin (day/hour/minute picker, e.g. timetabletrampolinfun.html) — matches Figma node 1663:7258 */
.TERM .radio-box{ background:var(--woop-blue) !important; border-radius:0; color:var(--woop-black); position:relative; }
.TERM label input[type="radio"]:checked ~ div{ background-color:var(--woop-yellow) !important; color:var(--woop-black) !important; }
.TERM label div p{ font-family:var(--woop-font-body); }
.TERM label div p.mb-0:first-child{ font-size:20px; font-weight:700; }
.TERM .carousel-control-prev, .TERM .carousel-control-next{ background:var(--woop-pink); }
#carousel1.carousel .carousel-control-prev{ left:0 !important; }
/* Hour/minute slots: free times underline blue by default (was black); the
   checked-radio yellow highlight only wraps the time text, not the whole
   grid cell (Figma 1663:7195) */
.woop-slot-list label input[type="radio"]:checked ~ div{ background:none !important; }
.woop-slot-list label input[type="radio"]:checked ~ div p.d-table{
  display:inline-block;
  background:var(--woop-yellow) !important;
  border-bottom:none !important;
  padding:2px 10px;
}
.woop-slot-carousel{ padding-left:32px; }
.woop-grid-inset{ padding-left:15px; }
.woop-slot-list .date label{ color:var(--woop-grey-2); }
.woop-slot-list .date label.text-dark{ color:var(--woop-black); }
.woop-slot-list .border-success, .woop-slot-list .border-success-l{ border-color:var(--woop-blue) !important; }
/* pack hour/minute slots close together instead of stretching across the
   bootstrap 6-column grid (Figma shows tight, content-width spacing) */
.woop-slot-list .date{
  flex:0 0 auto !important;
  max-width:none !important;
  width:auto !important;
  padding:0 20px 8px 0 !important;
}
.woop-slot-list .date label{ width:auto !important; }

/* Urnik izbranih aktivnosti (activity.html) — matches Figma node 1663:6673.
   Markup here is generated by RefreshActivityList()/GetAddList() in
   js/activity.js — restyled via CSS only, structure left untouched. */
.SELECTED-ACTIVITIES .date{ width:100%; max-width:100%; flex:0 0 100%; text-align:left !important; }
.SELECTED-ACTIVITIES .date p{
  font-family:var(--woop-font-head); font-weight:700; font-size:25px; line-height:32px;
  text-transform:uppercase; color:var(--woop-black);
}
.SELECTED-ACTIVITIES .time{ font-family:var(--woop-font-body); color:var(--woop-black); }
.SELECTED-ACTIVITIES .time .shape, .SELECTED-ACTIVITIES .time .shape-line{
  background:var(--woop-black) !important;
}
/* The gap connector (js/activity.js's ".circles .box", used for the "N min"
   between-activity indicator) was built as a horizontal divider (<hr> +
   centered pill) but is dropped into a VERTICAL timeline here, so its two
   dots (line-circle-first/last) end up stacked directly on top of each
   other with no visible line joining them to the dots above/below. Hide
   those dots and draw a single joining line ourselves, aligned under the
   .time column's shape dots (17px wide, centered at left:91px); the pill
   moves beside the line instead of cutting through an <hr>. */
.SELECTED-ACTIVITIES .circles{ min-height:64px; }
.SELECTED-ACTIVITIES .circles .line-circle-first, .SELECTED-ACTIVITIES .circles .line-circle-last{
  display:none !important;
}
.SELECTED-ACTIVITIES .circles::before{
  content:""; position:absolute; top:0; bottom:-15px; left:11px; width:2px;
  background:var(--woop-black);
}
.SELECTED-ACTIVITIES .circles .box{
  position:absolute; top:50%; left:24px; transform:translateY(-50%);
  margin:0 !important; width:auto !important;
}
.SELECTED-ACTIVITIES .circles .box hr{ display:none; }
.SELECTED-ACTIVITIES .circles .box .min{
  font-family:var(--woop-font-body); font-size:12px; color:var(--woop-black);
  margin-top:0; width:fit-content;
}

.SELECTED-ACTIVITIES .activity p.fz-20{
  font-family:var(--woop-font-body) !important; font-weight:700 !important; font-size:16px !important;
  line-height:18px !important; text-transform:none !important;
}
.SELECTED-ACTIVITIES .activity small{ font-family:var(--woop-font-body); font-size:16px; }
.SELECTED-ACTIVITIES .activity small a span{ display:none; } /* desktop markup: icon-only edit/delete, matches Figma */
.SELECTED-ACTIVITIES .activity .fa-edit{ color:var(--woop-blue) !important; font-size:14px !important; }
.SELECTED-ACTIVITIES .activity .fa-times-circle{ color:var(--woop-pink) !important; font-size:14px !important; }
.SELECTED-ACTIVITIES .bottom-arrow{ margin-left:0; }
/* Also covers the mobile-only #activitylistMobile markup, which wraps the whole
   row (not just the ticket line) in .bg-light */
.SELECTED-ACTIVITIES .bg-light{
  background:var(--woop-white) !important; border:2px solid var(--woop-black); border-radius:0 !important;
}
.SELECTED-ACTIVITIES .activity .text{ font-family:var(--woop-font-body); font-weight:400; }

/* Mobile card (js/activity.js RefreshActivityListMobile()) — bigger uppercase
   date, smaller non-bold time, icon-only edit/delete next to the address,
   divider before the ticket line (matches Figma) */
#activitylistMobile .woop-activity-date{
  font-family:var(--woop-font-head); font-size:25px; line-height:32px; font-weight:700; text-transform:uppercase;
}
#activitylistMobile .woop-activity-time{ font-size:16px; font-weight:400; text-align:right !important; }
#activitylistMobile .woop-activity-location p{ font-family:var(--woop-font-body); font-size:16px; line-height:18px; margin-bottom:0; }
#activitylistMobile .woop-activity-location p.woop-activity-name{ font-weight:700; }
#activitylistMobile .woop-activity-icons a span{ display:none; }
#activitylistMobile .woop-activity-icons a{ margin-left:10px; }
#activitylistMobile .woop-activity-icons .fa-edit{ color:var(--woop-blue) !important; font-size:16px !important; }
#activitylistMobile .woop-activity-icons .fa-times-circle{ color:var(--woop-pink) !important; font-size:16px !important; }
#activitylistMobile .woop-activity-divider{ border-top:2px solid var(--woop-black); opacity:1; }
#activitylistMobile .bg-light{ padding:16px 20px; }

/* "Mogoče bi vas zanimalo tudi..." cross-sell strip below the timeline */
.SELECTED-ACTIVITIES .new-slider-zanimalo h5{
  font-family:var(--woop-font-head); font-weight:700; font-size:25px; line-height:32px;
  text-transform:uppercase; color:var(--woop-black);
}
.SELECTED-ACTIVITIES #scrollable-row > div > div{ border-radius:0 !important; border-color:var(--woop-black) !important; }
.SELECTED-ACTIVITIES #scrollable-row p{ font-family:var(--woop-font-body); }
.SELECTED-ACTIVITIES #scrollable-row .btn-success{
  background:var(--woop-white) !important; border:2px solid var(--woop-black) !important; border-radius:0 !important;
  color:var(--woop-black) !important; text-transform:none; font-weight:400;
}
.SELECTED-ACTIVITIES #scrollable-row .text-danger{ color:var(--woop-pink) !important; }
.SELECTED-ACTIVITIES .arrow-circle{ background:var(--woop-pink) !important; }

/* Dodatki (addon.html) — warning text + product list rows */
.ACTIVITIES .text-danger{ color:var(--woop-pink) !important; }
.ACTIVITIES .single-activity{ border-color:var(--woop-black) !important; }
.ACTIVITIES .single-activity p.fz-12{ display:none; }
.ACTIVITIES .bottom-arrow{ margin-left:0; }

/* Košarica (cart.html) — step 5, product list / discounts / delivery / address form */
.KOSARICA .text-danger{ color:var(--woop-pink) !important; }
.KOSARICA #cartList .bg-light.park{ background:transparent !important; }
.KOSARICA #cartList .border-bottom{ border-color:var(--woop-black) !important; }
.KOSARICA .text-orange{ color:var(--woop-pink) !important; }
.KOSARICA .form-control{
  border:2px solid var(--woop-black) !important;
  border-radius:0 !important;
  background:var(--woop-white) !important;
  font-weight:400;
  color:var(--woop-black);
  box-shadow:none !important;
}
.KOSARICA .form-control::placeholder{ font-family:var(--woop-font-body); font-style:italic; font-weight:400; color:var(--woop-black); opacity:1; }
.KOSARICA #discountcode{ width:180px; flex:0 0 auto; }
.KOSARICA input[type="radio"], .KOSARICA input[type="checkbox"]{
  width:16px; height:16px; margin-right:4px; vertical-align:middle;
}
.KOSARICA input[type="radio"]{ accent-color:var(--woop-blue); }
.KOSARICA input[type="checkbox"]{ accent-color:var(--woop-black); }
.KOSARICA .woop-radio-line{ margin-bottom:10px; }
.KOSARICA #idPayCo .row, .KOSARICA #idshiping .row{ margin:0; }

/* Prijava/Registracija (login.html) — no dedicated Figma frame for this
   page, restyled to match the reservation-flow look (pink-bordered white
   panel, squared woop-input fields, pink toggle/CTA buttons). */
.LOGIN{
  background:var(--woop-white);
  border:2px solid var(--woop-pink);
  border-radius:0;
}
.LOGIN label{ font-family:var(--woop-font-body); font-weight:700; font-size:14px; color:var(--woop-black); }
.LOGIN label:not(.mb-1){ font-weight:400; }
.LOGIN .form-control{
  border:2px solid var(--woop-black) !important;
  border-radius:0 !important;
  background:var(--woop-white) !important;
  font-family:var(--woop-font-body);
  font-weight:400;
  color:var(--woop-black);
  box-shadow:none !important;
}
.LOGIN .form-control::placeholder{ font-family:var(--woop-font-body); font-style:italic; font-weight:400; color:var(--woop-black); opacity:1; }
/* Prijava/Registracija toggle: JS only swaps bootstrap's btn-secondary /
   btn-outline-secondary classes, so it's restyled purely via CSS override,
   no JS changes needed */
#loginButtonGroup.btn-group{ border:2px solid var(--woop-blue); border-radius:0; }
#loginButtonGroup .btn{
  border-radius:0 !important;
  font-family:var(--woop-font-body);
  font-weight:700;
  font-size:14px;
  text-transform:uppercase;
  box-shadow:none !important;
}
#loginButtonGroup .btn.btn-secondary{ background:var(--woop-blue) !important; border-color:var(--woop-blue) !important; color:var(--woop-white) !important; }
#loginButtonGroup .btn.btn-outline-secondary{ background:var(--woop-white) !important; border-color:var(--woop-blue) !important; color:var(--woop-blue) !important; }
#loginButtonGroup .btn:hover{ background:var(--woop-black) !important; border-color:var(--woop-black) !important; color:var(--woop-white) !important; }
.LOGIN a.classic, .LOGIN a.tdu{ color:var(--woop-pink); }
.LOGIN a.classic:hover, .LOGIN a.tdu:hover{ color:var(--woop-black); }
.LOGIN input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--woop-black); }
.LOGIN .woop-divider{ border-bottom:2px solid var(--woop-black); }

/* Tablet reception kiosk (Tablet/Wizzard1-3.html) — reuse the .LOGIN panel
   pattern too (no dedicated Figma frame), same reasoning as login.html. */
.LOGIN input[type="radio"]{ width:16px; height:16px; accent-color:var(--woop-black); }
.LOGIN .woop-select-toggle{
  border:2px solid var(--woop-black); border-radius:0; background:var(--woop-white) !important;
  font-family:var(--woop-font-body); font-weight:400; font-size:14px; color:var(--woop-black); box-shadow:none !important;
}
.LOGIN .woop-select-toggle:hover, .LOGIN .woop-select-toggle:focus, .LOGIN .woop-select-toggle:active{
  background:var(--woop-white) !important; border-color:var(--woop-black) !important; color:var(--woop-black) !important;
}
.LOGIN .woop-select-menu{ border-radius:0; border:2px solid var(--woop-black); font-family:var(--woop-font-body); font-size:14px; }
.LOGIN .btn-outline-danger{ border:2px solid var(--woop-pink) !important; border-radius:0 !important; color:var(--woop-pink) !important; background:transparent !important; }
.LOGIN .btn-outline-danger:hover{ background:var(--woop-pink) !important; color:var(--woop-white) !important; }
#chlidren > div{ border-top:2px solid var(--woop-black); padding-top:16px; margin-top:16px; }

/* Payment success (page_paymentsuccess*.html / paymentsuccess*.html) — no
   dedicated Figma frame, restyled to match the reservation-flow look:
   the reservation summary reuses .woop-ticket-panel (pink border), the
   "don't forget" checklist gets a new plain black-border note box. */
.PLACILO .check{ font-size:60px; }
.PLACILO #idtermin{ text-align:left; }
.PLACILO #idtermin:empty{ display:none; }
.PLACILO .woop-note-box{
  background:var(--woop-white);
  border:2px solid var(--woop-black);
  border-radius:0;
  text-align:left;
}
.PLACILO .woop-note-box ul{ list-style-position:inside; }
.PLACILO .text-danger{ color:var(--woop-pink); }