/*
 * FILE: assets/css/responsive-fixes.css
 * Cross-skin mobile/tablet polish — ticket-package cards, header buttons, CTAs.
 * Loaded after every skin stylesheet so these rules win without per-skin edits.
 */

/* =========================================================================
 * 1. TICKET PACKAGE CARDS — UNIVERSAL MOBILE STACKING
 * Every skin uses a horizontal flex row with price pushed to the right.
 * On mobile this overlaps / overflows. Force vertical stack < 480px and
 * tighter horizontal layout 481–768px.
 * ========================================================================= */

/* ---- 768px and down: tighter horizontal layout, smaller fonts ---- */
@media (max-width: 768px) {

  /* PRO --------------------------------------------------------------- */
  .page-template-home-template .ticket-options { gap: 8px !important; margin-bottom: 18px !important; }
  .page-template-home-template .ticket-option   { padding: 12px 14px !important; gap: 10px !important; }
  .page-template-home-template .ticket-left     { gap: 10px !important; min-width: 0 !important; flex: 1 1 auto !important; }
  .page-template-home-template .ticket-price    { flex-shrink: 0 !important; text-align: right !important; }
  .page-template-home-template .ticket-radio    { flex-shrink: 0 !important; }

  /* CLASSIC ----------------------------------------------------------- */
  body.home .product-advertise .ticket-opt,
  body.page-template-home-template .product-advertise .ticket-opt {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  body.home .product-advertise .ticket-opt-left,
  body.page-template-home-template .product-advertise .ticket-opt-left {
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  body.home .product-advertise .ticket-cost,
  body.page-template-home-template .product-advertise .ticket-cost {
    flex-shrink: 0 !important;
    text-align: right !important;
  }
  body.home .product-advertise .ticket-desc,
  body.page-template-home-template .product-advertise .ticket-desc {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* GALA -------------------------------------------------------------- */
  .c2w-skin-gala .g-pkg-card {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .c2w-skin-gala .g-pkg-card .gpc-left  { min-width: 0 !important; flex: 1 1 auto !important; }
  .c2w-skin-gala .g-pkg-card .gpc-right { flex-shrink: 0 !important; }

  /* CANVAS ------------------------------------------------------------ */
  .c2w-skin-canvas .canvas-pkg-grid { gap: 8px !important; }
 

  /* MOMENTUM ---------------------------------------------------------- */
  .c2w-skin-momentum .m-pkg-row {
    padding: 11px 12px !important;
    gap: 10px !important;
  }
  .c2w-skin-momentum .m-pkg-left  { min-width: 0 !important; flex: 1 1 auto !important; }
  .c2w-skin-momentum .m-pkg-right { flex-shrink: 0 !important; text-align: right !important; }

  /* LITE -------------------------------------------------------------- */
  .c2w-skin-lite .lite-tix-card { padding: 12px 14px !important; gap: 10px !important; }
}

/* ---- 480px and down: stacked vertical layout for true mobile ---- */
@media (max-width: 480px) {

  /* PRO --------------------------------------------------------------- */
  .page-template-home-template .ticket-option {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
  }
  .page-template-home-template .ticket-left {
    flex: 1 1 60% !important;
    gap: 10px !important;
  }
  .page-template-home-template .ticket-price {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  .page-template-home-template .ticket-info,
  .page-template-home-template .ticket-name { font-size: 14px !important; line-height: 1.3 !important; }
  .page-template-home-template .ticket-meta { font-size: 11px !important; }
  .page-template-home-template .ticket-amount { font-size: 18px !important; }
  .page-template-home-template .ticket-per   { font-size: 10px !important; }
  /* Move popular/best-value badge to top-right corner, smaller */
  .page-template-home-template .ticket-option.popular::before,
  .page-template-home-template .ticket-option.best-value::before {
    font-size: 8px !important;
    padding: 2px 7px !important;
    letter-spacing: 0.4px !important;
  }

  /* CLASSIC ----------------------------------------------------------- */
  body.home .product-advertise .ticket-opt,
  body.page-template-home-template .product-advertise .ticket-opt {
    padding: 12px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  body.home .product-advertise .ticket-opt-left,
  body.page-template-home-template .product-advertise .ticket-opt-left {
    flex: 1 1 60% !important;
  }
  body.home .product-advertise .ticket-cost,
  body.page-template-home-template .product-advertise .ticket-cost {
    margin-left: auto !important;
    font-size: 16px !important;
  }
  body.home .product-advertise .ticket-name,
  body.page-template-home-template .product-advertise .ticket-name { font-size: 14px !important; }
  body.home .product-advertise .ticket-desc,
  body.page-template-home-template .product-advertise .ticket-desc { font-size: 11px !important; }

  /* GALA -------------------------------------------------------------- */
  .c2w-skin-gala .g-pkg-grid  { gap: 12px !important; }
  .c2w-skin-gala .g-pkg-card  { padding: 12px !important; gap: 8px !important; }
  .c2w-skin-gala .gpc-count   { font-size: 14px !important; }
  .c2w-skin-gala .gpc-label   { font-size: 9px !important; }
  .c2w-skin-gala .gpc-price   { font-size: 16px !important; }
  .c2w-skin-gala .gpc-per     { font-size: 9px !important; }
  .c2w-skin-gala .gpc-badge   { font-size: 8px !important; padding: 2px 7px !important; top: -8px !important; }

  /* CANVAS ------------------------------------------------------------ */
  .c2w-skin-canvas .canvas-pkg-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* MOMENTUM ---------------------------------------------------------- */
  .c2w-skin-momentum .m-pkg-row {
    padding: 11px 12px !important;
    gap: 10px !important;
  }
  .c2w-skin-momentum .m-pkg-count { font-size: 14px !important; }
  .c2w-skin-momentum .m-pkg-lbl   { font-size: 9px !important; }
  .c2w-skin-momentum .m-pkg-price { font-size: 16px !important; }
  .c2w-skin-momentum .m-pkg-per   { font-size: 9px !important; }
  .c2w-skin-momentum .m-pkg-badge { font-size: 8px !important; padding: 2px 7px !important; top: -8px !important; }

  /* LITE — quantity controls must stay horizontal but shrink ---------- */
  .c2w-skin-lite .lite-tix-card { padding: 12px !important; }
  .c2w-skin-lite .lite-qc       { gap: 6px !important; }
  .c2w-skin-lite .lite-qb       { width: 32px !important; height: 32px !important; font-size: 16px !important; padding: 0 !important; line-height: 30px !important; }
  .c2w-skin-lite .lite-qv       { width: 44px !important; height: 32px !important; font-size: 14px !important; padding: 0 !important; text-align: center !important; }
  .c2w-skin-lite .lite-t-n      { font-size: 14px !important; }
  .c2w-skin-lite .lite-t-p      { font-size: 16px !important; }
  .c2w-skin-lite .lite-t-u      { font-size: 10px !important; }
}

/* =========================================================================
 * 2. HEADER / TOPBAR BUTTONS — prevent overflow, allow stacking
 * ========================================================================= */

/* The "50/50 amount" pill in classic / pro headers wraps badly on mobile */
@media (max-width: 768px) {
  .fifty-amoutn-sec {
    text-align: center !important;
    padding: 6px 10px !important;
  }
  .fifty-wrap p,
  .fifty-amoutn-sec p {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
}
@media (max-width: 480px) {
  /* On the tightest screens the 50/50 banner steals too much height — hide */
  .fifty-amoutn-sec { display: none !important; }
}

/* Header right-side actions (login / signup / cart) should wrap not overflow */
@media (max-width: 991px) {
  .logrightsection,
  .header-right,
  .c2w-header-actions {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }
  .logrightsection > *,
  .header-right > *,
  .c2w-header-actions > * {
    flex-shrink: 0 !important;
  }
}

/* Site logo: never let it consume more than 200px on mobile */
@media (max-width: 768px) {
  .site-branding a img,
  .logosection .site-branding a img {
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
  }
}
@media (max-width: 480px) {
  .site-branding a img,
  .logosection .site-branding a img {
    max-width: 140px !important;
  }
}

/* =========================================================================
 * 3. PRIMARY CTA BUTTONS — shrink padding gracefully
 * ========================================================================= */

@media (max-width: 768px) {
  .button,
  .c2w-buy-btn,
  .ticket-buy-btn,
  .add_to_cart_button,
  .single_add_to_cart_button {
    padding: 10px 24px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
}
@media (max-width: 480px) {
  .button,
  .c2w-buy-btn,
  .ticket-buy-btn,
  .add_to_cart_button,
  .single_add_to_cart_button {
    padding: 10px 18px !important;
    font-size: 13px !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }
}

/* =========================================================================
 * 4. UNIVERSAL OVERFLOW GUARDS
 * Prevent horizontal scroll caused by stray fixed-width elements / wide
 * tables / hero images.
 * ========================================================================= */

@media (max-width: 768px) {
  /* Nuclear width reset — browser default body margin (8px) causes content to
     appear 16px narrower than the device viewport. Force zero margin. */
  html {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* #page wrapper: must fill the full viewport */
  #page.site {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  /* Pro skin home: landing and main content wrappers */
  body.page-template-home-template .c2w-landing {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Common containers used across the theme */
  .container,
  .container1,
  .product-advertise,
  .left-section,
  .right-section,
  .canvas-shell,
  .g-shell,
  .m-shell,
  .lite-shell {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Kill horizontal padding doubling */
  .product-advertise { padding-left: 14px !important; padding-right: 14px !important; }
}

/* =========================================================================
 * 5. FLEXSLIDER ARROWS — tame on tiny screens
 * ========================================================================= */

@media (max-width: 480px) {
  .flex-direction-nav a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
  }
  .flex-direction-nav a::before {
    font-size: 18px !important;
  }
  .flex-control-nav.flex-control-thumbs li {
    width: 60px !important;
    margin: 0 4px !important;
  }
}

/* =========================================================================
 * 6. WOOCOMMERCE ORDER RECEIVED — TICKET GRID
 * ticket-display.php now wraps images in .c2w-ticket-grid (3-col CSS grid).
 * No <br> after images any more. This section intentionally left minimal.
 * Grid rules live in page-layouts.css under .c2w-ticket-grid.
 * ========================================================================= */