/* ==========================================================
   Boddor GWS Checkout — FULL CSS (UPDATED)
   - White cards, light gray border, NO shadow
   - Selection SAME THEME for Devices + Durations:
       Selected: RED border + light red background
       Selected: Text + SVG = RED
       Selected: Badge = RED bg + WHITE text (keeps badge text)
   - Duration badge moved UNDER text like device
   - Devices layout fixed:
       Desktop (>=992): 1 2 3 4 5
       Tablet (768-991): 1 2 3 4 + 5 full width
       Phone (<=767): 1 2 3 + 4 half + 5 half
   - border-radius for device/duration = .375rem
   - Keep TV svg icon (no replacement)
   - Keep your icon sizing rule:
       .bgccou-device-ico .bgccou-tv-icon, .bgccou-device-btn .bgccou-tv-icon, .bgccou-device-btn svg {
         margin-right: 10px; max-width: 70%;
       }
   - Badges base style:
       Discount badge green / Popular badge yellow
     and on selection both become RED with white text
   - Badge font-size responsive (tablet/mobile)
   ========================================================== */

/* =========================
   TOKENS
========================= */
:root{
  --bgccou-bg: transparent;

  --bgccou-card-bg: #fff;
  --bgccou-text: #0f172a;
  --bgccou-muted: #64748b;

  --bgccou-border: #e5e7eb;
  --bgccou-border-soft: #eef2f7;

  --bgccou-surface-2: #f8fafc;

  --bgccou-radius: 14px;
  --bgccou-focus: rgba(0,0,0,.20);

  --bgccou-choice-radius: .375rem; /* requested */

  /* Card look */
  --bgccou-card-border: #cfcfcf;
  --bgccou-card-hover-border: #bdbdbd;

  /* Selected theme */
  --bgccou-active-border: #e11d2e;
  --bgccou-active-bg: #fff3f4;
  --bgccou-active-text: #e11d2e;
  --bgccou-active-badge-bg: #e11d2e;
  --bgccou-badge-text: #fff;
  --bgccou-active-badge-text: var(--bgccou-badge-text, #fff);

  /* Base badges (Devices + Duration) */
  --bgccou-discount-bg: var(--bgccou-primary, #e11d2e);
  --bgccou-discount-text: var(--bgccou-badge-text, #fff);

  --bgccou-popular-bg: var(--bgccou-primary, #e11d2e);
  --bgccou-popular-text: var(--bgccou-badge-text, #fff);
}

/* =========================
   BASE / ACCESSIBILITY
========================= */
.bgccou-wrap, .bgccou-wrap *{ box-sizing: border-box; }
.bgccou-wrap{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce){
  .bgccou-wrap *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================
   WRAPPER / GRID
========================= */
.bgccou-wrap{
  background: var(--bgccou-bg);
/* Cancel WP global paddings (e.g. .has-global-padding) */
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
}

.bgccou-container {
    max-width: 100%;
    width: 992px;
    margin: 0 auto;
    padding: 0 !important;
}

/* Typography: use the active theme font (no custom fonts) */
body .bgccou-container,
body .bgccou-container *{
  font-family: inherit !important;
}

.bgccou-grid{ display:grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 768px){
}

.bgccou-header{ margin-bottom: 14px; }
.bgccou-title{
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 8px;
  text-align: center;
  color: var(--bgccou-text);
  letter-spacing: -.01em;
}
@media (min-width: 992px){
  .bgccou-title{ font-size: 22px; }
}
.bgccou-subtitle{
  margin: 0;
  color: var(--bgccou-muted);
  font-size: 13px;
  text-align: center;
}

/* Custom HTML shown under the IPTV title */
.bgccou-under-title{ margin-top: -2px; }
.bgccou-under-title p{ margin: 0; }
.bgccou-under-title a{ color: var(--bgccou-primary); text-decoration: underline; }

/* Custom HTML shown above the IPTV title */
.bgccou-above-title{ margin-bottom: 8px; }
.bgccou-above-title p{ margin: 0; }
.bgccou-above-title a{ color: var(--bgccou-primary); text-decoration: underline; }

.bgccou-section{ margin-top: 16px; }
.bgccou-label{
  font-weight: 800;
  font-size: 13px;
  color: var(--bgccou-text);
  margin-bottom: 10px;
  letter-spacing: .01em;
}

/* =========================
   DEVICE TABS (EAEL-style)
========================= */
.bgccou-tabs-nav{ width:100%; }

.bgccou-tab-inline-icon{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:18px;
  overflow: visible;
}

/* Phone */
@media (max-width: 520px){
  .bgccou-tab-inline-icon{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
  .bgccou-tab-item{
    padding:18px 16px;
    justify-content:flex-start;
    text-align:left;
    min-width:0;
    width:100%;
  }
  .bgccou-tv-icon{ width:40px; height:40px; }
  .bgccou-tab-title{ font-size:20px; }
  .bgccou-tab-price{ font-size:20px; margin-top:8px; }

  .bgccou-tab-inline-icon > .bgccou-tab-item:nth-child(5){
    grid-column: 1 / -1;
    justify-content:center;
    text-align:center;
  }
}

/* Tablet */
@media (min-width: 521px) and (max-width: 991px){
  .bgccou-tab-inline-icon{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap:16px; }
  .bgccou-tab-item{
    padding:18px 14px;
    justify-content:center;
    text-align:center;
    min-height: 86px;
    gap: 10px;
    min-width:0;
    width:100%;
  }
  .bgccou-tv-icon{ width:44px; height:44px; }
  .bgccou-tab-title{ font-size:18px; }
  .bgccou-tab-price{ font-size:16px; margin-top:8px; }

  .bgccou-tab-inline-icon > .bgccou-tab-item:nth-child(5){ grid-column: 1 / -1; }
}

/* Desktop */
@media (min-width: 992px){
  .bgccou-tab-inline-icon{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap:18px; }
  .bgccou-tab-inline-icon > .bgccou-tab-item:nth-child(5){ grid-column: auto; }
  .bgccou-tab-item{ padding:18px 16px; min-height: 86px; gap: 12px; }
  .bgccou-tv-icon{ width:46px; height:46px; }
  .bgccou-tab-title{ font-size:18px; }
  .bgccou-tab-price{ font-size:16px; }
}

.bgccou-tab-item{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
  min-width: 0;
  width: 100%;

  padding: clamp(14px, 1.4vw, 20px) clamp(12px, 1.6vw, 18px);

  border:1px solid var(--bgccou-border);
  border-radius: 14px;
  background: #fff;

  cursor:pointer;
  user-select:none;

  box-shadow: none !important;

  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .08s ease;
  color: #000;
}
.bgccou-tab-item:hover{ border-color: rgba(2,6,23,.16); transform: translateY(-1px); }
.bgccou-tab-item:active{ transform: translateY(0); }
.bgccou-tab-item:focus{ outline:none; }
.bgccou-tab-item:focus-visible{
  box-shadow: 0 0 0 3px var(--bgccou-focus) !important;
  border-color: rgba(2,6,23,.25);
}
.bgccou-tab-item .bgccou-tv-icon,
.bgccou-tab-item svg{
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}
.bgccou-tab-title{ font-weight: 800; }
.bgccou-tab-item.active{
  background: #111;
  border-color: #111;
  color: #fff;
}
.bgccou-tab-item.is-disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* =================================
   DEVICES — FIXED RESPONSIVE RULES
================================= */
.bgccou-devices{
  display: grid;
  gap: clamp(10px, 1.4vw, 14px);
}

/* PHONE (<= 767px): 1..3 + 4/5 (50/50) */
@media (max-width: 767px){
  .bgccou-devices{ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .bgccou-devices > .bgccou-device-btn{ grid-column: span 2 !important; }
  .bgccou-devices > .bgccou-device-btn:nth-child(4),
  .bgccou-devices > .bgccou-device-btn:nth-child(5){ grid-column: span 3 !important; }
}

/* TABLET (768–991): 1..4 + 5 full width */
@media (min-width: 768px) and (max-width: 991px){
  .bgccou-devices{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px;
  }
  .bgccou-devices > .bgccou-device-btn{ grid-column: auto !important; }
  .bgccou-devices > .bgccou-device-btn:nth-child(5){ grid-column: 1 / -1 !important; }
}

/* DESKTOP (>=992): 5 per row */
@media (min-width: 992px){
  .bgccou-devices{
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 18px;
  }
  .bgccou-devices > .bgccou-device-btn{ grid-column: auto !important; }
}

/* =========================
   DURATIONS GRID
========================= */
.bgccou-durations{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
@media (min-width: 520px){
  .bgccou-durations{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* =========================
   UNIFIED CARD STYLE (Devices + Durations)
   White cards + gray border + no shadow
========================= */
.bgccou-device-btn,
.bgccou-duration-btn{
  background: #fff !important;
  border: 1px solid var(--bgccou-card-border) !important;
  box-shadow: none !important;

  border-radius: var(--bgccou-choice-radius) !important;

  transition: border-color .18s ease, background .18s ease, transform .08s ease;
}

/* Hover subtle */
.bgccou-device-btn:hover,
.bgccou-duration-btn:hover{
  border-color: var(--bgccou-card-hover-border) !important;
  transform: translateY(-1px);
}
.bgccou-device-btn:active,
.bgccou-duration-btn:active{
  transform: translateY(0);
}

/* Active card look (same for both) */
.bgccou-device-btn.is-active,
.bgccou-duration-btn.is-active{
  border-color: var(--bgccou-active-border) !important;
  background: var(--bgccou-active-bg) !important;
}

/* =========================
   DEVICE LAYOUT (badge under)
========================= */
.bgccou-device-btn{
  padding: clamp(10px, 1vw, 12px) !important;
  min-height: clamp(64px, 7vw, 78px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-align: center;
  cursor: pointer;
  width: 100%;
}

/* Device text stack */
.bgccou-device-meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  line-height: 1.05;
}
.bgccou-device-count,
.bgccou-device-text{ display:block; }

.bgccou-device-count{
  font-weight: 900;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.05;
  color: var(--bgccou-text);
}
.bgccou-device-text{
  font-size: clamp(13px, 1.5vw, 15px);
  color: var(--bgccou-muted);
  line-height: 1.05;
}

/* Duration label should match Devices text settings */
/* =========================
   DURATION LAYOUT (badge under like device)
========================= */
.bgccou-duration-btn{
  padding: 12px !important;
  min-height: 78px;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  font-weight: 900;
  cursor: pointer;
  gap: 10px;
}
.bgccou-duration-btn .bgccou-chip,
.bgccou-duration-btn .bgccou-chip-green{
  order: 99 !important;
  margin: 0 !important;
  align-self: center !important;
}

/* =========================
   ICON UPDATE (your requested rule)
========================= */
.bgccou-device-ico .bgccou-tv-icon,
.bgccou-device-btn .bgccou-tv-icon,
.bgccou-device-btn svg{
  margin-right: 10px !important;
  max-width: 70% !important;

  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: .95;
}
.bgccou-device-btn svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* =========================
   BADGES — base style (as you set)
========================= */
/* Discount badge (green by default) */
.bgccou-badge{
  order: 99 !important;
  margin: 0 !important;
  align-self: center !important;

  background-color: var(--bgccou-discount-bg) !important;
  color: var(--bgccou-discount-text) !important;

  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;

  font-size: 10px; /* desktop base */
  padding: 4px 10px;
  border-radius: 100px;

  width: fit-content;
  text-align: center;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  white-space: nowrap;
}

/* Most popular badge (yellow by default) */
.bgccou-chip,
.bgccou-chip-green{
  display:inline-flex;

  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;

  font-size: 10px; /* desktop base */
  padding: 4px 10px;
  border-radius: 100px;

  background-color: var(--bgccou-popular-bg) !important;
  color: var(--bgccou-popular-text) !important;

  width: fit-content;
  text-align: center;

  align-items: center;
  justify-content: center;

  line-height: 1;
  white-space: nowrap;
}

/* =========================
   SELECTION THEME — SAME for DEVICE + DURATION (NEW)
   - Text + SVG red
   - Badge red bg + white text
========================= */
.bgccou-device-btn.is-active,
.bgccou-duration-btn.is-active{
  color: var(--bgccou-active-text) !important;
}

/* Make all content red EXCEPT badges */
.bgccou-device-btn.is-active *:not(.bgccou-badge):not(.bgccou-chip):not(.bgccou-chip-green),
.bgccou-duration-btn.is-active *:not(.bgccou-badge):not(.bgccou-chip):not(.bgccou-chip-green){
  color: var(--bgccou-active-text) !important;
}

/* SVG red on active */
.bgccou-device-btn.is-active .bgccou-tv-icon,
.bgccou-device-btn.is-active svg,
.bgccou-duration-btn.is-active svg{
  color: var(--bgccou-active-text) !important;
  fill: var(--bgccou-active-text) !important;
  stroke: var(--bgccou-active-text) !important;
}

/* badges become red with white text on active (same for both) */
.bgccou-device-btn.is-active .bgccou-badge,
.bgccou-duration-btn.is-active .bgccou-badge,
.bgccou-duration-btn.is-active .bgccou-chip,
.bgccou-duration-btn.is-active .bgccou-chip-green{
  background-color: var(--bgccou-active-badge-bg) !important;
  color: var(--bgccou-active-badge-text) !important;
}

/* keep badge text white even if other rules affect it */
.bgccou-device-btn.is-active .bgccou-badge *,
.bgccou-duration-btn.is-active .bgccou-badge *,
.bgccou-duration-btn.is-active .bgccou-chip *,
.bgccou-duration-btn.is-active .bgccou-chip-green *{
  color: var(--bgccou-active-badge-text) !important;
}

/* =========================
   RESPONSIVE BADGE FONT SIZE
========================= */
.bgccou-badge,
.bgccou-chip,
.bgccou-chip-green{
  font-size: 10px; /* keep desktop exactly */
}
@media (max-width: 991px){
  .bgccou-badge,
  .bgccou-chip,
  .bgccou-chip-green{
    font-size: clamp(7px, 1.1vw, 10px) !important;
  }
}
@media (max-width: 520px){
  .bgccou-badge,
  .bgccou-chip,
  .bgccou-chip-green{
    font-size: clamp(6px, 2.2vw, 9px) !important;
  }
}

/* =========================
   SUMMARY / CTA / STATUS
========================= */
.bgccou-summary{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  border: 1px dashed rgba(2,6,23,.18);
  background: var(--bgccou-surface-2);
  border-radius: 16px;
  padding: 14px;
}
.bgccou-summary-title{
  font-size: 11px;
  color: var(--bgccou-muted);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bgccou-summary-line{
  font-size: 13px;
  color: var(--bgccou-text);
  font-weight: 800;
  margin-top: 4px;
}
.bgccou-price{
  font-size: 18px;
  font-weight: 950;
  color: var(--bgccou-text);
}

.bgccou-primary{
  width: 100%;
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 0;

  cursor: pointer;
  font-weight: 950;
  font-size: 14px;

  background: #111;
  color: #fff;

  transition: transform .05s ease, opacity .15s ease;
  box-shadow: none !important;
}
.bgccou-primary:active{ transform: translateY(1px); }
.bgccou-primary[disabled]{ opacity: .7; cursor: not-allowed; }

.bgccou-hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--bgccou-text);
  background: var(--bgccou-surface-2);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 16px;
  padding: 12px 12px;
}
.bgccou-status.is-error{ color: #b91c1c; }
.bgccou-status.is-ok{ color: #065f46; }

/* =========================
   TABLE
========================= */
.bgccou-table-wrap{
  overflow: auto;
  border: 1px solid var(--bgccou-border);
  border-radius: 16px;
  background: #fff;
}
.bgccou-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.bgccou-table th,
.bgccou-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--bgccou-border-soft);
  text-align: left;
  font-size: 13px;
  color: var(--bgccou-text);
}
.bgccou-table thead th{
  background: var(--bgccou-surface-2);
  font-weight: 950;
}
.bgccou-muted{ color: var(--bgccou-muted); font-size: 12px; }

.bgccou-note{ margin-top: 10px; font-size: 12px; color: var(--bgccou-text); }
.bgccou-checkout .woocommerce{ margin-top: 8px; }

.bgccou-stack{ display: flex; flex-direction: column; gap: 18px; }
.bgccou-divider{ height: 1px; background: var(--bgccou-border-soft); margin: 18px 0; }
.bgccou-checkout-title{ font-size: 18px; margin: 0 0 6px; color: var(--bgccou-text); }
.bgccou-checkout-sub{ margin: 0 0 10px; color: var(--bgccou-muted); font-size: 13px; }

/* Hide WooCommerce quantity marker (× 1) */
.bgccou-checkout .product-quantity,
.woocommerce-checkout-review-order .product-quantity,
.woocommerce-checkout-review-order-table .product-quantity,
.woocommerce-cart-form .product-quantity{
  display: none !important;
}


/* ==========================================================
   Full-width checkout sections (Billing / Shipping / Payment / Order)
   ========================================================== */
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout form.checkout{
  width: 100% !important;
  max-width: 100% !important;
}

body.woocommerce-checkout .col2-set,
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2{
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #payment{
  width: 100% !important;
  max-width: 100% !important;
}


/* ==========================================================
   BGCCOU IPTV billing fields moved under Device Info
   ========================================================== */
body.bgc-iptv-mode #bgcdi-billing-move{
  margin-top: 12px;
}
body.bgc-iptv-mode .woocommerce-billing-fields.bgc-billing-moved > h3,
body.bgc-iptv-mode .woocommerce-billing-fields.bgc-billing-moved .woocommerce-billing-fields__field-wrapper{
  display: none !important;
}



body.bgc-iptv-mode #bgcdi-billing-move #billing_first_name_field,
body.bgc-iptv-mode #bgcdi-billing-move #billing_last_name_field{
  flex: 1 1 calc(50% - 6px);
  max-width: calc(50% - 6px);
}

body.bgc-iptv-mode #bgcdi-billing-move #billing_country_field,
body.bgc-iptv-mode #bgcdi-billing-move #billing_email_field,
body.bgc-iptv-mode #bgcdi-billing-move #billing_phone_field{
  flex: 1 1 100%;
  max-width: 100%;
}

@media (max-width: 767px){
  body.bgc-iptv-mode #bgcdi-billing-move{
    gap: 10px;
  }
  body.bgc-iptv-mode #bgcdi-billing-move #billing_first_name_field,
  body.bgc-iptv-mode #bgcdi-billing-move #billing_last_name_field{
    flex: 1 1 100%;
    max-width: 100%;
  }
}


/* IPTV: FIX First/Last name 50/50 on desktop+tablet, stacked on mobile */
body.bgc-iptv-mode #bgcdi-billing-move{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
}

/* Let flex control widths */
body.bgc-iptv-mode #bgcdi-billing-move .form-row{
  width:auto !important;
  margin:0 !important;
}

/* First + Last 50/50 */
body.bgc-iptv-mode #bgcdi-billing-move #billing_first_name_field,
body.bgc-iptv-mode #bgcdi-billing-move #billing_last_name_field{
  flex: 0 0 calc(50% - 6px) !important;
  max-width: calc(50% - 6px) !important;
  width: calc(50% - 6px) !important;
}

/* Others full width */
body.bgc-iptv-mode #bgcdi-billing-move #billing_country_field,
body.bgc-iptv-mode #bgcdi-billing-move #billing_email_field,
body.bgc-iptv-mode #bgcdi-billing-move #billing_phone_field{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

@media (max-width: 767px){
  body.bgc-iptv-mode #bgcdi-billing-move{
    gap:10px !important;
  }
  body.bgc-iptv-mode #bgcdi-billing-move #billing_first_name_field,
  body.bgc-iptv-mode #bgcdi-billing-move #billing_last_name_field{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ==========================================================
   Force container width (theme overrides safe)
========================================================== */
.bgccou-wrap .bgccou-container{
  max-width: 100% !important;
  width: 992px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}


/* ==========================================================
   FORCE LIGHT MODE INSIDE .bgccou-container
   - Keeps checkout UI light even when the theme/site is in dark mode
   ========================================================== */
body .bgccou-container{
  color-scheme: light !important;
  /* Ensure the core palette stays light */
  --bgccou-card-bg: #ffffff !important;
  --bgccou-text: #000000 !important;
  --bgccou-muted: #6b7280 !important;
  --bgccou-border: #e5e7eb !important;
  --bgccou-border-soft: #eef2f7 !important;
  --bgccou-surface-2: #f8fafc !important;
}


/* Ensure headings/legends stay visible (some themes set them to light/transparent in dark mode) */
body .bgccou-container legend,
body .bgccou-container h1,
body .bgccou-container h2,
body .bgccou-container h3,
body .bgccou-container h4,
body .bgccou-container h5,
body .bgccou-container h6,
body .bgccou-container .title{
  color: #000000 !important;
}
/* Theme overrides often target form fields in dark mode; re-assert light inputs */
body .bgccou-container input[type="text"],
body .bgccou-container input[type="email"],
body .bgccou-container input[type="tel"],
body .bgccou-container input[type="number"],
body .bgccou-container input[type="password"],
body .bgccou-container input[type="search"],
body .bgccou-container textarea,
body .bgccou-container select{
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #e5e7eb !important;
}

body .bgccou-container input::placeholder,
body .bgccou-container textarea::placeholder{
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* Select2 (common in Woo themes/plugins) */
body .bgccou-container .select2-container .select2-selection,
body .bgccou-container .select2-container .select2-dropdown{
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #e5e7eb !important;
}
body .bgccou-container .select2-container .select2-selection__rendered{
  color: #000000 !important;
}
body .bgccou-container .select2-container .select2-results__option{
  color: #000000 !important;
}
/* Select2 dropdown is often appended to <body>, so enforce light mode globally on checkout when our layout is used */
body.woocommerce-checkout .bgccou-wrap ~ .select2-container--open .select2-dropdown,
body.woocommerce-checkout .select2-container--open .select2-dropdown{
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #e5e7eb !important;
}
body.woocommerce-checkout .select2-container--open .select2-search__field{
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
}
body.woocommerce-checkout .select2-container--open .select2-results__option{
  background: #ffffff !important;
  color: #000000 !important;
}
body.woocommerce-checkout .select2-container--open .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-container--open .select2-results__option--highlighted[data-selected]{
  background: rgba(0,0,0,.06) !important;
  color: #000000 !important;
}
body.woocommerce-checkout .select2-container--open .select2-results__option[aria-selected="true"]{
  background: rgba(0,0,0,.04) !important;
  color: #000000 !important;
}

/* Payment methods panel (some dark themes force dark backgrounds) */
body .bgccou-container #payment,
body .bgccou-container #payment ul.payment_methods,
body .bgccou-container #payment .payment_box{
  background: #ffffff !important;
  color: #000000 !important;
}
body .bgccou-container #payment ul.payment_methods li label{
  color: #000000 !important;
}

/* WooCommerce field labels (some dark themes force white/hidden labels) */
body .bgccou-container .woocommerce form .form-row label,
body .bgccou-container form.checkout .form-row label,
body .bgccou-container .woocommerce-checkout .form-row label{
  display: block !important;
  color: #000000 !important;
}

body .bgccou-container .woocommerce form .form-row .required,
body .bgccou-container form.checkout .form-row .required{
  color: #000000 !important;
}
body .bgccou-container #payment .payment_box:before{
  border-bottom-color: #ffffff !important;
}



/* ==========================================================
   Coupon toggle + coupon form (keep visible in dark mode)
========================================================== */
body .bgccou-wrap .woocommerce-form-coupon-toggle,
body .bgccou-container .woocommerce-form-coupon-toggle{
  margin: 0 0 14px 0 !important;
}

body .bgccou-wrap .woocommerce-form-coupon-toggle .showcoupon,
body .bgccou-container .woocommerce-form-coupon-toggle .showcoupon{
  color: var(--bgccou-primary) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
}

body .bgccou-wrap form.checkout_coupon,
body .bgccou-container form.checkout_coupon,
body .bgccou-wrap .checkout_coupon,
body .bgccou-container .checkout_coupon{
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #000000 !important;
  border-radius: 14px !important;
}

body .bgccou-wrap form.checkout_coupon input.input-text,
body .bgccou-container form.checkout_coupon input.input-text{
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e5e7eb !important;
}

body .bgccou-wrap form.checkout_coupon button.button,
body .bgccou-container form.checkout_coupon button.button{
  background: var(--bgccou-primary) !important;
  color: #ffffff !important;
  border-color: var(--bgccou-primary) !important;
}


/* Force coupon/login toggle text to black inside bgccou container (light mode) */
body .bgccou-container .woocommerce-form-coupon-toggle > div,
body .bgccou-container .woocommerce-form-login-toggle > div{
  color: #000000 !important;
}



/* Additional information (order notes) under Customize Your Channels */
.bgccou-additional-info{margin-top:14px;}
.bgccou-additional-title{margin:0 0 10px 0;font-size:16px;line-height:1.2;font-weight:800;color:#000 !important;}
.bgccou-additional-info textarea{min-height:96px;}

/* ==========================================================
   Force 100% width for: Additional information, Your order, Payment method
   (keeps bgccou-container light mode)
   ========================================================== */
body .bgccou-container form.checkout{
  display: block !important;
}

body .bgccou-container #customer_details,
body .bgccou-container .woocommerce-checkout-review-order,
body .bgccou-container #order_review,
body .bgccou-container #payment{
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

body .bgccou-container #order_review .woocommerce-checkout-review-order-table,
body .bgccou-container .woocommerce-checkout-review-order-table{
  width: 100% !important;
  max-width: 100% !important;
}

body .bgccou-container #payment ul.payment_methods,
body .bgccou-container #payment .payment_box{
  width: 100% !important;
  max-width: 100% !important;
}

body .bgccou-container .bgccou-additional-info,
body .bgccou-container .bgccou-additional-field,
body .bgccou-container .bgccou-additional-field .form-row{
  width: 100% !important;
  max-width: 100% !important;
}

body .bgccou-container .bgccou-additional-field textarea,
body .bgccou-container .bgccou-additional-field input,
body .bgccou-container .bgccou-additional-field select{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}
/* --- Updated: Duration label emphasis --- */
.bgccou-duration-label b{
  font-weight: 600;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.05;
  color: var(--bgccou-text);
}
/* Boddor badge animations (Primary color only) */
@keyframes boddorImgFade{
  from{opacity:0; transform:translateY(4px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes boddorPrimaryPulseBest{
  0%{
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bgccou-active-badge-bg) 60%, transparent);
  }
  70%{
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--bgccou-active-badge-bg) 0%, transparent);
  }
  100%{
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bgccou-active-badge-bg) 0%, transparent);
  }
}

/* Devices badge – Primary only + pulse */
.bgccou-badge{
  background: var(--bgccou-active-badge-bg) !important;
  color: var(--bgccou-badge-text) !important;
  animation: boddorPrimaryPulseBest 1.4s ease-out infinite;
}

/* Duration badges (chips) – Primary only + pulse */
.bgccou-duration-btn .bgccou-chip{
  background: var(--bgccou-active-badge-bg) !important;
  color: var(--bgccou-badge-text) !important;
  animation: boddorPrimaryPulseBest 1.4s ease-out infinite;
}
/* End Boddor badge animations */


/* Update: normalize button font-weight across themes */
:is(.btn,.button,button,[type=submit],[type=button]){
  font-weight: 600 !important;
}

/* Place order button pill radius */
body.woocommerce-checkout #place_order{
  border-radius: 999px;
}

/* Coupon button pill radius */
body.woocommerce-checkout .woocommerce-form-coupon .button{
  border-radius: 999px;
  color: var(--bgccou-badge-text, #fff) !important;
  background-color: var(--bgccou-primary, #e11d2e) !important;
}


/* Amount color */
body.woocommerce-checkout .amount{ color:#000; }

/* Login/Coupon toggles: link color = Primary */
body.woocommerce-checkout :is(.woocommerce-form-coupon-toggle,.woocommerce-form-login-toggle)>div :is(.showlogin,.showcoupon){
  color: var(--bgccou-primary, #e11d2e) !important;
}