/* Responsive base styles for AlloBajaj - Professional Palette */
:root{
  --max-width: 980px;
  --card-radius: 16px;
  --gap: 12px;
  --primary: #0F6EFF;
  --primary-light: #E3F2FD;
  --secondary: #FF9D2D;
  --secondary-light: #FFF4E6;
  --success: #10B981;
  --success-light: #ECFDF5;
  --danger: #EF4444;
  --danger-light: #FEE2E2;
  --bg-main: #F8FAFC;
  --bg-card: #FFFFFF;
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --border: #E5E7EB;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg-main);color:var(--text-primary)}

/* Layout helpers */
.container, .app, .page { width:100%; max-width:420px; margin:0 auto; padding:16px; }
.card { background:var(--bg-card);border-radius:var(--card-radius);padding:16px;box-shadow:0 8px 24px rgba(15,110,255,0.08); }
.back button{padding:8px 12px;border-radius:12px;background:#fff;border:1px solid var(--border);color:var(--text-primary);cursor:pointer;transition:all 0.2s}
.back button:hover{background:var(--primary-light);color:var(--primary)}

/* Form inputs */
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:#f9fafb;color:var(--text-primary)}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="tel"]:focus,textarea:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px var(--primary-light)}
button.btn,input[type="submit"]{display:inline-block;padding:12px;border-radius:12px;border:none;background:var(--primary);color:#fff;font-weight:600;cursor:pointer;transition:all 0.3s}
button.btn:hover,input[type="submit"]:hover{background:#0A52CC;transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,110,255,0.3)}

/* Images */
img{max-width:100%;height:auto;display:block}

/* Responsive grid for small features */
.features{display:flex;gap:var(--gap);flex-wrap:wrap}
.feature{flex:1 1 30%;min-width:86px}

/* Notice boxes */
.notice{white-space:pre-line}

/* Price and buttons stack on small screens */
.price{display:flex;gap:10px;align-items:center}

/* Media queries */
@media (min-width: 421px){
  .container,.app,.page{max-width:520px}
}
@media (min-width: 768px){
  .container,.app,.page{max-width:720px;padding:20px}
  .card{padding:20px}
}
@media (min-width: 1024px){
  .container,.app,.page{max-width:var(--max-width)}
}

/* Utility helpers to override inline styles if needed */
.card, .app, .page { -webkit-font-smoothing:antialiased }

/* Ensure clickable elements are comfortable on mobile */
button, input[type="submit"]{touch-action:manipulation}

/* Footer responsive */
footer{width:100%;padding:16px;text-align:center;font-size:13px;color:var(--text-secondary);background:var(--bg-main);border-top:1px solid var(--border);margin-top:auto}