/*
Theme Name: EasyKeyPoint
Theme URI: https://EasyKeyPoint.Com
Author: EasyKeyPoint
Author URI: https://EasyKeyPoint.Com
Description: India's Trusted Software Key Store - Custom theme matching the EasyKeyPoint.Com design.
Version: 3.0
License: GNU General Public License v2 or later
Text Domain: easykeypoint
*/

/* ===== CSS Variables (matches React index.css) ===== */
:root {
  --bg: hsl(210,20%,98%);
  --fg: hsl(220,20%,10%);
  --card: hsl(0,0%,100%);
  --card-fg: hsl(220,20%,10%);
  --primary: hsl(199,89%,48%);
  --primary-fg: hsl(0,0%,100%);
  --secondary: hsl(210,40%,96%);
  --secondary-fg: hsl(220,20%,10%);
  --muted: hsl(210,40%,96%);
  --muted-fg: hsl(215,16%,47%);
  --accent: hsl(45,93%,47%);
  --accent-fg: hsl(0,0%,100%);
  --border: hsl(214,32%,91%);
  --success: hsl(142,71%,45%);
  --success-fg: hsl(0,0%,100%);
  --destructive: hsl(0,84%,60%);
  --radius: 0.75rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
}

/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;font:inherit;border:none;background:none}
ul{list-style:none}

/* ===== Utility ===== */
.container{max-width:1152px;margin:0 auto;padding-left:1rem;padding-right:1rem}
.text-center{text-align:center}
.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-1{gap:0.25rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}
.hidden{display:none}
.relative{position:relative}
.overflow-hidden{overflow:hidden}
.w-full{width:100%}

/* ===== Top Banner ===== */
.top-banner{background:var(--primary);color:var(--primary-fg);text-align:center;font-size:0.75rem;padding:0.5rem 1rem;position:relative}
.top-banner .close-btn{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.7);font-size:1.2rem;line-height:1}
.top-banner .close-btn:hover{color:#fff}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;max-width:1152px;margin:0 auto}
.site-logo{font-size:1.25rem;font-weight:700;color:var(--primary)}
.site-logo:hover{opacity:0.8}

/* Desktop nav */
.desktop-nav{display:none;align-items:center;gap:0.25rem}
.desktop-nav a{padding:0.375rem 0.75rem;font-size:0.875rem;font-weight:500;color:var(--muted-fg);border-radius:0.375rem;transition:all 0.15s}
.desktop-nav a:hover{color:var(--primary);background:rgba(14,165,233,0.05)}

.header-actions{display:flex;align-items:center;gap:0.5rem}
.btn-whatsapp{display:inline-flex;align-items:center;gap:0.375rem;padding:0.375rem 0.75rem;background:var(--success);color:var(--success-fg);border-radius:var(--radius);font-size:0.875rem;font-weight:500;transition:opacity 0.15s}
.btn-whatsapp:hover{opacity:0.9}
.btn-whatsapp .label{display:none}

.mobile-toggle{display:block;padding:0.375rem;color:var(--fg)}

/* Mobile nav */
.mobile-nav{display:none;border-top:1px solid var(--border);background:var(--card);padding:0.5rem 1rem}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:0.5rem 0.75rem;font-size:0.875rem;font-weight:500;color:var(--fg);border-radius:0.375rem}
.mobile-nav a:hover{background:rgba(14,165,233,0.05)}

/* ===== Hero Banner ===== */
.hero{background:linear-gradient(135deg,var(--primary),hsl(199,89%,42%),hsl(199,89%,35%));color:var(--primary-fg);padding:3.5rem 1rem;text-align:center;position:relative;overflow:hidden}
.hero .circle{position:absolute;border-radius:50%;background:rgba(255,255,255,0.05)}
.hero .circle-1{width:15rem;height:15rem;top:-5rem;left:-5rem}
.hero .circle-2{width:10rem;height:10rem;bottom:-2.5rem;right:-2.5rem}
.hero h1{font-size:1.875rem;font-weight:800;margin-bottom:0.75rem;letter-spacing:-0.025em;position:relative;z-index:1}
.hero .subtitle{color:rgba(255,255,255,0.8);max-width:42rem;margin:0 auto;font-size:0.875rem;margin-bottom:1.5rem;position:relative;z-index:1}
.hero-features{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;position:relative;z-index:1}
.hero-feature{display:flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.1);backdrop-filter:blur(4px);border-radius:9999px;padding:0.5rem 1rem;font-size:0.75rem;font-weight:500}

/* ===== Trust Badges ===== */
.trust-section{padding:2.5rem 0;background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2rem}
.stat-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1rem;border-radius:0.75rem;background:rgba(210,220,235,0.3);border:1px solid var(--border)}
.stat-card .stat-icon{font-size:2rem;color:var(--primary);margin-bottom:0.5rem}
.stat-card .stat-value{font-size:1.5rem;font-weight:800;color:var(--fg)}
.stat-card .stat-label{font-size:0.75rem;color:var(--muted-fg);margin-top:0.25rem}
.badge-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem}
.badge-pill{display:inline-flex;align-items:center;padding:0.375rem 0.75rem;border-radius:9999px;background:rgba(14,165,233,0.1);color:var(--primary);font-size:0.75rem;font-weight:600;border:1px solid rgba(14,165,233,0.2)}

/* ===== Search ===== */
.search-wrap{max-width:36rem;margin:0 auto;padding:1.5rem 1rem;position:relative}
.search-wrap input{width:100%;padding:0.625rem 0.625rem 0.625rem 2.5rem;border:1px solid var(--border);border-radius:9999px;background:var(--card);font-size:0.875rem;box-shadow:var(--shadow-sm);outline:none;transition:border 0.15s}
.search-wrap input:focus{border-color:var(--primary)}
.search-wrap .search-icon{position:absolute;left:1.75rem;top:50%;transform:translateY(-50%);color:var(--muted-fg);font-size:1rem}

/* ===== Category Filter ===== */
.category-filter{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;padding:1rem}
.cat-btn{padding:0.5rem 1rem;border-radius:9999px;font-size:0.875rem;font-weight:500;border:1px solid var(--border);background:var(--card);color:var(--fg);transition:all 0.15s}
.cat-btn:hover{border-color:rgba(14,165,233,0.5)}
.cat-btn.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary);box-shadow:var(--shadow-md)}

/* ===== Product Grid ===== */
.product-section{padding:0 1rem 2rem}
.product-group-title{font-size:1.125rem;font-weight:700;color:var(--fg);margin-bottom:1rem}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;margin-bottom:2rem}
.product-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:all 0.2s}
.product-card:hover{box-shadow:var(--shadow-lg);border-color:rgba(14,165,233,0.4)}
.product-card:hover .product-emoji{transform:scale(1.1)}
.product-emoji{font-size:2.5rem;margin-bottom:0.75rem;display:block;transition:transform 0.2s}
.product-name{font-size:0.875rem;font-weight:600;color:var(--fg);line-height:1.3}
.product-packages{font-size:0.75rem;color:var(--muted-fg);margin-top:0.25rem}
.product-price{margin-top:0.5rem;font-size:0.875rem;font-weight:700;color:var(--primary)}

/* ===== Testimonials ===== */
.testimonials{padding:3rem 0;background:var(--bg)}
.section-title{font-size:1.5rem;font-weight:700;text-align:center;color:var(--fg);margin-bottom:0.5rem}
.section-subtitle{text-align:center;color:var(--muted-fg);font-size:0.875rem;margin-bottom:2rem}
.reviews-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.review-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;transition:box-shadow 0.2s}
.review-card:hover{box-shadow:var(--shadow-md)}
.review-stars{display:flex;gap:2px;margin-bottom:0.5rem}
.review-stars .star{color:var(--accent);font-size:1rem}
.review-text{font-size:0.875rem;color:var(--fg);margin-bottom:0.75rem;font-style:italic}
.review-author{display:flex;align-items:center;gap:0.5rem}
.review-avatar{width:2rem;height:2rem;border-radius:50%;background:rgba(14,165,233,0.1);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700;font-size:0.875rem}
.review-name{font-size:0.875rem;font-weight:600;color:var(--fg)}
.review-location{font-size:0.75rem;color:var(--muted-fg)}

/* ===== Video Section ===== */
.video-section{padding:3rem 0;background:var(--bg)}
.video-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.video-wrap{aspect-ratio:16/9;border-radius:0.75rem;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);background:var(--card)}
.video-wrap iframe{width:100%;height:100%;border:none}

/* ===== FAQ ===== */
.faq-section{padding:3rem 0;background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.faq-list{max-width:48rem;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:0.5rem;margin-bottom:0.5rem;background:var(--bg);overflow:hidden}
.faq-question{width:100%;text-align:left;padding:0.875rem 1rem;font-size:0.875rem;font-weight:500;color:var(--fg);display:flex;justify-content:space-between;align-items:center;transition:background 0.15s}
.faq-question:hover{background:rgba(14,165,233,0.03)}
.faq-question .chevron{transition:transform 0.2s;font-size:0.75rem;color:var(--muted-fg)}
.faq-item.open .faq-question .chevron{transform:rotate(180deg)}
.faq-answer{padding:0 1rem 0.875rem;font-size:0.875rem;color:var(--muted-fg);display:none}
.faq-item.open .faq-answer{display:block}

/* ===== Policy Sections ===== */
.policy-section{padding:3rem 0}
.policy-section:nth-child(odd){background:var(--card);border-top:1px solid var(--border)}
.policy-section:nth-child(even){background:var(--bg)}
.policy-content{max-width:48rem;margin:0 auto}
.policy-content h2{font-size:1.5rem;font-weight:700;color:var(--fg);margin-bottom:1rem}
.policy-content h3{font-size:1rem;font-weight:600;color:var(--fg);margin-top:1rem;margin-bottom:0.5rem}
.policy-content p{font-size:0.875rem;color:var(--muted-fg);margin-bottom:0.75rem}
.policy-content ul{padding-left:1.25rem;margin-bottom:0.75rem}
.policy-content li{font-size:0.875rem;color:var(--muted-fg);margin-bottom:0.25rem;list-style:disc}
.policy-content strong{color:var(--fg)}

/* ===== Footer ===== */
.site-footer{background:var(--card);border-top:1px solid var(--border);padding:2rem 0}
.footer-grid{display:flex;flex-direction:column;gap:1.5rem;text-align:center}
.footer-brand h3{font-size:1.125rem;font-weight:700;color:var(--primary);margin-bottom:0.25rem}
.footer-brand p{font-size:0.875rem;color:var(--muted-fg)}
.footer-links h4,.footer-payment h4{font-size:0.875rem;font-weight:600;color:var(--fg);margin-bottom:0.5rem}
.footer-links-list{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1rem}
.footer-links-list a,.footer-links-list button{font-size:0.75rem;color:var(--muted-fg);transition:color 0.15s;background:none;border:none;cursor:pointer}
.footer-links-list a:hover,.footer-links-list button:hover{color:var(--primary)}
.payment-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem}
.payment-badge{font-size:0.75rem;background:var(--secondary);padding:0.25rem 0.5rem;border-radius:0.25rem;color:var(--muted-fg)}
.footer-bottom{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border);text-align:center;font-size:0.75rem;color:var(--muted-fg)}

/* ===== Checkout Modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:100;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal{background:var(--card);border-radius:var(--radius);width:100%;max-width:28rem;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);padding:1.5rem}
.modal-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem}
.modal-header .back-btn{color:var(--muted-fg);font-size:1rem}
.modal-header .back-btn:hover{color:var(--fg)}
.modal-header .modal-emoji{font-size:1.5rem}
.modal-header .modal-title{font-size:1.125rem;font-weight:600;color:var(--fg)}
.modal-close{position:absolute;top:1rem;right:1rem;color:var(--muted-fg);font-size:1.25rem}

.pkg-option{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0.75rem;border-radius:0.5rem;border:1px solid var(--border);margin-bottom:0.5rem;transition:all 0.15s;text-align:left}
.pkg-option:hover{border-color:rgba(14,165,233,0.4)}
.pkg-option.selected{border-color:var(--primary);background:rgba(14,165,233,0.05);box-shadow:0 0 0 2px rgba(14,165,233,0.2)}
.pkg-option .pkg-name{font-weight:500;font-size:0.875rem;color:var(--fg)}
.pkg-option .pkg-price{font-weight:700;color:var(--primary);font-size:0.875rem}

.btn-primary{display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;padding:0.625rem;border-radius:var(--radius);background:var(--primary);color:var(--primary-fg);font-weight:500;font-size:0.875rem;transition:opacity 0.15s;border:none}
.btn-primary:hover{opacity:0.9}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed}
.btn-success{background:var(--success);color:var(--success-fg)}

.checkout-summary{background:rgba(210,220,235,0.3);border-radius:0.5rem;padding:0.75rem;font-size:0.875rem;margin-bottom:1rem}
.checkout-summary .row{display:flex;justify-content:space-between;margin-bottom:0.25rem}
.checkout-summary .row .label{color:var(--muted-fg)}
.checkout-summary .row .value{font-weight:500;color:var(--fg)}
.checkout-summary .row .value.price{font-weight:700;color:var(--primary)}

.form-group{margin-bottom:0.75rem}
.form-group label{display:block;font-size:0.875rem;font-weight:500;color:var(--fg);margin-bottom:0.375rem}
.form-group input{width:100%;padding:0.5rem 0.75rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.875rem;background:var(--bg);outline:none;transition:border 0.15s}
.form-group input:focus{border-color:var(--primary)}

.payment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem;margin-bottom:1rem}
.payment-option{display:flex;align-items:center;gap:0.5rem;padding:0.75rem;border:1px solid var(--border);border-radius:0.5rem;font-size:0.875rem;text-align:left;transition:all 0.15s}
.payment-option:hover{border-color:rgba(14,165,233,0.4)}
.payment-option.selected{border-color:var(--primary);background:rgba(14,165,233,0.05);box-shadow:0 0 0 2px rgba(14,165,233,0.2)}
.payment-option .pay-icon{font-size:1.125rem}
.payment-option .pay-name{font-weight:500;color:var(--fg)}
.payment-option .pay-detail{font-size:0.75rem;color:var(--muted-fg)}

/* ===== Toast ===== */
.toast{position:fixed;bottom:1rem;right:1rem;padding:0.75rem 1rem;border-radius:var(--radius);font-size:0.875rem;z-index:200;animation:slideIn 0.3s ease;box-shadow:var(--shadow-lg)}
.toast.success{background:var(--success);color:var(--success-fg)}
.toast.error{background:var(--destructive);color:#fff}
@keyframes slideIn{from{transform:translateY(1rem);opacity:0}to{transform:translateY(0);opacity:1}}

/* ===== Responsive ===== */
@media(min-width:640px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .btn-whatsapp .label{display:inline}
}
@media(min-width:768px){
  .desktop-nav{display:flex}
  .mobile-toggle{display:none}
  .hero h1{font-size:3rem}
  .hero .subtitle{font-size:1.125rem}
  .hero-feature{font-size:0.875rem}
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .product-grid{grid-template-columns:repeat(4,1fr)}
  .reviews-grid{grid-template-columns:repeat(3,1fr)}
  .video-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{flex-direction:row;align-items:flex-start;justify-content:space-between;text-align:left}
  .footer-links-list{justify-content:flex-start}
  .payment-badges{justify-content:flex-start}
}
@media(min-width:1024px){
  .product-grid{grid-template-columns:repeat(5,1fr)}
}