/* Mobile-First Base Styles */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;overflow-x:hidden}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#112;line-height:1.6;background:#fff;min-height:100vh}
a{color:var(--primary);text-decoration:none;-webkit-tap-highlight-color:transparent}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Container - Mobile First */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
@media(min-width:1024px){.container{padding:0 2rem}}

/* Header - Mobile First */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #eaeaea;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 1rem;position:relative;z-index:100}
@media(min-width:768px){.nav-wrap{height:64px;padding:0 1.5rem}}

.logo{font-weight:700;color:#111;font-size:18px;white-space:nowrap;position:relative;z-index:101}
@media(min-width:768px){.logo{font-size:20px}}
.logo span{color:var(--primary)}

/* Mobile Navigation */
.nav{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;padding:1rem;gap:0.5rem;overflow-y:auto;z-index:99;box-shadow:0 4px 6px rgba(0,0,0,0.1)}
@media(min-width:768px){.nav{display:flex;position:static;flex-direction:row;gap:1rem;padding:0;overflow-y:visible;background:transparent;box-shadow:none;z-index:auto}}

.nav a{color:#222;padding:0.75rem 1rem;border-radius:0.75rem;font-weight:500;display:block;transition:all 0.2s;font-size:1rem}
@media(min-width:768px){.nav a{padding:0.5rem 0.75rem;font-size:0.875rem}}
.nav a:hover{background:var(--accent);text-decoration:none}

.nav-toggle{display:none}
.nav-toggle:checked ~ .nav{display:flex}

.hamburger{display:flex;flex-direction:column;gap:4px;cursor:pointer;padding:0.5rem;z-index:101;position:relative}
@media(min-width:768px){.hamburger{display:none}}
.hamburger span{display:block;width:24px;height:2px;background:#111;border-radius:2px;transition:all 0.3s}
.nav-toggle:checked ~ label .hamburger span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle:checked ~ label .hamburger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ label .hamburger span:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}

/* Overlay for mobile menu */
.nav-toggle:checked ~ .nav::before{content:'';position:fixed;top:56px;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:-1}

/* Hero Section - Mobile First */
.hero{display:grid;grid-template-columns:1fr;gap:2rem;padding:2rem 0}
@media(min-width:768px){.hero{grid-template-columns:1fr 1fr;gap:3rem;padding:3rem 0}}
@media(min-width:1024px){.hero{grid-template-columns:1.1fr 0.9fr;gap:3rem;padding:4rem 0}}

.hero h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.15;margin:0 0 1rem;word-wrap:break-word}
.hero p{font-size:clamp(1rem,2.5vw,1.25rem);color:#334;line-height:1.6}
.hero .cta{display:flex;flex-direction:column;gap:0.75rem;margin-top:1.5rem}
@media(min-width:640px){.hero .cta{flex-direction:row;gap:1rem}}

/* Buttons - Mobile First */
.btn{display:inline-block;padding:0.875rem 1.5rem;border-radius:0.75rem;background:var(--primary);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(36,178,115,.2);text-align:center;transition:all 0.2s;border:none;cursor:pointer;font-size:1rem;width:100%}
@media(min-width:640px){.btn{width:auto;padding:1rem 2rem}}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(36,178,115,.3);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn.outline{background:#fff;color:var(--primary);border:2px solid var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.05)}

/* Cards - Mobile First */
.card{border:1px solid #eef2ee;border-radius:1rem;padding:1.25rem;background:#fff;transition:all 0.3s}
@media(min-width:768px){.card{padding:1.5rem;border-radius:1.25rem}}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}

/* Grid System - Mobile First */
.grid{display:grid;gap:1rem}
@media(min-width:640px){.grid{gap:1.25rem}}
@media(min-width:1024px){.grid{gap:1.5rem}}

.grid-2{grid-template-columns:1fr}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}

.grid-3{grid-template-columns:1fr}
@media(min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.grid-4{grid-template-columns:1fr}
@media(min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* Section - Mobile First */
.section{padding:2.5rem 0}
@media(min-width:768px){.section{padding:3rem 0}}
@media(min-width:1024px){.section{padding:4rem 0}}
.section h2{margin:0 0 1rem;font-size:clamp(1.5rem,4vw,2rem)}
.muted{color:#667}

/* Footer - Mobile First */
.site-footer{border-top:1px solid #f0f0f0;margin-top:2.5rem}
@media(min-width:768px){.site-footer{margin-top:3rem}}
.site-footer .container{padding:1.5rem 1rem;color:#667}
@media(min-width:768px){.site-footer .container{padding:2rem 1.5rem}}

/* WhatsApp Float - Mobile Optimized */
.whatsapp-float{position:fixed;right:1rem;bottom:1rem;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;box-shadow:0 4px 16px rgba(36,178,115,.35);z-index:40;transition:all 0.3s}
@media(min-width:768px){.whatsapp-float{right:1.5rem;bottom:1.5rem;width:3.75rem;height:3.75rem;font-size:1.75rem}}
.whatsapp-float:hover{text-decoration:none;transform:scale(1.1)}
.whatsapp-float:active{transform:scale(0.95)}

/* List - Mobile First */
.list{display:grid;gap:1rem}
.list .item{display:flex;flex-direction:column;gap:0.75rem;border-bottom:1px solid #f2f2f2;padding-bottom:1rem}
@media(min-width:640px){.list .item{flex-direction:row;gap:1rem}}
.list .item img{width:100%;height:12rem;object-fit:cover;border-radius:0.75rem}
@media(min-width:640px){.list .item img{width:8rem;height:5rem}}

/* Forms - Mobile First */
.form{display:grid;gap:1rem}
.form input,.form textarea,.form select{width:100%;padding:0.875rem 1rem;border:2px solid #e3e8e2;border-radius:0.75rem;font:inherit;font-size:1rem;transition:all 0.2s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(36,178,115,.1)}
.form textarea{min-height:10rem;resize:vertical}
.form .row{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.form .row{grid-template-columns:1fr 1fr}}
.form button{border:0;cursor:pointer}

/* Table - Mobile First (Responsive) */
.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -1rem}
@media(min-width:768px){.table-wrapper{margin:0}}
.table{width:100%;min-width:600px;border-collapse:collapse;font-size:0.875rem}
@media(min-width:768px){.table{font-size:1rem}}
.table th,.table td{border:1px solid #eee;padding:0.75rem;text-align:left}
@media(min-width:768px){.table th,.table td{padding:1rem}}
.table th{background:#f9fefb;font-weight:600;white-space:nowrap}

/* Admin Nav - Mobile First */
.admin-nav{display:flex;gap:0.5rem;border-bottom:1px solid #eee;margin-bottom:1rem;padding-bottom:0.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(min-width:768px){.admin-nav{gap:0.75rem}}
.admin-nav a{padding:0.625rem 1rem;border-radius:0.5rem;white-space:nowrap;font-size:0.875rem;font-weight:500}
@media(min-width:768px){.admin-nav a{font-size:1rem}}
.admin-nav a.active{background:var(--accent);font-weight:600} 


/* Global Urdu Text Styling */
[dir="rtl"] {
	font-size: 22px !important;
	font-weight: 800 !important;
	line-height: 1.8 !important;
}

/* Specific Urdu text elements */
.text-slate-500[dir="rtl"],
.text-slate-600[dir="rtl"],
.text-slate-700[dir="rtl"],
.text-blue-600[dir="rtl"],
.text-blue-700[dir="rtl"],
.text-green-600[dir="rtl"],
.text-green-700[dir="rtl"],
.text-green-800[dir="rtl"],
.text-red-600[dir="rtl"],
.text-red-700[dir="rtl"],
.text-red-800[dir="rtl"],
.text-amber-800[dir="rtl"],
.text-orange-600[dir="rtl"],
.text-purple-600[dir="rtl"],
.text-pink-600[dir="rtl"] {
	font-size: 22px !important;
	font-weight: 800 !important;
}

/* Urdu in important notes */
.text-amber-800[dir="rtl"] {
	font-size: 24px !important;
	font-weight: 900 !important;
}

/* Urdu in quiz and feedback */
#quiz-urdu,
#practice-urdu,
#date-urdu {
	font-size: 22px !important;
	font-weight: 800 !important;
}

/* Urdu in list items */
li[dir="rtl"] {
	font-size: 20px !important;
	font-weight: 800 !important;
}

/* Small Urdu text */
.text-xs[dir="rtl"],
.text-sm[dir="rtl"] {
	font-size: 20px !important;
	font-weight: 800 !important;
}


/* ========================================
   MOBILE-FIRST RESPONSIVE UTILITIES
   ======================================== */

/* Touch-friendly spacing */
.touch-target{min-height:44px;min-width:44px}

/* Mobile-optimized text sizes */
.text-xs{font-size:0.75rem}
.text-sm{font-size:0.875rem}
.text-base{font-size:1rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.text-4xl{font-size:2.25rem}
.text-5xl{font-size:3rem}

@media(min-width:768px){
  .text-2xl{font-size:1.75rem}
  .text-3xl{font-size:2rem}
  .text-4xl{font-size:2.5rem}
  .text-5xl{font-size:3.5rem}
}

/* Responsive padding */
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
@media(min-width:768px){
  .md\:p-6{padding:1.5rem}
  .md\:p-8{padding:2rem}
  .md\:p-10{padding:2.5rem}
}

/* Responsive margins */
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
@media(min-width:768px){
  .md\:mb-8{margin-bottom:2rem}
  .md\:mb-10{margin-bottom:2.5rem}
  .md\:mb-12{margin-bottom:3rem}
}

/* Responsive flex */
.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-2{gap:0.5rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}

/* Hide/Show on mobile */
.hidden-mobile{display:none}
@media(min-width:768px){.hidden-mobile{display:block}}
.show-mobile{display:block}
@media(min-width:768px){.show-mobile{display:none}}

/* Responsive width */
.w-full{width:100%}
.max-w-sm{max-width:24rem}
.max-w-md{max-width:28rem}
.max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-4xl{max-width:56rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}

/* Responsive rounded corners */
.rounded{border-radius:0.5rem}
.rounded-lg{border-radius:0.75rem}
.rounded-xl{border-radius:1rem}
.rounded-2xl{border-radius:1.5rem}
.rounded-3xl{border-radius:2rem}

/* Mobile-optimized shadows */
.shadow{box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.shadow-md{box-shadow:0 4px 6px rgba(0,0,0,0.1)}
.shadow-lg{box-shadow:0 10px 15px rgba(0,0,0,0.1)}
.shadow-xl{box-shadow:0 20px 25px rgba(0,0,0,0.1)}
.shadow-2xl{box-shadow:0 25px 50px rgba(0,0,0,0.15)}

/* Smooth scrolling */
html{scroll-behavior:smooth}
.overflow-x-auto{overflow-x:auto;-webkit-overflow-scrolling:touch}
.overflow-y-auto{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* No scrollbar utility */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* Loading spinner */
.spinner{border:3px solid rgba(0,0,0,0.1);border-top-color:var(--primary);border-radius:50%;width:2rem;height:2rem;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(20px);transition:all 0.6s ease}
.reveal.active{opacity:1;transform:translateY(0)}

/* Glass morphism - Mobile optimized */
.glass{background:rgba(255,255,255,0.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3)}
.glass-dark{background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1)}

/* Shimmer effect */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{to{left:100%}}

/* Mobile-friendly scroll container */
.scroll-container{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.scroll-container::-webkit-scrollbar{display:none}
.scroll-content{display:flex;gap:2rem;padding:1rem 0;animation:scroll 30s linear infinite}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Responsive images */
img{max-width:100%;height:auto;display:block}
.aspect-video{aspect-ratio:16/9}
.aspect-square{aspect-ratio:1/1}
.object-cover{object-fit:cover}
.object-contain{object-fit:contain}

/* Mobile-optimized inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select{font-size:16px;-webkit-appearance:none;appearance:none}

/* Prevent zoom on input focus (iOS) */
@media(max-width:767px){
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select{font-size:16px}
}

/* Safe area for notched devices */
@supports(padding:max(0px)){
  .safe-top{padding-top:max(1rem,env(safe-area-inset-top))}
  .safe-bottom{padding-bottom:max(1rem,env(safe-area-inset-bottom))}
  .safe-left{padding-left:max(1rem,env(safe-area-inset-left))}
  .safe-right{padding-right:max(1rem,env(safe-area-inset-right))}
}

/* Print styles */
@media print{
  .no-print{display:none}
  .site-header,.site-footer,.whatsapp-float{display:none}
}


/* Ensure background decorative elements don't interfere with clicks */
section > .absolute {
	pointer-events: none;
}

/* Hero section specific z-index management */
.hero-section {
	position: relative;
	z-index: 1;
}

.hero-section .badge {
	position: relative;
	z-index: 10;
}

/* Prevent blur backgrounds from blocking interactions */
[class*="blur-"] {
	pointer-events: none;
}

/* Ensure all interactive elements are above decorative ones */
a, button, input, select, textarea, label {
	position: relative;
	z-index: 10;
}


/* ========================================
   MODAL & OVERLAY Z-INDEX FIX
   ======================================== */

/* All modals should be above header */
[id*="modal"],
[class*="modal"],
.fixed.inset-0 {
	z-index: 9999 !important;
}

/* Modal overlays */
.fixed.inset-0.bg-black,
.fixed.inset-0.bg-opacity-50,
[class*="backdrop-blur"] {
	z-index: 9998 !important;
}

/* Modal content should be above overlay */
.fixed.inset-0 > div,
.fixed.inset-0 > .bg-white,
.fixed.inset-0 > .rounded-xl {
	position: relative;
	z-index: 9999 !important;
}

/* Ensure modals are always on top */
div[id$="-modal"] {
	z-index: 9999 !important;
}

/* Header should be below modals */
.site-header {
	z-index: 100 !important;
}

/* Complete Z-Index Hierarchy:
   9999 = Modals & Dialogs (Top layer)
   9998 = Modal overlays
   101  = Header interactive (hamburger, logo)
   100  = Header container
   99   = Mobile menu
   10   = Interactive elements
   1    = Content
   0    = Decorative backgrounds
*/


/* ========================================
   UTILITY CLASSES FOR Z-INDEX
   ======================================== */

/* Use these classes for proper layering */
.z-modal { z-index: 9999 !important; }
.z-overlay { z-index: 9998 !important; }
.z-header { z-index: 100 !important; }
.z-menu { z-index: 99 !important; }
.z-interactive { z-index: 10 !important; }
.z-content { z-index: 1 !important; }
.z-background { z-index: 0 !important; }

/* Tailwind z-index overrides for modals */
.z-50 { z-index: 9999 !important; }

/* Ensure fixed elements with inset-0 are modals */
.fixed.inset-0:not(.site-header):not(.nav) {
	z-index: 9999 !important;
}