/* -------------------------------------------------------------------------
   Bosileaf Mobile Premium Accessibility Polish
   File: /public_html/bosileaf/public/assets/css/bosileaf_mobile_premium.css
   Purpose: consistent, premium, low-eyesight-friendly mobile UI across Home,
   Shop, Login, Account and Checkout pages.
   ------------------------------------------------------------------------- */

:root{
  --bl-green:#14532d;
  --bl-green-dark:#083f22;
  --bl-green-soft:#eefaf1;
  --bl-gold:#f2c94c;
  --bl-gold-dark:#b88b08;
  --bl-ink:#0b1220;
  --bl-muted:#4b5563;
  --bl-border:rgba(20,83,45,.18);
  --bl-shadow:0 16px 42px rgba(2,6,23,.10);
  --bl-radius:22px;
  --bl-page-pad:16px;
  --bl-touch:56px;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  background:linear-gradient(180deg,#fbfffc 0%,#f2faf5 100%) !important;
  color:var(--bl-ink);
  font-size:17px;
  line-height:1.55;
}

/* ---------------- Global tap/focus comfort ---------------- */
a,button,.btn,input,select,textarea,[role="button"]{
  -webkit-tap-highlight-color:rgba(20,83,45,.14);
}

button,.btn,a.btn,input[type="submit"],input[type="button"]{
  min-height:var(--bl-touch);
  border-radius:18px;
  font-weight:900;
}

input,select,textarea{
  min-height:58px;
  border:2px solid rgba(15,23,42,.16) !important;
  border-radius:18px !important;
  font-size:17px !important;
  font-weight:800;
  color:var(--bl-ink);
  background:#fff;
}

textarea{min-height:132px;}

input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  outline:none !important;
  border-color:var(--bl-green) !important;
  box-shadow:0 0 0 5px rgba(20,83,45,.16) !important;
}

::placeholder{color:#64748b !important;opacity:1;font-weight:800;}

/* ---------------- Header consistency ---------------- */
.site-header,
header,
.header,
.main-header{
  background:#fff !important;
  border-bottom:1px solid rgba(20,83,45,.10);
  box-shadow:0 8px 26px rgba(2,6,23,.05);
}

.site-header img,
header img,
.logo img,
.brand img{
  max-width:220px;
  height:auto;
}

/* Common nav row behaviour. Works with many existing header class names. */
nav a,
.main-nav a,
.header-nav a{
  color:var(--bl-green) !important;
  font-weight:900 !important;
  text-decoration:none !important;
}

/* Cart, feedback, account and logout pills should look from same family. */
a[href*="cart"],
.cart-btn,
.cart-link,
#cartBtn,
#openFeedback,
a[href*="login"],
a[href*="account"],
a[href*="logout"]{
  border-radius:999px;
  font-weight:1000;
  text-decoration:none;
}

/* ---------------- Premium cards common ---------------- */
.card,
.product-card,
.checkout-page .card,
.bl-login-card,
.account-card,
.profile-card,
.summary-card{
  border-radius:var(--bl-radius) !important;
  border:1px solid rgba(20,83,45,.12) !important;
  box-shadow:var(--bl-shadow) !important;
  background:rgba(255,255,255,.98) !important;
}

/* ---------------- Shop/product page improvements ---------------- */
.product-card,
.shop-card,
.shop .card{
  overflow:hidden;
}

.product-card img,
.shop-card img,
.product-image img{
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.product-card h2,
.product-card h3,
.shop-card h2,
.shop-card h3{
  color:var(--bl-ink);
  font-size:clamp(18px,4.5vw,22px);
  line-height:1.28;
  font-weight:1000;
}

.product-card .price,
.shop-card .price,
.price{
  color:#137a3a !important;
  font-size:clamp(22px,5.5vw,28px) !important;
  font-weight:1000 !important;
}

.product-card .btn,
.shop-card .btn,
.product-card button,
.shop-card button{
  min-height:58px;
  font-size:17px;
}

/* ---------------- Checkout/order readability ---------------- */
.checkout-page .pageTitle,
.checkout-page h1,
main h1{
  color:var(--bl-green);
  font-weight:1100;
  letter-spacing:-.4px;
}

.checkout-page label,
label{
  color:var(--bl-green-dark);
  font-weight:1000;
  font-size:16px;
}

.checkout-page .summary-total,
.summary-total,
#sumPayable{
  font-size:24px !important;
  font-weight:1100 !important;
}

.checkout-page #btnPayNow,
#btnPayNow,
button[id*="Pay"],
button[id*="pay"]{
  background:linear-gradient(135deg,#14823d,#0f5f2b) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 16px 32px rgba(20,83,45,.24) !important;
}

/* ---------------- Login/account pages ---------------- */
.bl-login-hero,
.account-hero,
.account-page .hero,
.customer-account-hero{
  border-radius:28px !important;
  background:linear-gradient(135deg,#0e542d,#1f7a3c) !important;
  color:#fff !important;
  box-shadow:var(--bl-shadow);
}

.bl-login-card input,
.bl-login-card button,
.account-card input,
.account-card button{
  font-size:18px !important;
}

/* ---------------- Floating WhatsApp/help and bottom bar ---------------- */
.whatsapp-float,
.whatsapp-button,
.ask-bosileaf,
.chat-widget,
#whatsappFloat,
#askBosileaf{
  z-index:9996 !important;
  border-radius:999px !important;
  box-shadow:0 14px 34px rgba(2,6,23,.20) !important;
}

/* Avoid browser bottom toolbar covering content on mobile Safari/Chrome. */
body{padding-bottom:env(safe-area-inset-bottom);}

/* ---------------- Mobile layout ---------------- */
@media (max-width:768px){
  :root{
    --bl-page-pad:14px;
    --bl-touch:60px;
  }

  body{
    font-size:17px;
    padding-bottom:96px !important;
    overflow-x:hidden;
  }

  body > main,
  .container,
  .shell,
  .checkout-page.shell,
  .shop-page,
  .account-page,
  .bl-login-shell{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding-left:var(--bl-page-pad) !important;
    padding-right:var(--bl-page-pad) !important;
  }

  /* Header should be compact and consistent, not oversized. */
  .site-header,
  header,
  .header,
  .main-header{
    position:relative;
    padding:12px 14px !important;
  }

  .site-header img,
  header img,
  .logo img,
  .brand img{
    max-width:210px !important;
  }

  /* Avoid Screen1 issue where cart becomes huge full-width block. */
  a[href*="cart"],
  .cart-btn,
  .cart-link,
  #cartBtn{
    min-height:52px !important;
    padding:10px 18px !important;
    font-size:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    background:var(--bl-green-soft) !important;
    color:var(--bl-green-dark) !important;
    border:1px solid rgba(20,83,45,.18) !important;
  }

  #openFeedback,
  .feedback-btn,
  a[href*="feedback"]{
    min-height:50px !important;
    font-size:17px !important;
    background:#f6fbf7 !important;
    color:var(--bl-green-dark) !important;
    border:1px solid rgba(20,83,45,.16) !important;
  }

  a[href*="login"],
  a[href*="account"],
  a[href*="logout"]{
    min-height:56px !important;
    font-size:19px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:linear-gradient(180deg,#ffd95d,#f2c23e) !important;
    color:#0d3d22 !important;
    border:2px solid rgba(184,139,8,.75) !important;
  }

  /* Product grid: keep 2 columns where existing design already has it, but prevent cramped text. */
  .products-grid,
  .product-grid,
  .shop-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  .product-card,
  .shop-card{
    border-radius:20px !important;
  }

  .product-card h2,
  .product-card h3,
  .shop-card h2,
  .shop-card h3{
    font-size:18px !important;
    line-height:1.32 !important;
  }

  .product-card .btn,
  .shop-card .btn,
  .product-card button,
  .shop-card button{
    width:100% !important;
    min-height:54px !important;
    font-size:16px !important;
  }

  /* Checkout should be single column on mobile. Screen6 shows two-column fields still too cramped. */
  .checkout-page .grid,
  .checkout-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .checkout-page .row,
  .checkout-page .row-3{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .checkout-page .card-body{
    padding:16px !important;
  }

  .checkout-page input,
  .checkout-page select,
  .checkout-page textarea{
    width:100% !important;
    min-height:62px !important;
    font-size:18px !important;
    box-sizing:border-box !important;
  }

  .checkout-page textarea{min-height:136px !important;}

  .checkout-page label{
    font-size:17px !important;
    margin-top:12px !important;
  }

  .checkout-page .hint,
  .checkout-page .section-note,
  .checkout-page .secure-note{
    font-size:14px !important;
    line-height:1.55 !important;
  }

  .checkout-page .summary{
    position:static !important;
    order:2 !important;
  }

  .checkout-page #btnPayNow{
    min-height:64px !important;
    font-size:19px !important;
    border-radius:20px !important;
  }

  .checkout-page .stack{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .checkout-page .stack input{
    grid-column:1/-1 !important;
    max-width:100% !important;
  }

  .checkout-page .checkline{
    min-height:64px;
    padding:14px !important;
    border-radius:18px !important;
    font-size:16px !important;
  }

  .checkout-page .checkline input{
    width:24px !important;
    height:24px !important;
  }

  /* Footer and newsletter should not be hidden by mobile browser bottom bar. */
  footer,
  .footer,
  .site-footer{
    padding-bottom:120px !important;
  }
}

@media (max-width:430px){
  .products-grid,
  .product-grid,
  .shop-grid{
    grid-template-columns:1fr !important;
  }

  .site-header img,
  header img,
  .logo img,
  .brand img{
    max-width:190px !important;
  }

  .product-card h2,
  .shop-card h2,
  .product-card h3,
  .shop-card h3{
    font-size:20px !important;
  }
}