/*
 * DrugsGeneral — Mobile Responsiveness Fix
 * Addresses two issues:
 *   1. OTP login page left-panel trust block on mobile
 *   2. My Account page layout on small screens
 *
 * Load after main.css (enqueue with priority 20).
 */

/* ══════════════════════════════════════════════════════════════
   OTP LOGIN PAGE — MOBILE (<600px)
   ══════════════════════════════════════════════════════════════ */

/* On mobile the trust panel (left) is hidden to save vertical space;
   the OTP form (right) shows first (order:1 already set). */
@media (max-width: 599px) {
  /* Collapse trust panel on mobile — shows below form at reduced height */
  .dg-login-left {
    padding: 18px 20px !important;
    gap: 12px !important;
  }

  /* Hide trust pillars on mobile — keep brand + Trustpilot only */
  .dg-ll-pillars {
    display: none !important;
  }

  .dg-ll-headline {
    font-size: 17px !important;
    margin-bottom: 4px !important;
  }

  .dg-ll-sub {
    font-size: 12px !important;
    margin-bottom: 0 !important;
  }

  /* Right panel: full padding */
  .dg-login-right {
    padding: 24px 20px !important;
  }

  .dg-lr-title { font-size: 19px !important; }
  .dg-lr-sub   { font-size: 13px !important; }

  /* Email + button: stack vertically on small phones */
  .dg-otp-input-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .dg-lr-input   { width: 100% !important; height: 44px !important; }
  .dg-lr-send-btn{ width: 100% !important; height: 44px !important; }

  /* Trust chips: wrap neatly */
  .dg-lr-chips   { flex-wrap: wrap !important; gap: 6px !important; }
  .dg-lr-chip    { font-size: 10.5px !important; }
}

/* ══════════════════════════════════════════════════════════════
   MY ACCOUNT PAGE — MOBILE LAYOUT
   ══════════════════════════════════════════════════════════════ */

/* Prevent the sidebar from having extra top margin on mobile */
@media (max-width: 767px) {
  body.woocommerce-account .dg-account-wrap {
    padding: 12px 14px 80px !important;
    gap: 12px !important;
  }

  /* Sidebar: compact on mobile */
  body.woocommerce-account .dg-account-sidebar {
    border-radius: 10px;
    overflow: hidden;
  }

  /* Profile block: horizontal on mobile */
  .dg-account-profile {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }

  .dg-account-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
  }

  .dg-account-profile-info strong { font-size: 14px !important; }
  .dg-account-profile-info span   { font-size: 11.5px !important; }
  .dg-account-profile-info small  { font-size: 10.5px !important; }

  /* Stats: side by side */
  .dg-account-stats {
    flex-direction: row !important;
    padding: 10px 16px !important;
    gap: 0 !important;
  }

  .dg-account-stat { flex: 1; text-align: center; }

  /* Nav: horizontal scrollable row on mobile */
  .dg-account-nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px !important;
    gap: 4px !important;
    scrollbar-width: none !important; /* Firefox */
  }
  .dg-account-nav::-webkit-scrollbar { display: none; }

  .dg-account-nav-item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    gap: 5px !important;
  }

  .dg-account-nav-item.active {
    border-left-color: transparent !important;
    border-bottom-color: var(--navy) !important;
    background: var(--bg2) !important;
  }

  /* Trust block: hide on mobile (saves space) */
  .dg-account-trust { display: none !important; }

  /* WC content wrapper: ensure no overflow */
  body.woocommerce-account .dg-account-wc-content {
    padding: 14px 14px !important;
    overflow-x: hidden !important;
  }

  /* WC tables: scroll horizontally */
  body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__wrapper,
  body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    width: 100% !important;
  }

  /* Greeting block: responsive */
  body.woocommerce-account .dg-account-wc-content [style*="flex-wrap: wrap"],
  body.woocommerce-account div[style*="display:flex"] {
    flex-wrap: wrap !important;
  }

  /* Edit Account / Address forms: full width inputs */
  .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-last,
  .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-first,
  .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-last {
    width: 100% !important;
    float: none !important;
  }

  /* Reorder grid: 2 columns on small screens */
  .dg-account-reorder-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .dg-reorder-card {
    padding: 10px !important;
  }

  /* Recent order rows */
  .dg-recent-order-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .dg-order-btn-sm {
    flex: 1 !important;
    justify-content: center !important;
    min-width: 80px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   VERY SMALL SCREENS (<380px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  body.woocommerce-account .dg-account-wrap {
    padding: 10px 10px 80px !important;
  }

  .dg-account-reorder-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .dg-account-nav-item {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
  }

  /* OTP boxes already handled by dg-account-patch.css @380px rule */
}

/* ══════════════════════════════════════════════════════════════
   ACCOUNT DETAILS FORM — OTP email verified badge
   ══════════════════════════════════════════════════════════════ */

/* The email field in edit-account is editable but marked as OTP-verified.
   Style the verified note consistently. */
.woocommerce-EditAccountForm .account-email-otp-note {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6b7280;
  margin-top: 5px;
}

/* ══════════════════════════════════════════════════════════════
   RETURNING CUSTOMER / WELCOME BAR — COMPACT ON MOBILE
   Issue: bar was too tall/large on mobile (Image 2 screenshot)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #dg-rb {
    padding: 8px 48px 8px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  #dg-rb-badge {
    font-size: 10px !important;
    padding: 2px 8px !important;
    flex-shrink: 0 !important;
    display: none !important; /* hide badge on mobile to save space */
  }
  #dg-rb-title {
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #dg-rb-sub {
    font-size: 10px !important;
    display: none !important; /* hide subtitle on mobile — too much text */
  }
  #dg-rb-cta {
    padding: 6px 12px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }
  #dg-rb-copy {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }
  #dg-rb-dismiss {
    right: 8px !important;
    font-size: 18px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT CARD — UNIFORM HEIGHT & CONSISTENT STYLING ON SHOP
   Issue: product cards on archive/shop page were inconsistent
   with other page card styles (Image 3 screenshot)
   ══════════════════════════════════════════════════════════════ */
/* Force uniform card height in shop grid */
.woocommerce ul.products .dg-product-card,
.dg-product-grid .dg-product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.woocommerce ul.products .dg-product-card .dg-product-img,
.dg-product-grid .dg-product-card .dg-product-img {
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

.woocommerce ul.products .dg-product-card .dg-product-img img,
.dg-product-grid .dg-product-card .dg-product-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.woocommerce ul.products .dg-product-card .dg-product-body,
.dg-product-grid .dg-product-card .dg-product-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 12px 12px !important;
}

.woocommerce ul.products .dg-product-card .dg-product-actions,
.dg-product-grid .dg-product-card .dg-product-actions {
  margin-top: auto !important;
}

/* Normalize shop page product list to match rest of theme */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin: 0 !important;
}

@media (min-width: 600px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

@media (min-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Reset WC default li styling that breaks card layout */
.woocommerce ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   CART DRAWER — PATIENT RELIEF FUND & TIP SECTION STYLING
   Issue: section appeared unstyled/raw (Image 4 screenshot)
   ══════════════════════════════════════════════════════════════ */

/* Patient Relief Fund wrapper — styled card */
.dg-donation-wrap {
  margin: 10px 14px 0 !important;
  background: linear-gradient(135deg, #fff8f0 0%, #fff 100%) !important;
  border: 1.5px solid #FFD0A8 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color .18s !important;
}
.dg-donation-wrap:focus-within {
  border-color: #FF6B35 !important;
}
.dg-donation-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 13px !important;
}
.dg-donation-icon-wrap {
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #FFF3E0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #FFD0A8 !important;
}
.dg-donation-title {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #1C1C1E !important;
  line-height: 1.25 !important;
}
.dg-donation-sub {
  display: block !important;
  font-size: 10.5px !important;
  color: #6B7280 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  line-height: 1.4 !important;
}
.dg-donation-check-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.dg-donation-amount {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #374151 !important;
  white-space: nowrap !important;
}
.dg-donation-checkbox-outer {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  border: 2px solid #D1D5DB !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: border-color .18s, background .18s !important;
}
.dg-donation-checkbox-outer.dg-donation-checked {
  border-color: #16A34A !important;
  background: #16A34A !important;
}

/* Tip section — proper card styling */
.dg-tip-wrap {
  margin: 10px 14px 0 !important;
  background: #fffdf5 !important;
  border: 1.5px solid #FDE68A !important;
  border-radius: 14px !important;
  padding: 12px 14px 10px !important;
}
.dg-tip-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.dg-tip-heart {
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.dg-tip-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #1C1C1E !important;
  display: block !important;
}
.dg-tip-sub {
  font-size: 10.5px !important;
  color: #6B7280 !important;
  display: block !important;
  margin-top: 1px !important;
}
.dg-tip-chips {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
.dg-tip-chip {
  flex: 1 !important;
  border-radius: 10px !important;
  border: 1.5px solid transparent !important;
  padding: 7px 4px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  font-family: inherit !important;
  position: relative !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
}
.dg-tip-chip-emoji {
  font-size: 15px !important;
  line-height: 1 !important;
}
.dg-tip-chip-amt {
  font-size: 11.5px !important;
  font-weight: 700 !important;
}
.dg-tip-popular {
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #F59E0B !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  white-space: nowrap !important;
  letter-spacing: .3px !important;
}

/* Mobile — make chips smaller */
@media (max-width: 380px) {
  .dg-tip-chips { gap: 4px !important; }
  .dg-tip-chip { padding: 6px 2px !important; }
  .dg-tip-chip-amt { font-size: 10.5px !important; }
  .dg-tip-chip-emoji { font-size: 13px !important; }
}

/* ══════════════════════════════════════════════════════════════
   FIX: DOUBLE TOAST ON MOBILE
   On mobile, only the sticky cart bar shows (bottom bar).
   The floating toast is desktop-only. The minified JS has a
   regression where the mobile guard was dropped — this CSS fix
   ensures it never appears on small screens regardless.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #dg-cart-toast {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   CLEAN THEME REFRESH — MOBILE NOTIFICATIONS & PRODUCT CARDS
   v99.14 — Applied on top of main.css
   ══════════════════════════════════════════════════════════════ */

/* ── Sticky Cart Bar (mobile "Added to Cart") — cleaner design ── */
.dg-sticky-cart-bar {
  position: fixed;
  bottom: var(--mobile-bottom-nav-h, 62px);
  left: 0; right: 0;
  z-index: 200;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 12px calc(var(--mobile-bottom-nav-h, 62px) * -1 + 8px);
  bottom: calc(var(--mobile-bottom-nav-h, 62px) + 6px);

  background: #fff;
  border: 1.5px solid #E0F5F1;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 130, 150, .16), 0 2px 6px rgba(0,0,0,.07);
  animation: dg-bar-pop .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--ink, #0F1111);
}

@keyframes dg-bar-pop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

.dg-sticky-cart-bar.show { display: flex; }

/* Product thumbnail inside sticky bar */
.dg-sticky-cart-bar::before {
  content: '';
  width: 10px; height: 10px;
  background: #22C55E;
  border-radius: 50%;
  flex-shrink: 0;
}

.dg-sticky-cart-bar-info {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0F1111);
  line-height: 1.3;
}

.dg-sticky-cart-bar-info strong {
  display: block;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dg-sticky-cart-bar-info span {
  display: block;
  font-size: 11px;
  color: #22C55E;
  font-weight: 600;
}

.dg-sticky-cart-bar-btn {
  background: var(--navy, #008296);
  color: #fff !important;
  border: none !important;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .01em;
  transition: background .15s, transform .1s;
}

.dg-sticky-cart-bar-btn:active { transform: scale(.97); }

/* ── Desktop toast — cleaner ── */
#dg-cart-toast {
  position: fixed;
  bottom: 28px;
  right: 20px;
  left: auto;
  width: 340px;
  max-width: calc(100vw - 32px);
  z-index: 99999;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

#dg-cart-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dg-ct-inner {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1.5px solid #E0F5F1;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 36px rgba(0,130,150,.15), 0 2px 6px rgba(0,0,0,.06);
}

.dg-ct-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #22C55E;
}

.dg-ct-name {
  font-size: 13px;
  font-weight: 600;
  color: #0F1111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.dg-ct-price { font-size: 12px; color: var(--navy, #008296); font-weight: 700; }

.dg-ct-btn {
  display: inline-block;
  background: var(--navy, #008296);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .01em;
  transition: opacity .15s;
}

.dg-ct-close {
  background: none;
  border: none;
  font-size: 17px;
  color: #9CA3AF;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color .12s;
  line-height: 1;
}

.dg-ct-close:hover { color: #374151; }

/* ── Hide toast on mobile (sticky bar handles it) ── */
@media (max-width: 767px) {
  #dg-cart-toast { display: none !important; }
}

/* ── Buy Again product cards — cleaner, less cluttered ── */
.dg-product-card {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #E8EDEF;
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s, transform .15s;
}

.dg-product-card:hover {
  box-shadow: 0 6px 20px rgba(0,130,150,.11);
  border-color: #B2DEDE;
  transform: translateY(-1px);
}

/* ATC buttons on product cards */
.dg-ajax-atc {
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  transition: background .15s, transform .1s, opacity .15s !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.dg-ajax-atc:active { transform: scale(.98) !important; }

/* ── Mobile bottom nav — subtle refinement ── */
.dg-bottom-nav {
  border-top: 1.5px solid #E8EDEF;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dg-bottom-nav-item.active .dg-bottom-nav-icon {
  color: var(--navy, #008296);
}

/* ── Cart drawer — faster perceived load ── */
#dg-cart-body {
  transition: opacity .18s ease;
}

/* ── Checkout page — reduce visual noise ── */
@media (max-width: 767px) {
  .dgco-wrap {
    padding-top: 8px !important;
  }
}