/* Minimal styles for the single-page marketing site, mobile-first */
:root{--primary:#6a1b9a;--accent:#ff3b30;--dark:#111;--muted:#f5f6fa;--green:#1fae4b}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#222;background:#fff}
a{color:inherit;text-decoration:none}
.container{max-width:960px;margin:0 auto;padding:0 14px}
.header{position:fixed;top:0;left:0;right:0;height:60px;background:#fff;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;padding:0 12px;z-index:1000}
.brand{font-size:32px;font-weight:900;letter-spacing:4px}
.menu-btn{width:36px;height:36px;border:none;background:transparent;display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer}
.menu-btn span{display:block;width:24px;height:2px;background:#111;border-radius:2px}
.menu-close{border:none;background:transparent;font-size:28px;cursor:pointer}
.cart-icon{font-size:20px}
body{padding-top:60px}
img,svg,video{max-width:100%;height:auto}

/* Big gradient CTA strip above the form */
.cta-strip{display:block;background:linear-gradient(90deg,#5f7cf7,#f26db0);color:#fff;text-align:center;padding:16px 56px;border-radius:10px;font-weight:800;font-size:22px;letter-spacing:.5px;margin:14px 0;position:relative;box-shadow:0 6px 20px rgba(95,124,247,.25);}
.cta-strip .icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:28px}


.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{display:none;position:fixed;top:0;left:0;height:100vh;width:78%;max-width:380px;background:#fff;transform:translateX(-100%);transition:transform .2s;z-index:1100;box-shadow:2px 0 16px rgba(0,0,0,.15);padding:12px;overflow:auto;-webkit-overflow-scrolling:touch}
.drawer.open{transform:translateX(0)}
.drawer-nav{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.drawer-nav a{font-weight:700}
.hero{background:#000;color:#fff;text-align:center;padding:20px 10px}
.hero h1{font-size:28px;margin:6px 0}
.badge{display:inline-block;background:#000;color:#fff;padding:10px 12px;border-radius:4px;font-weight:700}


/* Respect iOS/Android safe areas */
@supports(padding:max(0px)){
  body{padding-top:calc(60px + env(safe-area-inset-top));padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .drawer{padding-top:calc(12px + env(safe-area-inset-top))}
}

/* iOS Safari viewport height fix */
@supports (height: 100dvh){
  .drawer{height:100dvh}
}


/* Agreement card next to checkbox */
.agreement {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0;
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    flex-direction: column;
}
.agreement input[type="checkbox"]{margin-top:4px;-webkit-appearance:none;appearance:none;width:22px;height:22px;border:3px solid #000;background:#fff;border-radius:3px;position:relative;cursor:pointer}
.agreement input[type="checkbox"]:checked::after{content:"";position:absolute;left:6px;top:1px;width:6px;height:12px;border:3px solid #000;border-top:0;border-left:0;transform:rotate(45deg)}
.agreement .box{flex:1;background:#e9f7f3;border:2px solid #bfe6dc;border-radius:10px;padding:12px 14px}
.agreement .box .title{font-weight:800;color:#2e4840}
.agreement .box .sub{font-size:13px;color:#6b7d76;margin-top:4px}

/* WhatsApp button */
.wa-btn{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:14px 18px;border-radius:10px;font-weight:800;text-decoration:none;box-shadow:0 6px 16px rgba(37,211,102,.25)}
.wa-btn .wa-ico{width:22px;height:22px;display:inline-block}
.wa-cta{display:flex;justify-content:center;margin:16px 0}

.bundle{border:2px solid #e5f5f1;background:#effaf7;border-radius:12px;padding:16px;margin:12px 0}
.bundle.active{box-shadow:0 0 0 3px var(--green) inset}
.bundle-price{display:flex;align-items:baseline;gap:12px}
.strike{color:#c00;text-decoration:line-through}
.price{color:var(--green);font-weight:800;font-size:24px}


/* Slider */
.slider{position:relative;overflow:hidden;border-radius:12px;margin:24px 0 10px}
.slider .slides{display:flex;gap:0;transition:transform .6s ease}
.slider .slides > *{flex:0 0 100%}
.slider .slides img{width:100%;display:block}
.slider .dots{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.slider .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6)}
.slider .dot.active{background:#fff}


/* Deal badge for advantageous bundles */
.bundle{position:relative}
.deal-badge{position:absolute;top:-12px;left:12px;background:#ff4757;color:#fff;border-radius:999px;padding:4px 10px;font-weight:800;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);font-size:12px}
.deal-badge .ico{font-size:14px}


.colors{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.color-card{border:2px solid #eee;border-radius:8px;padding:8px;cursor:pointer}
.color-card.active{border-color:#6bb7ff;box-shadow:0 0 0 3px #cfe8ff inset}
.color-card img{width:100%;height:auto;border-radius:4px}
.color-card .label{text-align:center;margin-top:6px;font-weight:600}

/* Make the image grid read-only (selection only from form below) */
.colors .color-card{pointer-events:none;}


/* Limit form element styles to only inside forms so header/drawer buttons are unaffected */
form select,form input,form textarea,form button{width:100%;padding:14px;border:1px solid #ddd;border-radius:8px;font-size:16px}
button.primary{background:var(--primary);color:#fff;border:none;font-weight:700}
button.primary:active{transform:translateY(1px)}

.grid-2{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){
  .colors{grid-template-columns:repeat(5,1fr)}
  .grid-2{grid-template-columns:1fr 1fr}
}

.footer{background:#0b0b0b;color:#eee;padding:40px 0;margin-top:40px}
.faq details{border-top:1px solid #eee;padding:10px 0}
.faq summary{font-weight:700}

.logo{font-size:42px;font-weight:900;letter-spacing:4px;text-align:center;margin:14px 0}
.note{font-size:12px;color:#666}

/* Admin responsive tables */
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{border:1px solid #eee;padding:8px;font-size:14px;white-space:nowrap}
.admin-table th{background:#fafafa}




/* Form input styles similar to screenshot */
.input, .select-wrap, .input-group{border:1px solid #1e2329;border-radius:12px;padding:14px;background:#fff}
.input input, .select-wrap select, .input-group input, .select-wrap select{border:none;outline:none;width:100%;font-size:16px;background:transparent}
.input-group{display:flex;align-items:center;gap:10px}
.input-group .prefix{display:flex;align-items:center;gap:6px;background:#f6f6f6;border-radius:10px;padding:10px 12px;font-weight:600;white-space:nowrap}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}
.select-wrap:after{content:"\25BE";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#555}


/* Bootstrap-like select */
.form-select{display:block;width:100%;padding:.575rem 2.25rem .575rem 1rem;font-size:1rem;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.5rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px}
.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .2rem rgba(13,110,253,.25)}
.select-wrap.has-bs{padding:0;border:0;background:none}
.select-wrap.has-bs:after{display:none}

/* Payment method cards */
.pay-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.pay-grid{grid-template-columns:1fr 1fr}}
.pay-card{border:2px solid #e5e7eb;border-radius:14px;padding:14px;cursor:pointer;display:flex;gap:12px;align-items:center;background:#fff}
.pay-card .ico{font-size:22px}
.pay-card .meta{line-height:1.2}
.pay-card .title{font-weight:800}
.pay-card .sub{font-size:13px;color:#666}
.pay-card.active{border-color:#ef4444;background:#fff5f5}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:2000}
.modal .modal-content{background:#fff;border-radius:12px;max-width:800px;width:90%;padding:16px}
.modal .modal-close{border:none;background:#000;color:#fff;border-radius:50%;width:32px;height:32px;line-height:32px;text-align:center;float:right;cursor:pointer}
.size-table{width:100%;border-collapse:collapse;margin-top:10px}
.size-table th,.size-table td{border:1px solid #eee;padding:10px;text-align:center}
.size-table thead th{background:#000;color:#fff}
.note{font-size:12px;color:#555}


/* Shipping timer bar */
.ship-timer{display:flex;align-items:center;gap:8px;background:#f7fdf7;border:1px solid #e2f3e2;border-radius:10px;padding:8px 12px;margin:10px 0;color:#1d4f1d}
.ship-timer .truck{font-size:18px}
.ship-timer .strong{font-weight:800;color:#2ca02c}