/*
Theme Name: twentytwentyfive (WaterSell)
Theme URI: https://watersell.example
Author: WaterSell
Version: 1.0.0
Text Domain: twentytwentyfive
Description: WaterSell branded theme for bottled-water delivery across Pakistan. Responsive, accessible, production-ready.
*/

:root{
  --ws-deep-blue: #035388;
  --ws-aqua: #00B7D8;
  --ws-teal: #007C91;
  --ws-white: #FFFFFF;
  --ws-dark: #0B2B3A;
  --ws-muted: #6b7c85;
  --container-max: 1200px;
  --container-pad: 1rem;
  --base-radius: 12px;
  --card-elev: 0 12px 36px rgba(11,43,58,0.06);
  --focus-ring: 0 0 0 4px rgba(0,183,216,0.12);
  --btn-padding: 0.65rem 1.1rem;
  --max-page-width: 1100px;
  --type-sans: Inter, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--type-sans);background:var(--ws-white);color:var(--ws-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--ws-aqua);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max-page-width);margin:0 auto;padding:var(--container-pad)}

/* Header / Navigation */
.site-header{position:sticky;top:0;z-index:80;background:linear-gradient(180deg,rgba(255,255,255,0.98),#fbfdff);border-bottom:1px solid rgba(11,43,58,0.04);backdrop-filter:blur(4px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.9rem 0}
.site-brand{display:flex;align-items:center;gap:.6rem}
.site-brand .logo{font-weight:800;color:var(--ws-deep-blue);font-size:1.15rem;text-decoration:none}
.site-brand .tag{font-size:.85rem;color:var(--ws-muted)}
.watersell-nav{display:flex;gap:0.6rem;align-items:center}
.watersell-nav a{color:var(--ws-dark);padding:.45rem .7rem;border-radius:10px;font-weight:600}
.watersell-nav a:hover{background:rgba(3,83,136,0.06)}
.watersell-nav-toggle{display:none;border:0;background:transparent;font-size:1.3rem;padding:.35rem}
.header-right{display:flex;gap:.5rem;align-items:center}

/* Hero */
.hero{padding:2rem 0}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem;border-radius:12px;background:linear-gradient(135deg,var(--ws-deep-blue),var(--ws-aqua));color:var(--ws-white)}
.hero h1{margin:0;font-size:clamp(1.6rem,6vw,3.2rem);line-height:1.05}
.hero p.lead{margin:.8rem 0;opacity:.98;font-size:1.05rem}
.hero .hero-cta{margin-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--btn-padding);border-radius:10px;border:0;cursor:pointer;font-weight:700}
.btn-primary{background:var(--ws-deep-blue);color:var(--ws-white)}
.btn-accent{background:var(--ws-aqua);color:var(--ws-dark)}
.btn-ghost{background:transparent;border:1px solid rgba(11,43,58,0.06);color:var(--ws-dark)}
.btn:focus{box-shadow:var(--focus-ring);outline:none}

/* Product grid & cards */
.grid{display:grid;gap:1rem}
.product-grid{grid-template-columns:repeat(3,1fr)}
.product-card{background:var(--ws-white);border-radius:var(--base-radius);overflow:hidden;box-shadow:var(--card-elev);display:flex;flex-direction:column}
.product-card .media{height:220px;background:#f4f8fb;display:flex;align-items:center;justify-content:center}
.product-card .media img{width:120px;height:120px;object-fit:contain}
.card-body{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.product-title{font-weight:700;color:var(--ws-deep-blue)}
.product-meta{display:flex;gap:.5rem;align-items:center}
.badge{display:inline-block;padding:.25rem .5rem;border-radius:999px;background:var(--ws-aqua);color:var(--ws-dark);font-size:.85rem}
.price{font-weight:800;color:var(--ws-deep-blue);font-size:1.05rem}

/* Product labels / badges */
.label-premium{background:var(--ws-teal);color:var(--ws-white)}
.label-new{background:var(--ws-aqua);color:var(--ws-dark)}

/* Pricing table */
.pricing-table{width:100%;border-collapse:collapse;margin-top:.75rem}
.pricing-table th,.pricing-table td{border:1px solid rgba(11,43,58,0.06);padding:.6rem;text-align:left;font-size:.95rem}
.pricing-table thead th{background:#fbfdff;font-weight:700}

/* Delivery / cities */
.cities{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.city{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-radius:8px;background:rgba(3,83,136,0.06);color:var(--ws-dark);font-weight:600}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.testimonial{background:#fff;border-radius:10px;padding:1rem;box-shadow:0 6px 20px rgba(11,43,58,0.04)}

/* Forms & Contact */
.contact-form{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}
.contact-form .full{grid-column:1/-1}
input,textarea,select{padding:.6rem;border:1px solid rgba(11,43,58,0.08);border-radius:8px}

/* Footer */
.site-footer{background:#f7fbfc;padding:2rem 0;border-top:1px solid rgba(11,43,58,0.04)}
.footer-cols{display:flex;gap:1rem;flex-wrap:wrap}
.footer-col{flex:1;min-width:200px}

/* Utilities */
.text-center{text-align:center}
.muted{color:var(--ws-muted)}

/* Responsive breakpoints */
@media (max-width:1000px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .container{padding:.75rem}
  .watersell-nav{display:none}
  .watersell-nav-toggle{display:inline-flex}
  .product-grid{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .hero-inner{padding:1.2rem}
  .testimonials{grid-template-columns:1fr}
}

/* Accessibility focus */
:where(a,button,input,select):focus{outline:3px solid rgba(0,183,216,0.12);outline-offset:2px}