/* Tickets Page Redesign - Version 3 (Light Theme, Cards Layout) */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
  --v3-blue: #213245;
  --v3-orange: #CD6C0C;
  --v3-white: #FFFFFF;
  --v3-light-green: #BACD32;
  --v3-light-grey: #EBEBEB;
  
  --v3-shadow: 0 4px 15px rgba(33, 50, 69, 0.08);

  /* Single global definition of the repeatable 1000px high-frequency, subtle amplitude crinkle SVG */
  --v3-crinkle-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='6' viewBox='0 0 1000 6' fill='none'%3E%3Cpath d='M0 3.0 Q 5.42 2.74, 10.84 2.74 Q 15.16 3.31, 19.49 3.31 Q 25.20 2.58, 30.91 2.58 Q 37.08 3.27, 43.26 3.27 Q 48.02 2.74, 52.79 2.74 Q 56.95 3.38, 61.10 3.38 Q 64.68 2.70, 68.26 2.70 Q 73.71 3.39, 79.16 3.39 Q 83.32 2.60, 87.48 2.60 Q 93.41 3.25, 99.34 3.25 Q 105.26 2.58, 111.17 2.58 Q 115.70 3.29, 120.22 3.29 Q 126.59 2.67, 132.96 2.67 Q 136.74 3.27, 140.52 3.27 Q 146.56 2.60, 152.60 2.60 Q 158.52 3.43, 164.44 3.43 Q 169.55 2.51, 174.66 2.51 Q 179.30 3.39, 183.93 3.39 Q 189.92 2.60, 195.91 2.60 Q 201.99 3.39, 208.08 3.39 Q 213.69 2.74, 219.31 2.74 Q 223.49 3.32, 227.67 3.32 Q 231.41 2.69, 235.15 2.69 Q 238.96 3.32, 242.76 3.32 Q 248.17 2.66, 253.57 2.66 Q 258.18 3.30, 262.79 3.30 Q 267.09 2.52, 271.40 2.52 Q 276.84 3.40, 282.28 3.40 Q 286.30 2.57, 290.31 2.57 Q 294.30 3.34, 298.29 3.34 Q 304.76 2.59, 311.23 2.59 Q 316.40 3.42, 321.57 3.42 Q 327.60 2.56, 333.63 2.56 Q 337.81 3.26, 342.00 3.26 Q 346.45 2.68, 350.89 2.68 Q 355.03 3.49, 359.16 3.49 Q 365.29 2.67, 371.42 2.67 Q 376.88 3.35, 382.35 3.35 Q 388.59 2.64, 394.84 2.64 Q 399.13 3.31, 403.43 3.31 Q 408.61 2.68, 413.80 2.68 Q 419.05 3.47, 424.30 3.47 Q 429.00 2.70, 433.70 2.70 Q 440.19 3.38, 446.68 3.38 Q 450.46 2.74, 454.23 2.74 Q 458.06 3.41, 461.89 3.41 Q 467.76 2.64, 473.64 2.64 Q 477.33 3.35, 481.02 3.35 Q 487.51 2.62, 494.00 2.62 Q 500.41 3.47, 506.82 3.47 Q 510.36 2.57, 513.89 2.57 Q 519.44 3.38, 524.98 3.38 Q 529.28 2.59, 533.58 2.59 Q 537.42 3.36, 541.25 3.36 Q 546.12 2.51, 550.98 2.51 Q 557.10 3.32, 563.23 3.32 Q 568.23 2.71, 573.24 2.71 Q 579.47 3.47, 585.71 3.47 Q 590.11 2.59, 594.50 2.59 Q 599.83 3.29, 605.16 3.29 Q 610.94 2.62, 616.73 2.62 Q 622.57 3.38, 628.40 3.38 Q 631.90 2.67, 635.41 2.67 Q 638.96 3.48, 642.52 3.48 Q 648.66 2.54, 654.79 2.54 Q 659.22 3.26, 663.64 3.26 Q 669.77 2.51, 675.91 2.51 Q 679.67 3.37, 683.42 3.37 Q 687.13 2.56, 690.84 2.56 Q 696.63 3.28, 702.43 3.28 Q 707.36 2.61, 712.28 2.61 Q 716.58 3.47, 720.87 3.47 Q 725.64 2.70, 730.41 2.70 Q 735.53 3.43, 740.65 3.43 Q 744.75 2.67, 748.86 2.67 Q 755.34 3.41, 761.83 3.41 Q 766.64 2.62, 771.46 2.62 Q 775.32 3.31, 779.18 3.31 Q 783.70 2.60, 788.21 2.60 Q 792.40 3.31, 796.59 3.31 Q 800.30 2.59, 804.02 2.59 Q 808.20 3.48, 812.39 3.48 Q 818.47 2.73, 824.55 2.73 Q 828.76 3.42, 832.98 3.42 Q 837.12 2.72, 841.26 2.72 Q 847.57 3.39, 853.87 3.39 Q 858.79 2.55, 863.71 2.55 Q 869.63 3.30, 875.56 3.30 Q 879.35 2.64, 883.14 2.64 Q 887.91 3.37, 892.68 3.37 Q 898.37 2.58, 904.05 2.58 Q 910.51 3.27, 916.96 3.27 Q 921.67 2.67, 926.37 2.67 Q 932.46 3.31, 938.54 3.31 Q 942.61 2.64, 946.68 2.64 Q 951.45 3.32, 956.22 3.32 Q 960.47 2.52, 964.72 2.52 Q 969.54 3.47, 974.37 3.47 Q 979.52 2.74, 984.68 2.74 Q 991.17 3.46, 997.67 3.46 Q 998.84 3.00, 1000.00 3.00' stroke='%23BACD32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
}

/* Shared utility style rule for elements that use the crinkle divider background texture */
.crinkle-divider {
  background-image: var(--v3-crinkle-svg) !important;
  background-repeat: repeat-x !important;
  background-size: 1000px 6px !important;
}

/* General styled <hr> tag using repeatable crinkle path SVG */
hr {
  border: 0 !important;
  height: 6px !important;
  margin: 2rem 0 !important;
  background-image: var(--v3-crinkle-svg) !important;
  background-repeat: repeat-x !important;
  background-size: 1000px 6px !important;
  background-position: center !important;
}

hr.crinkle-line {
  margin: 15px 0 0 0 !important;
  display: block !important;
}

/* When the card doesn't have a details drawer, the HR is followed directly by the action row.
   We push the HR to the bottom of the card, and give the action row a 10px top margin. */
hr.crinkle-line:has(+ .card-action-row) {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

hr.crinkle-line + .card-action-row {
  margin-top: 10px !important; /* Space between bottom HR and action row */
}

hr.crinkle-line.cart-hr {
  margin: 12px 0 !important;
}



/* 1. Global Page Styles & Sticky support */
html, body {
  overflow-x: visible !important;
  font-family: 'Open Sans', sans-serif;
  color: var(--v3-blue);
  font-size: 16px; /* Scaled body text */
}

body.tickets {
  overflow-x: clip !important;
}

/* WORKAROUND REMINDER: Remove this .frame_title hiding logic once WIP templates are merged to prod */
body.tickets .frame_title {
  display: none !important;
}

/* Reset theme's hardcoded shrink-wrap table width & container margins */
.frame_guts_holder {
  display: block !important;
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

.tickets .frame_guts {
  width: 100% !important;
  max-width: 100% !important;
  background-color: transparent !important;
  padding: 20px 0 !important;
}

/* Override global group widths so they fill the Bootstrap column instead of locking to 640px */
.ticknav, .tickend, .tickday, .tickinfo, .tickao, .tickaddr {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Tab-restricted sections (mirrors the legacy .day .ticked.end behavior):
   weekend-only sections hide on the Single Day tab and vice versa */
#tabs_container.day .tab-weekend,
#tabs_container.end .tab-day {
  display: none !important;
}

/* 2. Restore Original Tab Selector Styling from /tickets page */
.ticknav {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 40px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  width: 100% !important;
}

.ticknav .tab {
  cursor: pointer;
  display: inline-block !important;
  font-family: Pickathon, Helvetica, sans-serif !important;
  font-size: 26px !important; /* Scaled tab headers */
  padding: 10px 20px !important;
  margin-right: 5px !important;
  box-sizing: border-box !important;
  transition: none !important;
  
  /* Inactive tab styles from style.css */
  background-color: #eee !important;
  border: 1px solid #8B9DA0 !important;
  color: #8B9DA0 !important;
  text-shadow: none !important;
}

.ticknav .tab.active {
  /* Active tab styles from style.css */
  background-color: var(--highlight) !important;
  border-color: var(--highlight) !important;
  color: white !important;
  text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.40) !important;
  position: relative !important;
}

/* Pure CSS Chevron pointer centered horizontally under the active tab */
.ticknav .tab.active::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  background-color: transparent !important;
  border-left: 14px solid transparent !important;
  border-right: 14px solid transparent !important;
  border-top: 14px solid var(--highlight) !important;
  border-bottom: none !important;
  transition: none !important;
  z-index: 1 !important;
}

/* 3. Main Page Grid Layout (Fits side-by-side to exactly 960px on desktop) */
.tickets-grid-container {
  padding-top: 20px;
  padding-bottom: 80px;
  max-width: 960px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* TABLET & DESKTOP Breakpoint (width >= 769px) */
@media (min-width: 769px) {
  .tickets-grid-container .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .tickets-catalog {
    flex: 1 1 auto !important;
    width: calc(100% - 280px) !important;
    max-width: calc(100% - 280px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .tickets-cart-column {
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: 260px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 110px !important;
    z-index: 10 !important;
    align-self: flex-start !important; 
  }
}

/* 4. Ticket Groups (Sections) Styling & Color Blocks */
.ticked {
  margin-top: 0 !important;
  margin-bottom: 40px;
  border-bottom: none !important; /* Remove Ghost rule below sections */
}

/* A. Ticket Group Header Typography (Scaled down by 0.5555) */
.ticked .subject-sub {
  font-family: 'Open Sans', sans-serif;
  color: var(--v3-orange);
  font-weight: 500;
  font-size: 16px !important; /* Scaled from 20px */
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  line-height: 1.2;
}

.ticked .subject {
  font-family: Pickathon, sans-serif !important;
  color: var(--v3-blue) !important;
  font-size: 34px !important; /* Scaled from 62px ("Medium") */
  font-weight: normal !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin: 0 0 10px 0 !important;
  border-bottom: none !important;
  float: none !important;
}

.ticked .desc {
  font-family: 'Open Sans', sans-serif !important;
  color: var(--v3-blue) !important;
  font-weight: 400 !important; /* Changed from 700 to regular "Body" style */
  font-size: 16px !important;  /* Readable scaled size */
  line-height: 1.4 !important;
  margin-bottom: 20px !important;
}

.ticked .desc h2 {
  font-family: Pickathon, sans-serif !important;
  font-size: 26px !important;
  color: var(--v3-blue) !important;
  margin: 15px 0 10px 0 !important;
  text-transform: uppercase;
}

.section-purpose .ticked .desc h2 {
  color: var(--v3-blue) !important; /* Keep foreground text blue */
}

.section-camping .ticked .desc h2 {
  color: var(--v3-blue) !important;
}

/* B. Orange Section Override (A Ticket With Purpose - Foreground kept Blue) */
.section-purpose {
  background-color: var(--v3-orange);
  margin-bottom: 45px;
  padding: 25px 20px;
}

.section-purpose .ticked {
  margin-bottom: 0;
}

.section-purpose .subject-sub {
  color: var(--v3-blue) !important; /* Foreground kept blue */
}

.section-purpose .subject {
  color: var(--v3-blue) !important; /* Foreground kept blue */
}

.section-purpose .desc,
.section-purpose .section-subtitle-container {
  color: var(--v3-blue) !important; /* Foreground kept blue */
}

/* C. Light-Green Section Override (Staying There / Camping) */
.section-camping {
  background-color: var(--v3-light-green);
  margin-bottom: 45px;
  padding: 25px 20px;
}

.section-camping .ticked {
  margin-bottom: 0;
}

.section-camping .subject-sub {
  color: var(--v3-blue) !important;
}

.section-camping .subject {
  color: var(--v3-blue) !important;
}

.section-camping .desc,
.section-camping .section-subtitle-container {
  color: var(--v3-blue) !important;
}

/* 5. Ticket Cards Grid */
.ticket-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 15px;
}

/* A. Card Component Base Styles (Square corners, fits exactly to content) */
.ticket-card {
  position: relative;
  background-color: var(--v3-white);
  border: none !important;
  border-radius: 0 !important; /* Square corners */
  box-shadow: var(--v3-shadow);
  display: flex;
  flex-direction: column;
  min-height: auto !important; /* Fit exactly to content instead of 240px */
  overflow: visible;
  transition: box-shadow 0.2s;
  margin-top: 15px;
  box-sizing: border-box;
}

.ticket-card:hover {
  box-shadow: 0 8px 25px rgba(33, 50, 69, 0.12);
}

/* Featured Card Override (Dark blue background, white text) */
.ticket-card.featured {
  grid-column: span 2;
  background-color: var(--v3-blue) !important;
  color: var(--v3-white) !important;
}

/* Image Card Banner */
.ticket-card.with-image {
  min-height: auto !important; /* Fit exactly to content instead of 320px */
}

.card-image-banner {
  height: 130px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 0 !important; /* Force square corner image */
}

/* B. Card Badges (Centered vertically on the top border) */
.card-badge {
  position: absolute;
  top: 0;
  right: 20px;
  transform: translateY(-50%);
  background-color: var(--v3-orange);
  color: var(--v3-white);
  font-family: 'Open Sans', sans-serif;
  font-weight: 600; /* SemiBold */
  font-size: 10px; /* Scaled from 14px */
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  z-index: 10 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
  white-space: nowrap;
}

/* C. Card Content Elements */
.card-content-wrapper {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.ticket-subheading {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 14px !important; /* Scaled from 18px */
  color: var(--v3-orange);
  margin-bottom: 2px; /* Reduced from 6px */
  line-height: 1.2;
  text-transform: uppercase !important; /* Enforces ALL CAPS via CSS */
}

.ticket-card.featured .ticket-subheading {
  color: var(--v3-light-green) !important; /* light green subhead on featured */
}

.ticket-name {
  font-family: Pickathon, sans-serif !important;
  font-size: 26px !important; /* Scaled from 47px ("card-header") */
  color: var(--v3-blue) !important;
  font-weight: normal !important;
  line-height: 1.1 !important;
  margin: 0 0 8px 0 !important;
  text-transform: uppercase;
}

.ticket-card.featured .ticket-name {
  color: var(--v3-white) !important;
}

.ticket-desc {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 14px !important; /* Scaled from 14px ("Body") */
  color: var(--v3-blue);
  line-height: 1.4 !important;
  margin-bottom: 10px;
}

.ticket-card.featured .ticket-desc {
  color: var(--v3-white) !important;
}

.ticket-desc a,
.option-desc a {
  color: #4a4a4a !important; /* Make hyperlinks same as live site production site */
  text-decoration: underline !important;
}

.ticket-card.featured .ticket-desc a {
  color: var(--v3-light-green) !important;
}

/* D. What's Included Details */
.ticket-details {
  border-top: none !important;
  margin-top: 10px;
  padding-top: 0;
  margin-bottom: 12px;
}

.details-summary {
  display: inline-flex; /* Changed from flex/justify-content to inline-flex to pull chevron adjacent */
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; /* Scaled from 14px */
  color: var(--v3-blue);
  font-weight: 400;
}

.ticket-card.featured .details-summary {
  color: var(--v3-white) !important;
}

.details-summary::-webkit-details-marker {
  display: none;
}

.details-summary i {
  font-size: 9px;
  transition: transform 0.2s ease;
  margin-top: 1px;
}

.ticket-details[open] .details-summary i {
  transform: rotate(180deg);
}

.details-list {
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; /* Scaled from 12px */
  color: var(--v3-blue);
}

.ticket-card.featured .details-list {
  color: var(--v3-white) !important;
}

.details-list li {
  margin-bottom: 5px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.details-list li i {
  color: var(--v3-orange);
  font-size: 8px;
  margin-top: 3px;
}

.ticket-card.featured .details-list li i {
  color: var(--v3-light-green) !important;
}

/* E. Bottom Action Row: Price & Actions */
.card-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: auto !important; /* Force to bottom of card content box */
  padding-top: 0 !important;
  border-top: none !important;
}

.ticket-price {
  font-family: Pickathon, sans-serif !important;
  font-size: 26px !important; /* Scaled from 36px ("Small") */
  font-weight: normal !important;
  color: var(--v3-blue) !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.ticket-card.featured .ticket-price {
  color: var(--v3-white) !important;
}

.price-soldout {
  color: var(--v3-orange);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.price-comingsoon {
  color: var(--v3-orange);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.card-actions {
  display: flex;
  align-items: center;
}

/* Counter & Qty Selector Controls */
.qty-selector {
  display: flex;
  align-items: center;
}

.qty-selector .addrwidget {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: var(--v3-white) !important;
  border: 1px solid var(--v3-light-grey) !important;
  border-radius: 4px !important;
  padding: 1px !important;
  gap: 6px !important;
  width: 90px !important;
  float: none !important;
  height: 34px !important; /* Match button height exactly */
  box-sizing: border-box !important;
  text-align: center !important;
}

.qty-selector .addrwidget i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--v3-orange) !important;
  border: 1px solid var(--v3-orange) !important;
  color: var(--v3-white) !important;
  cursor: pointer !important;
  float: none !important;
  padding: 0 !important; /* Remove padding */
  width: 30px !important; /* Fit within 34px height */
  height: 30px !important; /* Fit within 34px height */
  border-radius: 4px !important;
  transition: opacity 0.15s !important;
  font-size: 8px !important;
  box-sizing: border-box !important;
}

.qty-selector .qty-display {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--v3-blue) !important;
  min-width: 16px !important;
  text-align: center !important;
  float: none !important;
  display: inline-block !important;
}

.btn-add-to-cart {
  background-color: var(--v3-orange) !important;
  color: var(--v3-white) !important;
  border: none;
  border-radius: 4px;
  padding: 0 12px !important; /* Remove vertical padding, let height control it */
  height: 34px !important; /* Same height as counter */
  box-sizing: border-box !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  font-family: Pickathon, sans-serif !important;
  font-size: 14px !important; /* Scaled from 22px ("card-add-to-cart-button-text") */
  font-weight: normal !important;
  text-transform: uppercase !important;
  transition: opacity 0.15s;
  cursor: pointer;
  line-height: 1 !important;
}

.btn-add-to-cart:hover {
  opacity: 0.9;
}

.btn-disabled {
  background-color: var(--v3-light-grey);
  color: #94a3b8 !important;
  border: 1px solid var(--v3-light-grey);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  cursor: not-allowed;
}

/* F. Nested Camping Option Rows Layout rules */
.card-options-list {
  margin-top: 0;
  padding-top: 10px;
  border-top: none !important;
}

.card-option-row {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Center options content vertically */
  padding: 10px 0;
  border-bottom: 1px solid var(--v3-light-grey);
  gap: 10px;
}

.card-option-row:last-child {
  border-bottom: none !important;
}

.option-name-col {
  flex: 1;
}

.option-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--v3-blue);
  line-height: 1.3;
}

.section-camping .option-title {
  color: var(--v3-blue) !important;
}

.option-desc {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #64748b;
  line-height: 1.3;
  margin-top: 2px;
}

.section-camping .option-desc {
  color: var(--v3-blue) !important;
  opacity: 0.85;
}

.option-action-col {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 2px; /* aligns inner buttons vertically with option title text line */
}

.option-action-col .ticket-price {
  font-size: 14px !important; /* Compact price for inner options */
  min-width: 45px;
  text-align: right;
}

.option-action-col .btn-add-to-cart {
  padding: 0 8px !important; /* Remove vertical padding, let height control it */
  height: 28px !important; /* Match counter height exactly */
  box-sizing: border-box !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important; /* Compact button */
}

.option-action-col .qty-selector .addrwidget {
  width: 75px !important;
  height: 28px !important; /* Match button height exactly */
  padding: 1px !important;
  box-sizing: border-box !important;
  gap: 4px !important;
}

.option-action-col .qty-selector .addrwidget i {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important; /* Remove padding */
}

/* 6. Desktop Sticky Cart / Mobile Slide-up Drawer Panel */
.cart-panel-card {
  background-color: var(--v3-white);
  border: 1px solid var(--v3-light-grey);
  border-radius: 0 !important; /* Square corners */
  padding: 0 !important;
  box-shadow: var(--v3-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cart-header-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: var(--v3-blue); /* blue header background */
  padding: 12px 15px;
  color: var(--v3-white);
  cursor: pointer;
}

.cart-header-top-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.cart-title {
  font-family: Pickathon, sans-serif !important;
  font-size: 18px !important; /* Scaled from 27px */
  font-weight: normal !important;
  color: var(--v3-white) !important;
  margin: 0 !important;
  text-transform: uppercase;
}

.cart-total-badge {
  color: var(--v3-white) !important;
  font-family: Pickathon, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  display: none; /* Hidden by default on desktop */
}

.cart-header-checkout-row {
  display: none; /* Hidden on desktop */
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}

.btn-mobile-checkout {
  width: auto !important; /* Fit to the text */
  min-width: 140px; /* Comfortable touch target width */
  background-color: var(--v3-orange) !important;
  color: var(--v3-white) !important;
  font-family: Pickathon, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 24px !important;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(224, 90, 54, 0.3);
  transition: background-color 0.2s ease;
}

.btn-mobile-checkout:hover, .btn-mobile-checkout:focus {
  background-color: #d04d2b !important;
}

.cart-items-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 15px 15px 0 15px;
}

.cart-empty-message {
  color: var(--v3-blue);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; /* Scaled body size */
  text-align: center;
  padding: 0 !important;
  margin: 0;
}

/* Item details inside cart panel (with repeatable crinkle bottom background line) */
.cart-item-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: none !important;
}

.cart-item-row:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.item-details-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Open Sans', sans-serif;
  flex: 1;
}

.item-row-title {
  font-size: 12px; /* Scaled from 16px */
  font-weight: 500;
  color: var(--v3-blue);
  line-height: 1.3;
}

.item-row-sub {
  font-size: 12px; /* Scaled from 12px */
  font-weight: 400;
  color: var(--v3-blue);
}

.item-row-remove {
  font-size: 12px;
  font-weight: 400;
  color: var(--v3-orange);
  cursor: pointer;
  text-decoration: underline;
  margin-top: 4px;
  align-self: flex-end;
}

.item-details-right {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; /* Scaled from 16px */
  font-weight: 500;
  color: var(--v3-blue);
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

/* Cart Pricing breakdown table */
.cart-price-breakdown {
  border-top: none !important;
  padding: 0 15px 15px 15px;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; /* Scaled from 12px */
  color: var(--v3-blue);
  margin-bottom: 6px;
}

.summary-line.total-line {
  color: var(--v3-blue);
  font-size: 12px; /* Scaled from 16px */
  font-weight: 500;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.summary-line.total-line span {
  text-transform: uppercase !important;
}

/* Email & Action buttons */
.cart-checkout-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 15px 15px 15px;
}

.email-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.email-input-group label {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; /* Scaled from 12px */
  font-weight: 400;
  color: var(--v3-blue);
}

.email-input-group input {
  background-color: var(--v3-white);
  border: 1px solid var(--v3-light-grey);
  color: var(--v3-blue);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  box-sizing: border-box !important;
  width: 100% !important;
}

.email-input-group input:focus {
  border-color: var(--v3-blue);
  outline: none;
}

.btn-secure-checkout {
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: var(--v3-orange) !important; /* Orange background */
  color: var(--v3-white) !important;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-family: Pickathon, sans-serif !important;
  font-size: 14px !important; /* Scaled from 22px */
  font-weight: normal !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1 !important;
}

.btn-secure-checkout:hover {
  opacity: 0.9;
}

.checkout-footer-notice {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px; /* Scaled from 12px */
  color: var(--v3-blue);
  text-align: center;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 7. MOBILE STACK Breakpoint Layout (<= 768px wide) & Drawer styling */
@media (max-width: 768px) {
  .ticked {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  .cart-total-badge {
    display: inline-block !important;
  }

  .tickets-grid-container {
    padding-bottom: 120px;
  }

  .tickets-grid-container .row {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .tickets-catalog {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Position cart panel as fixed bottom drawer on mobile */
  .tickets-cart-column {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1000 !important;
    pointer-events: none !important; /* Touch-tap bugfix */
    
    top: auto !important;
    align-self: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .sticky-cart-sidebar {
    position: static;
  }

  .cart-panel-card {
    border-radius: 0 !important; /* Retain square corners */
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.15);
    max-height: 80vh;
    transform: translateY(calc(100% - 47px)); /* Height when empty */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto !important;
  }

  .cart-panel-card.has-items {
    transform: translateY(calc(100% - 91px)); /* Height when it has items and shows checkout button */
  }

  /* When drawer is open, slide it fully up to view content */
  .cart-panel-card.drawer-open {
    transform: translateY(0) !important;
    overflow-y: auto;
  }

  .cart-header-row {
    cursor: pointer;
  }

  .cart-header-top-line {
    position: relative;
    padding-right: 25px !important; /* Make room for the chevron on the top line */
  }

  .cart-panel-card.has-items .cart-header-checkout-row {
    display: flex !important;
  }

  /* Add toggle arrow indicator on header right */
  .cart-header-top-line::after {
    content: '\f077'; /* fontawesome chevron up */
    font-family: FontAwesome;
    font-size: 12px;
    color: var(--v3-white);
    transition: transform 0.3s ease;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .cart-panel-card.drawer-open .cart-header-top-line::after {
    transform: translateY(-50%) rotate(180deg);
  }
  
  body.drawer-active {
    overflow: hidden;
  }
}

/* 8. Menu override to prevent horizontal scrollbar on devices < 970px with overflow-x: visible */
@media (max-width: 969px) {
  .header_band {
    position: fixed !important;
    right: -320px !important;
    transition: right 0.3s ease !important;
    width: 320px !important;
  }
  body.open .header_band {
    right: 0 !important;
  }
}

/* Stack cards to 1 column only on mobile portrait viewports (<= 480px) */
@media (max-width: 480px) {
  .ticket-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .ticket-card.featured {
    grid-column: span 1 !important;
  }

  .ticknav .tab {
    font-size: 14px !important; /* Smaller tab text size to prevent wrapping */
    padding: 8px 12px !important;
  }
  
  .ticknav .tab.active::after {
    border-left-width: 10px !important;
    border-right-width: 10px !important;
    border-top-width: 10px !important;
    bottom: -10px !important;
    z-index: 1 !important;
  }
  
  .card-badge {
    z-index: 1 !important;
  }

  /* Full-bleed colored sections only on mobile portrait */
  .section-purpose {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
  }

  .section-camping {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
  }
}