@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
:root{
  --accent:#7B2FF7;
  --accent-dark:#5A15C8;
  --accent-light:#B88BFF;
  --muted:#6b7280;
  --bg:#0f0c18;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial; margin:0; background:linear-gradient(180deg,#0b0710 0%,#0f0c18 100%); color:#eae6ff; -webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* Header */
.header{background:linear-gradient(90deg,var(--accent),var(--accent-dark)); padding:14px 0; box-shadow:0 6px 24px rgba(123,47,247,.18)}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:46px;width:46px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-light));box-shadow:0 6px 20px rgba(123,47,247,.25);padding:6px}
.brand-title{margin:0;font-size:26px;font-weight:700;color:white}
.brand-sub{font-size:13px;color:rgba(229,212,255,.9)}

/* Buttons */
.btn{background:var(--accent); color:white; padding:9px 18px; border-radius:10px; text-decoration:none; transition:.25s; box-shadow:0 6px 18px rgba(123,47,247,.25); border:none; display:inline-block}
.btn:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(123,47,247,.45)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.06);box-shadow:none;color:#f3eaff;padding:8px 14px}
.btn.disabled, .btn[aria-disabled="true"]{opacity:.55;pointer-events:none;box-shadow:none}
.customer-btn{background:#facc15;color:#422006;font-weight:600;box-shadow:0 10px 25px rgba(250,204,21,.35)}
.customer-btn:hover{background:#fbbf24;box-shadow:0 14px 30px rgba(250,204,21,.45)}
.customer-btn.disabled{background:#fde047;color:#a16207}
.admin-btn{background:#b91c1c;box-shadow:0 10px 25px rgba(185,28,28,.35)}
.admin-btn:hover{background:#991b1b;box-shadow:0 14px 30px rgba(185,28,28,.45)}

/* Slider */
.slider{position:relative; overflow:hidden; border-radius:12px; margin-top:18px; min-height:clamp(220px,45vw,360px)}
.slider-track{position:relative; min-height:clamp(220px,45vw,360px)}
.slider-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.slider-slide img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.slider-caption{position:absolute;left:20px;bottom:20px;background:linear-gradient(90deg,rgba(0,0,0,.45), rgba(0,0,0,.25));padding:12px 14px;border-radius:8px;color:#fff}

/* Dots */
.slider-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:8}
.slider-dots div{width:10px;height:10px;border-radius:50%;background:#ffffff33;cursor:pointer;transition:all .25s}
.slider-dots .active{background:#fff; transform:scale(1.3)}

/* Services */
.services-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:12px}
@media(min-width:640px){ .services-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .services-grid{grid-template-columns:repeat(3,1fr)} }
.card{background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border-radius:12px; padding:16px; box-shadow:0 10px 30px rgba(2,6,23,.35); border:1px solid rgba(123,47,247,.06)}
.card img{width:100%;height:180px;object-fit:cover;border-radius:8px}
.small{font-size:13px;color:rgba(229,212,255,.8)}

/* Footer */
.footer{padding:24px 0;text-align:center;color:#cfc3ff}

/* Admin tweaks */
.admin-top{background:linear-gradient(90deg,var(--accent),var(--accent-dark));padding:14px;border-radius:10px;color:white;margin-bottom:16px}
.table{width:100%;border-collapse:collapse}
.input, textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:transparent;color:#fff}
.form-row{margin-bottom:12px}
.card small{display:block;color:var(--muted);margin-top:6px}

.floating-whatsapp{position:fixed;bottom:20px;right:20px;background:#16a34a;color:#fff;padding:12px 22px;border-radius:999px;box-shadow:0 10px 30px rgba(22,163,74,.4);font-weight:600;text-decoration:none;z-index:99}
.floating-whatsapp:hover{background:#15803d;transform:translateY(-2px)}

/* Mega footer */
.mega-footer{background:#0a0c16;color:#d1d5db;padding:60px 0 40px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px}
.footer-heading{color:#60a5fa;font-size:18px;margin-bottom:14px}
.cta-card{background:#1d4ed8;color:#fff;padding:18px;border-radius:14px;box-shadow:0 10px 30px rgba(29,78,216,.35)}
.cta-card h4{margin:0 0 10px;font-size:18px}
.cta-btn{background:#1e40af;padding:9px 16px;border-radius:8px;font-weight:600}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-grid a{color:#d1d5db;text-decoration:none;font-size:14px}
.footer-grid a:hover{color:#fff}
.footer-socials{display:flex;gap:14px;font-size:24px;margin-top:10px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding-top:18px;text-align:center;color:#9ca3af;font-size:14px}
.footer-bottom a{color:#9ca3af;text-decoration:none}
.footer-bottom a:hover{color:#fff}
.call-btn{display:inline-block;background:transparent;border:2px solid #3b82f6;color:#3b82f6;padding:8px 14px;border-radius:8px;font-weight:600;margin-top:10px;transition:.3s}
.call-btn:hover{background:#3b82f6;color:#fff}
.whatsapp-btn{display:inline-block;background:#25d366;color:#fff;padding:8px 16px;border-radius:8px;font-weight:600;margin-top:8px;transition:.3s}
.whatsapp-btn:hover{background:#1ebd58}

/* Show customer login in mobile header */
@media (max-width: 768px) {
    .mobile-login {
        display: flex !important;
        justify-content: flex-end;
        padding: 10px 15px;
        background: #f5f5f5;
        border-top: 1px solid #eee;
    }
    
    .mobile-login .btn {
        width: 100%;
        text-align: center;
    }
    
    .brand {
        padding: 10px 0;
    }
}

/* Hide customer login in header on mobile */
@media (max-width: 768px) {
    .header .customer-login-container {
        display: none;
    }
}