/*
 * MediShop — Global Overflow & Alignment Guard
 * Loads LAST in the cascade. Fixes the root cause of horizontal
 * scrolling on mobile (CSS Grid/Flex children ignoring container
 * width) and locks header/footer alignment across all breakpoints.
 */

/* ============================================================
   1. HARD STOP — prevent the page from EVER scrolling sideways
   ============================================================ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Belt-and-braces: anything that slips past component-level fixes
   gets clipped at the document level rather than creating a
   horizontal scrollbar. */
#page, .site, #main, main {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ============================================================
   2. THE ROOT CAUSE FIX — CSS Grid/Flex children must be allowed
   to shrink below their content's natural size, or they will
   force their parent (and the whole page) wider than the
   viewport. This is the #1 cause of mobile horizontal scroll.
   ============================================================ */
.single-product-layout > *,
.products-grid > *,
.categories-grid > *,
.shop-layout > *,
.cart-layout > *,
.checkout-layout > *,
.account-layout > *,
.co-layout > *,
.header-inner > *,
.footer-widgets > *,
.trust-items > *,
.promo-grid > *,
.testimonials-grid > *,
.blog-grid > * {
  min-width: 0;
}

/* Apply the same rule to flex rows site-wide */
.header-inner,
.product-add-cart,
.product-actions-row,
.co-field-row,
.hero-actions,
.hero-trust,
nav ul,
.breadcrumb {
  min-width: 0;
}

/* ============================================================
   3. SINGLE PRODUCT PAGE — definitive, single source of truth
   This overrides any conflicting rules from other CSS files for
   .single-product-layout at every breakpoint, using one
   consistent set of rules instead of three overlapping ones.
   ============================================================ */
.single-product-layout {
  display: grid;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1025px) {
  .single-product-layout {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 48px;
  }
}

@media (max-width: 1024px) {
  .single-product-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 28px 0;
  }
}

/* Gallery must never exceed its grid cell */
.product-gallery,
.gallery-main,
.gallery-track,
.gallery-slide {
  max-width: 100%;
  width: 100%;
}
.gallery-slide img {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Thumbnails strip: scroll INSIDE itself, never push the page */
.gallery-thumbs {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Product info column must wrap text, never force width */
.product-info {
  max-width: 100%;
  min-width: 0;
}
.product-info * {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ============================================================
   4. ADD-TO-CART ROW — guaranteed to fit on any screen ≥320px
   ============================================================ */
.product-add-cart {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}
.quantity-wrap,
.btn-add-cart,
.btn-buy-now {
  max-width: 100%;
}

@media (max-width: 360px) {
  .quantity-wrap { flex: 1 1 100%; justify-content: center; }
  .btn-add-cart   { flex: 1 1 100%; }
  .btn-buy-now    { flex: 1 1 100%; }
}

/* ============================================================
   5. ACTION BUTTONS ROW — never overflow regardless of count
   ============================================================ */
.product-actions-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  gap: 8px;
}
.product-actions-row .btn {
  min-width: 0;
  width: 100%;
}

/* ============================================================
   6. HEADER — locked alignment across all breakpoints
   ============================================================ */
#medishop-header,
.header-inner {
  width: 100%;
  max-width: 100%;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 1024px) {
  .header-search {
    max-width: 100%;
    flex: 1 1 auto;
  }
  .search-category { min-width: 0; max-width: 110px; }
}

@media (max-width: 768px) {
  .header-inner {
    gap: 12px;
    padding: 10px var(--container-pad, 16px);
  }
  .header-logo  { flex: 0 0 auto; }
  .header-icons { flex: 0 0 auto; gap: 4px; }
  .mobile-menu-toggle { flex: 0 0 auto; }
  .header-search {
    order: 4;
    flex-basis: 100%;
    max-width: 100%;
  }
  .search-category { max-width: 96px; font-size: 0.78rem; }
  .search-input { min-width: 0; }
}

@media (max-width: 400px) {
  .search-category { display: none; }
  .search-form { border-radius: var(--radius); }
}

/* Ensure container itself never exceeds viewport */
.container {
  width: 100%;
  max-width: 1280px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
@media (max-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
  .container { padding-left: 14px; padding-right: 14px; }
}

/* ============================================================
   7. BREADCRUMB BAR — full-width background, contained content
   ============================================================ */
.breadcrumb-bar {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.breadcrumb {
  max-width: 100%;
  flex-wrap: wrap;
  word-break: break-word;
}

/* ============================================================
   8. FOOTER — locked grid alignment across breakpoints
   ============================================================ */
#medishop-footer,
.footer-widgets,
.footer-bottom-inner {
  width: 100%;
  max-width: 100%;
}

.footer-widgets {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-widgets > * { min-width: 0; }

@media (max-width: 1200px) {
  .footer-widgets { grid-template-columns: 1.5fr 1fr 1fr; }
}
@media (max-width: 1024px) {
  .footer-widgets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .footer-widgets {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 36px 0 24px;
  }
  .footer-widget:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-widgets {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 0 16px;
  }
  .footer-widget:first-child { grid-column: auto; }
}

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
@media (max-width: 600px) {
  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* Footer links/social: wrap instead of overflow */
.footer-bottom-links,
.social-links {
  flex-wrap: wrap;
  max-width: 100%;
}

/* ============================================================
   9. STICKY CART BAR — never wider than viewport
   ============================================================ */
.sticky-cart-bar {
  width: 100%;
  max-width: 100vw;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

/* ============================================================
   10. ANY TABLE-BASED CONTENT — contained horizontal scroll only
   ============================================================ */
table {
  max-width: 100%;
}
.shop_table,
.cart-table,
.compare-table,
.wishlist-table,
table.shop_attributes {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* .vpt-table is intentionally excluded above — it has its own
   dedicated responsive treatment in price-table-responsive.css
   (table on desktop/tablet, card layout on mobile). Forcing
   display:block here would break that card layout. */
.vpt-table-wrap {
  max-width: 100%;
}

/* ============================================================
   11. IMAGES & MEDIA — universal guard
   ============================================================ */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   12. LONG WORDS / URLS — prevent unbroken strings forcing width
   ============================================================ */
p, span, a, li, td, th, div {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ============================================================
   CHECKOUT — TERMS CHECKBOX
   ============================================================ */
.co-terms-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
}
.co-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.co-terms-check {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  margin-top: 1px;
  flex-shrink: 0;
  cursor: pointer;
}
.co-terms-label a { color: var(--primary); }
.co-terms-label a:hover { text-decoration: underline; }
.co-terms-label abbr { color: #DC3545; text-decoration: none; }

/* ============================================================
   WOOCOMMERCE NATIVE PAYMENT BLOCK — styled to match MediShop
   The do_action('woocommerce_checkout_payment') hook outputs:
   #payment > ul.wc_payment_methods > li.wc_payment_method
   We style this to look identical to our original custom design.
   ============================================================ */

/* Remove default WC payment block chrome */
#payment {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Payment methods list — remove bullets, margin, padding */
#payment ul.wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each payment method — styled as a selectable card */
#payment ul.wc_payment_methods li.wc_payment_method {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s ease;
  background: var(--white);
}
#payment ul.wc_payment_methods li.wc_payment_method:hover {
  border-color: rgba(45,169,92,0.4);
}

/* The radio + label row */
#payment ul.wc_payment_methods li.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--secondary);
  margin: 0;
  width: 100%;
}

/* Radio button */
#payment ul.wc_payment_methods li input[type="radio"] {
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

/* Gateway icon images */
#payment ul.wc_payment_methods li.wc_payment_method img {
  height: 24px;
  width: auto;
  vertical-align: middle;
  margin-left: auto;
  max-width: 80px;
}

/* Selected state */
#payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--primary);
  background: rgba(45,169,92,0.03);
}

/* Fallback for browsers that don't support :has() */
#payment ul.wc_payment_methods li.wc_payment_method.payment-method-selected {
  border-color: var(--primary);
  background: rgba(45,169,92,0.03);
}

/* Payment box — the card fields / description that appear below label */
#payment .payment_box {
  padding: 14px 16px;
  background: var(--light-bg);
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
#payment .payment_box p:last-child { margin-bottom: 0; }

/* Card input fields inside payment box (Stripe/Razorpay/etc.) */
#payment .payment_box input[type="text"],
#payment .payment_box input[type="tel"],
#payment .payment_box input[type="number"],
#payment .payment_box select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 10px;
  font-family: 'Inter', sans-serif;
}
#payment .payment_box input:focus,
#payment .payment_box select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(45,169,92,0.1);
}

/* Card field grid: number full width, expiry+cvv side by side */
#payment .payment_box .form-row {
  margin-bottom: 12px;
}
#payment .payment_box .form-row-wide { width: 100%; }
#payment .payment_box .form-row-first,
#payment .payment_box .form-row-last {
  display: inline-block;
  width: calc(50% - 6px);
}
#payment .payment_box .form-row-first { margin-right: 12px; }

/* Card icons row (Stripe shows card brand icons) */
#payment .payment_box .stripe-card-brand,
#payment .payment_box .wc-credit-card-form-card-number { position: relative; }

/* Terms & Conditions — WC outputs inside #payment */
#payment .woocommerce-terms-and-conditions-wrapper {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
#payment .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.5;
}
#payment .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  margin-top: 1px;
  flex-shrink: 0;
}
#payment .woocommerce-terms-and-conditions-wrapper a {
  color: var(--primary);
}
#payment .woocommerce-terms-and-conditions-wrapper a:hover {
  text-decoration: underline;
}

/* The Place Order button — WC outputs #place_order inside #payment */
#payment #place_order,
#payment .button.alt,
#payment button[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px !important;
  background: var(--primary) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  margin-top: 16px;
  gap: 10px;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(45,169,92,0.3);
}
#payment #place_order:hover,
#payment .button.alt:hover {
  background: var(--primary-hover) !important;
  box-shadow: 0 6px 24px rgba(45,169,92,0.4) !important;
  transform: translateY(-1px);
}
#payment #place_order i {
  font-size: 1rem;
}

/* Security note WC sometimes outputs below the button */
#payment .about_paypal,
#payment .woocommerce-privacy-policy-text {
  font-size: 0.76rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 10px;
}

/* Remove WC's default grey background on the payment section */
.woocommerce-checkout #payment {
  background: transparent;
}

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 480px) {
  #payment ul.wc_payment_methods li.wc_payment_method > label {
    padding: 12px 14px;
    font-size: 0.85rem;
  }
  #payment .payment_box { padding: 12px 14px; }
  #payment .payment_box .form-row-first,
  #payment .payment_box .form-row-last {
    display: block;
    width: 100%;
  }
  #payment .payment_box .form-row-first { margin-right: 0; }
  #payment #place_order { padding: 14px 18px !important; font-size: 0.92rem !important; }
}

/* ============================================================
   SEARCH DROPDOWN — must escape the `overflow-x: hidden` guards
   above so it isn't clipped when it extends below the header.
   Uses position:fixed set via JS below (see main.js), so we only
   need to raise its z-index and make sure the header stacking
   context doesn't trap it.
   ============================================================ */
.search-results-dropdown { z-index: 9999 !important; }

/* Header must not create a new stacking context that clips the
   dropdown. Removing any inherited overflow-y clipping. */
#medishop-header,
.header-inner,
.header-search,
.search-form { overflow: visible !important; }