/* ===== QuickBill.pk — SUNDAR Bill Checker Design System ===== */ /* Google Fonts have been moved to HTML for performance */ /* ---------- Variables ---------- */ :root { --primary: #0f766e; --primary-dark: #0b534d; --primary-light: #e8f8f6; --primary-50: #f2fbfa; --accent: #ea580c; --accent-light: #fff2e8; --red: #dc2626; --red-light: #fef2f2; --orange: #f59e0b; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #111827; --white: #ffffff; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 8px 22px rgba(15, 23, 42, .12); --shadow-lg: 0 18px 48px rgba(15, 23, 42, .18); --shadow-card: 0 10px 28px rgba(15, 118, 110, .12); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; --ease: cubic-bezier(.4,0,.2,1); --dur: 250ms; --max-w: 800px; --max-w-wide: 1100px; } /* ---------- Reset ---------- */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; background: radial-gradient(circle at 2% 0%, rgba(15,118,110,.10) 0%, transparent 35%), radial-gradient(circle at 98% 18%, rgba(234,88,12,.08) 0%, transparent 32%), var(--gray-50); color: var(--gray-700); line-height: 1.8; -webkit-font-smoothing: antialiased; } img { max-width:100%; display:block; } a { text-decoration:none; color:var(--primary); transition:color var(--dur) var(--ease); } a:hover { color:var(--primary-dark); } ul, ol { list-style:none; } button { cursor:pointer; font-family:inherit; } /* ---------- Utility ---------- */ .container { max-width:var(--max-w-wide); margin:0 auto; padding:0 20px; } .container-narrow { max-width:var(--max-w); margin:0 auto; padding:0 20px; } .text-center { text-align:center; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* ============================================================ NAVBAR ============================================================ */ .navbar { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom:1px solid rgba(15,118,110,.12); box-shadow:0 8px 18px rgba(17,24,39,.06); } .navbar .container { display:flex; align-items:center; justify-content:space-between; height:62px; max-width:var(--max-w-wide); } .nav-logo { display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.15rem; color:var(--gray-900); } .nav-logo .icon { width:34px; height:34px; background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1rem; } .nav-links { display:flex; align-items:center; gap:4px; } .nav-links a { padding:8px 14px; font-size:.875rem; font-weight:500; color:var(--gray-600); border-radius:var(--radius-sm); transition:all var(--dur) var(--ease); } .nav-links a:hover, .nav-links a.active { color:var(--primary-dark); background:rgba(15,118,110,.12); } .lang-toggle { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; background:linear-gradient(135deg, var(--accent), #c2410c); color:#fff; border:none; border-radius:var(--radius-full); font-size:.8rem; font-weight:700; font-family:'Noto Nastaliq Urdu','Manrope', sans-serif; cursor:pointer; transition:all var(--dur) var(--ease); margin-left:6px; white-space:nowrap; } .lang-toggle:hover { background:#c2410c; transform:scale(1.05); } .lang-toggle .globe { font-style:normal; } /* RTL mode */ html[dir="rtl"] body { font-family:'Noto Nastaliq Urdu','Manrope', sans-serif; line-height:2.2; } html[dir="rtl"] .navbar .container { direction:rtl; } html[dir="rtl"] .nav-links { direction:rtl; } html[dir="rtl"] .lang-toggle { margin-left:0; margin-right:6px; } html[dir="rtl"] .article-content, html[dir="rtl"] .hero, html[dir="rtl"] .page-header, html[dir="rtl"] .footer, html[dir="rtl"] .toc-box { text-align:right; direction:rtl; } html[dir="rtl"] .hero .subtitle, html[dir="rtl"] .hero h1 { text-align:right; } html[dir="rtl"] .hero .container { direction:rtl; } html[dir="rtl"] .article-content ul, html[dir="rtl"] .article-content ol { padding-left:0; padding-right:24px; } html[dir="rtl"] .step-list li { padding-left:0; padding-right:40px; } html[dir="rtl"] .step-list li::before { left:auto; right:0; } html[dir="rtl"] .toc-list { direction:rtl; } html[dir="rtl"] .toc-list li a { direction:rtl; } html[dir="rtl"] .toc-list li a::before { margin-left:6px; margin-right:0; } html[dir="rtl"] .toc-list .sub-list { padding-left:0; padding-right:20px; } html[dir="rtl"] .info-box.blue { border-left:none; border-right:4px solid var(--primary); } html[dir="rtl"] .info-box.green { border-left:none; border-right:4px solid var(--accent); } html[dir="rtl"] .info-box.yellow { border-left:none; border-right:4px solid var(--orange); } html[dir="rtl"] .info-box.red { border-left:none; border-right:4px solid var(--red); } html[dir="rtl"] .faq-question { text-align:right; direction:rtl; } html[dir="rtl"] .faq-answer-inner { direction:rtl; text-align:right; } html[dir="rtl"] .result-grid { direction:rtl; } html[dir="rtl"] .result-item .label { text-align:right; } html[dir="rtl"] .bill-result { text-align:right; direction:rtl; } html[dir="rtl"] .footer-grid { direction:rtl; } html[dir="rtl"] .footer-links { text-align:right; } html[dir="rtl"] .footer-brand { text-align:right; } html[dir="rtl"] .breadcrumb { direction:rtl; text-align:right; } html[dir="rtl"] .search-note { direction:rtl; text-align:right; } html[dir="rtl"] .search-input { direction:rtl; text-align:right; } html[dir="rtl"] .coverage-grid { direction:rtl; } /* Content language toggle */ .content-ur { display:none; } .lang-ur .content-en { display:none; } .lang-ur .content-ur { display:block; } .lang-ur .content-ur.toc-box { display:block; } .lang-ur .content-en.toc-box { display:none; } .mobile-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; } .mobile-toggle span { width:22px; height:2px; background:var(--gray-700); border-radius:2px; transition:all var(--dur) var(--ease); } /* ============================================================ HERO / BILL CHECKER ============================================================ */ .hero { position: relative; background: radial-gradient(circle at 12% 0%, rgba(255,255,255,.22) 0%, transparent 32%), radial-gradient(circle at 90% 25%, rgba(255,255,255,.10) 0%, transparent 26%), linear-gradient(120deg, #0b534d 0%, #0f766e 55%, #115e59 100%); color:#fff; padding:68px 0 56px; overflow:hidden; } .hero::after { content:''; position:absolute; inset:auto -120px -120px; height:220px; background:radial-gradient(circle, rgba(234,88,12,.22) 0%, rgba(234,88,12,0) 70%); pointer-events:none; } .hero .container { position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:start; } .hero h1 { font-size:clamp(1.6rem, 4vw, 2.4rem); font-weight:800; line-height:1.3; margin-bottom:12px; text-align:left; } .hero .subtitle { font-size:1rem; color:rgba(255,255,255,.88); max-width:640px; margin:0 0 22px; line-height:1.7; text-align:left; } .hero .urdu-note { font-family:'Noto Nastaliq Urdu', serif; direction:rtl; font-size:.95rem; color:rgba(255,255,255,.85); margin-bottom:20px; text-align:right; } /* Bill Search Box */ .search-box { max-width:520px; margin:0 0 0 auto; background:var(--white); border:1px solid rgba(255,255,255,.45); border-radius:22px; padding:26px; box-shadow:0 18px 42px rgba(15, 23, 42, .2); } .search-tabs { display:flex; gap:8px; margin-bottom:16px; } .search-tab { flex:1; padding:10px; background:var(--gray-100); border:1px solid var(--gray-200); border-radius:var(--radius-md); color:var(--gray-600); font-size:.85rem; font-weight:600; transition:all var(--dur) var(--ease); } .search-tab.active { background:var(--primary-50); color:var(--primary-dark); border-color:rgba(15,118,110,.25); } .search-input { width:100%; padding:14px 18px; border:1px solid var(--gray-300); border-radius:var(--radius-md); background:#fff; color:var(--gray-900); font-size:1rem; font-family:inherit; outline:none; margin-bottom:12px; transition:all var(--dur) var(--ease); } .search-input::placeholder { color:var(--gray-400); } .search-input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(15,118,110,.14); } .search-btns { display:flex; gap:10px; } .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:12px 24px; border:none; border-radius:var(--radius-md); font-size:.9rem; font-weight:700; font-family:inherit; transition:all var(--dur) var(--ease); white-space:nowrap; } .btn-check { flex:1; background:linear-gradient(135deg, var(--accent), #c2410c); color:#fff; } .btn-check:hover { background:#c2410c; transform:translateY(-1px); box-shadow:0 8px 18px rgba(194,65,12,.35); } .btn-official { background:var(--primary); color:#fff; font-size:.82rem; padding:12px 18px; } .btn-official:hover { background:var(--primary-dark); } .search-note { margin-top:12px; font-size:.78rem; color:var(--gray-500); text-align:left; } /* ============================================================ LOADING / ERROR / RESULT ============================================================ */ .spinner { display:none; width:28px; height:28px; border:3px solid rgba(15,118,110,.18); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; margin:16px auto; } .spinner.visible { display:block; } @keyframes spin { to { transform:rotate(360deg); } } .error-msg { display:none; padding:12px; background:var(--red-light); border:1px solid rgba(220,38,38,.25); border-radius:var(--radius-md); color:#b91c1c; font-size:.88rem; margin-top:12px; text-align:center; } .error-msg.visible { display:block; } .bill-result { display:none; margin-top:20px; background:var(--primary-50); border:1px solid rgba(15,118,110,.22); border-radius:var(--radius-lg); padding:24px; text-align:left; animation:slideUp .35s var(--ease); } .bill-result.visible { display:block; } @keyframes slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } .result-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(15,118,110,.16); } .result-header h3 { color:var(--gray-900); font-size:1rem; font-weight:700; } .result-status { padding:4px 14px; border-radius:var(--radius-full); font-size:.78rem; font-weight:700; } .result-status.unpaid { background:rgba(220,38,38,.14); color:#b91c1c; } .result-status.paid { background:rgba(15,118,110,.14); color:var(--primary-dark); } .result-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .result-item .label { color:var(--gray-500); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; } .result-item .value { color:var(--gray-900); font-size:.92rem; font-weight:600; } .result-item .value.amount { font-size:1.3rem; color:var(--accent); font-weight:800; } /* ============================================================ TABLE OF CONTENTS ============================================================ */ .toc-box { background:var(--white); border:1px solid rgba(15,118,110,.14); border-radius:18px; margin:32px auto; overflow:hidden; box-shadow:var(--shadow-sm); } .toc-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:linear-gradient(90deg, var(--primary-50), #fff); border:none; font-size:.95rem; font-weight:700; color:var(--gray-800); } .toc-toggle .arrow { transition:transform var(--dur) var(--ease); font-size:.85rem; } .toc-box.open .toc-toggle .arrow { transform:rotate(180deg); } .toc-content { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); } .toc-box.open .toc-content { max-height:2000px; } .toc-list { padding:8px 24px 20px; } .toc-list li { padding:5px 0; } .toc-list li a { font-size:.88rem; color:var(--primary); display:flex; align-items:center; gap:6px; } .toc-list li a::before { content:'•'; color:var(--primary); font-weight:bold; } .toc-list li a:hover { color:var(--primary-dark); } .toc-list .sub-list { padding-left:20px; margin-top:4px; } .toc-list .sub-list li a::before { content:'–'; } /* ============================================================ ARTICLE / LONG-FORM CONTENT ============================================================ */ .article-section { padding:40px 0; } .article-content { background:var(--white); border-radius:18px; border:1px solid rgba(15,118,110,.12); padding:40px; box-shadow:0 10px 24px rgba(15,23,42,.08); } .article-content h2 { font-size:1.5rem; font-weight:800; color:var(--gray-900); margin:40px 0 16px; padding-bottom:8px; border-bottom:3px solid var(--accent); display:inline-block; } .article-content h2:first-child { margin-top:0; } .article-content h3 { font-size:1.18rem; font-weight:700; color:var(--gray-800); margin:28px 0 10px; } .article-content h4 { font-size:1rem; font-weight:600; color:var(--gray-700); margin:20px 0 8px; } .article-content p { margin-bottom:16px; color:var(--gray-600); font-size:.94rem; line-height:1.85; } .article-content strong { color:var(--gray-800); } .article-content ul, .article-content ol { padding-left:24px; margin-bottom:16px; } .article-content ul { list-style:disc; } .article-content ol { list-style:decimal; } .article-content li { margin-bottom:8px; font-size:.94rem; color:var(--gray-600); line-height:1.7; } .article-content a { color:var(--primary); font-weight:500; text-decoration:underline; text-decoration-color:rgba(10,94,181,.3); text-underline-offset:2px; } .article-content a:hover { text-decoration-color:var(--primary); } /* Info Box */ .info-box { padding:20px 24px; border-radius:var(--radius-md); margin:20px 0; font-size:.9rem; } .info-box.blue { background:var(--primary-light); border-left:4px solid var(--primary); } .info-box.green { background:#ecfdf5; border-left:4px solid #10b981; } .info-box.yellow { background:#fffbeb; border-left:4px solid var(--orange); } .info-box.red { background:var(--red-light); border-left:4px solid var(--red); } .info-box strong { color:var(--gray-800); } /* Coverage List Grid */ .coverage-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; margin:16px 0; } .coverage-item { padding:10px 16px; background:linear-gradient(140deg, var(--primary-light), #ffffff); border:1px solid rgba(15,118,110,.18); border-radius:var(--radius-sm); font-size:.88rem; font-weight:500; color:var(--primary-dark); display:flex; align-items:center; gap:6px; } /* Steps */ .step-list { counter-reset:steps; list-style:none !important; padding-left:0 !important; } .step-list li { counter-increment:steps; position:relative; padding-left:40px; margin-bottom:14px; } .step-list li::before { content:counter(steps); position:absolute; left:0; top:2px; width:28px; height:28px; background:linear-gradient(135deg, var(--accent), #c2410c); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; } /* Payment Methods Grid */ .payment-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin:16px 0; } .payment-item { text-align:center; padding:16px 10px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-md); font-size:.82rem; font-weight:600; color:var(--gray-700); transition:all var(--dur) var(--ease); } .payment-item:hover { border-color:var(--primary); box-shadow:var(--shadow-card); } .payment-item .emoji { font-size:1.6rem; margin-bottom:6px; display:block; } /* News Card */ .news-list { list-style:none !important; padding-left:0 !important; } .news-card { padding:16px 20px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-md); margin-bottom:12px; transition:all var(--dur) var(--ease); } .news-card:hover { border-color:var(--primary); box-shadow:var(--shadow-card); } .news-card .date { font-size:.75rem; color:var(--gray-400); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .news-card h4 { font-size:.92rem; color:var(--gray-800); margin:4px 0; } .news-card p { font-size:.84rem; color:var(--gray-500); margin:0; } /* ============================================================ FAQ ACCORDION ============================================================ */ .faq-item { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; transition:border-color var(--dur) var(--ease); } .faq-item:hover { border-color:var(--primary-light); } .faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:none; border:none; text-align:left; font-size:.92rem; font-weight:600; color:var(--gray-800); gap:12px; transition:color var(--dur) var(--ease); } .faq-question:hover { color:var(--primary-dark); } .faq-icon { width:24px; height:24px; min-width:24px; background:var(--accent-light); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--accent); transition:all var(--dur) var(--ease); } .faq-item.open .faq-icon { background:var(--accent); color:#fff; transform:rotate(45deg); } .faq-answer { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); } .faq-answer-inner { padding:0 20px 18px; color:var(--gray-600); font-size:.9rem; line-height:1.8; } /* ============================================================ BILL CALCULATOR (Page) ============================================================ */ .calc-tool { max-width:500px; margin:0 auto 32px; padding:32px; background:var(--white); border:1px solid rgba(15,118,110,.24); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); } .calc-tool label { display:block; font-size:.85rem; font-weight:600; color:var(--gray-700); margin-bottom:6px; } .calc-tool input, .calc-tool select { width:100%; padding:12px 16px; border:1px solid var(--gray-300); border-radius:var(--radius-md); font-size:1rem; font-family:inherit; color:var(--gray-800); margin-bottom:16px; outline:none; transition:border-color var(--dur) var(--ease); } .calc-tool input:focus, .calc-tool select:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(15,118,110,.14); } .calc-result { display:none; margin-top:20px; padding:20px; background:var(--primary-light); border-radius:var(--radius-md); text-align:center; } .calc-result.visible { display:block; animation:slideUp .3s var(--ease); } .calc-result .amount { font-size:2rem; font-weight:900; color:var(--primary); } .calc-result .breakdown { margin-top:12px; font-size:.85rem; color:var(--gray-600); text-align:left; } /* Tariff Table */ .tariff-table { width:100%; border-collapse:collapse; margin:16px 0; font-size:.88rem; } .tariff-table th { background:var(--primary); color:#fff; padding:10px 14px; text-align:left; font-weight:600; } .tariff-table td { padding:10px 14px; border-bottom:1px solid var(--gray-200); color:var(--gray-700); } .tariff-table tr:nth-child(even) td { background:var(--gray-50); } .tariff-table tr:hover td { background:var(--primary-50); } /* ============================================================ CONTACT FORM ============================================================ */ .contact-form { max-width:560px; margin:0 auto; } .contact-form .form-group { margin-bottom:18px; } .contact-form label { display:block; font-size:.85rem; font-weight:600; color:var(--gray-700); margin-bottom:6px; } .contact-form input, .contact-form textarea { width:100%; padding:12px 16px; border:1px solid var(--gray-300); border-radius:var(--radius-md); font-size:.95rem; font-family:inherit; color:var(--gray-800); outline:none; transition:border-color var(--dur) var(--ease); } .contact-form input:focus, .contact-form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(15,118,110,.14); } .contact-form textarea { resize:vertical; min-height:120px; } /* ============================================================ PAGE HEADER (Inner pages) ============================================================ */ .page-header { background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.16) 0%, transparent 30%), linear-gradient(120deg, var(--primary-dark), var(--primary)); color:#fff; text-align:center; padding:48px 0 40px; } .page-header h1 { font-size:clamp(1.4rem, 3.5vw, 2rem); font-weight:800; margin-bottom:8px; } .page-header p { color:rgba(255,255,255,.75); font-size:.95rem; max-width:500px; margin:0 auto; } .breadcrumb { text-align:center; padding:12px 0; background:var(--white); border-bottom:1px solid var(--gray-200); font-size:.82rem; color:var(--gray-500); } .breadcrumb a { color:var(--primary); font-weight:500; } .breadcrumb span { margin:0 6px; } /* ============================================================ FOOTER ============================================================ */ .footer { background:linear-gradient(160deg, #0f172a, #111827 60%, #0b534d 100%); color:var(--gray-400); padding:48px 0 24px; margin-top:40px; } .footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; padding-bottom:32px; margin-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08); } .footer-brand .nav-logo { margin-bottom:12px; } .footer-brand .nav-logo .icon { background:var(--primary); } .footer-brand p { font-size:.84rem; line-height:1.7; max-width:300px; } .footer-links h4 { color:#fff; font-size:.9rem; font-weight:700; margin-bottom:14px; } .footer-links a { display:block; padding:4px 0; font-size:.84rem; color:var(--gray-400); transition:all var(--dur) var(--ease); } .footer-links a:hover { color:var(--accent); padding-left:4px; } .footer-bottom { display:flex; align-items:center; justify-content:space-between; font-size:.78rem; color:var(--gray-500); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:768px) { .nav-links { display:none; position:fixed; top:62px; left:0; right:0; background:var(--white); flex-direction:column; padding:16px; gap:4px; border-bottom:1px solid var(--gray-200); box-shadow:var(--shadow-lg); } .nav-links.open { display:flex; } .mobile-toggle { display:flex; } .hero { padding:40px 0 36px; } .hero .container { grid-template-columns:1fr; gap:20px; } .hero h1, .hero .subtitle { text-align:center; } .search-box { margin:0 auto; } .search-box { padding:20px; } .search-btns { flex-direction:column; } .result-grid { grid-template-columns:1fr; } .article-content { padding:24px; } .article-content h2 { font-size:1.25rem; } .coverage-grid { grid-template-columns:1fr 1fr; } .payment-grid { grid-template-columns:1fr 1fr; } .footer-grid { grid-template-columns:1fr; gap:24px; } .footer-bottom { flex-direction:column; gap:8px; text-align:center; } } /* ============================================================ PROMO AD BANNERS (Google AdSense Style) ============================================================ */ /* --- Shared ad card --- */ .promo-ad { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: all var(--dur) var(--ease); position: relative; } .promo-ad:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .promo-ad-link { display: block; text-decoration: none; color: inherit; } /* "Ad" label */ .promo-ad-label { position: absolute; top: 8px; right: 8px; background: var(--gray-100); color: var(--gray-500); font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: .06em; z-index: 2; } .promo-ad-body { padding: 20px 16px; text-align: center; } /* App icon */ .promo-app-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 4px 12px rgba(10, 94, 181, 0.25); overflow: hidden; } .promo-app-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; } /* ===== APP DOWNLOAD POPUP ===== */ .app-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; } .app-popup-overlay.visible { opacity: 1; visibility: visible; } .app-popup { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); z-index: 9999; background: var(--white); border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,.25); padding: 24px 28px; max-width: 440px; width: calc(100% - 32px); opacity: 0; visibility: hidden; transition: all .4s var(--ease); } .app-popup.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .app-popup-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.4rem; color: var(--gray-400); cursor: pointer; padding: 4px; line-height: 1; } [dir="rtl"] .app-popup-close { right: auto; left: 14px; } .app-popup-close:hover { color: var(--gray-700); } .app-popup-body { display: flex; align-items: center; gap: 16px; } .app-popup-icon { width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.15); } .app-popup-icon img { width: 100%; height: 100%; object-fit: cover; } .app-popup-info { flex: 1; } .app-popup-info h4 { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: 2px; } .app-popup-info p { font-size: .82rem; color: var(--gray-500); margin-bottom: 8px; line-height: 1.4; } .app-popup-info .popup-rating { font-size: .78rem; color: var(--orange); margin-bottom: 10px; } .app-popup-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #00b37a, #00d68f); color: white; border: none; padding: 10px 20px; border-radius: var(--radius-full); font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 14px rgba(0,179,122,.35); } .app-popup-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,179,122,.45); } @media (max-width: 480px) { .app-popup { padding: 18px 16px; } .app-popup-icon { width: 52px; height: 52px; } .app-popup-info h4 { font-size: .9rem; } } .promo-app-name { font-size: .88rem; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; line-height: 1.3; } .promo-app-dev { font-size: .72rem; color: var(--gray-400); margin-bottom: 8px; } .promo-app-desc { font-size: .78rem; color: var(--gray-500); line-height: 1.5; margin-bottom: 14px; } .promo-app-rating { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: .75rem; color: var(--orange); margin-bottom: 12px; } .promo-app-rating .stars { letter-spacing: 1px; } .promo-app-rating .rating-text { color: var(--gray-500); font-weight: 600; } /* Install button */ .promo-install-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 22px; background: var(--primary); color: #fff; border-radius: var(--radius-full); font-size: .82rem; font-weight: 700; letter-spacing: .02em; transition: all var(--dur) var(--ease); white-space: nowrap; } .promo-ad:hover .promo-install-btn { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(10, 94, 181, 0.3); } /* Google Play badge area */ .promo-play-badge { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px; background: var(--gray-50); border-top: 1px solid var(--gray-200); font-size: .7rem; color: var(--gray-400); font-weight: 500; } .promo-play-badge .play-icon { font-size: .9rem; } /* --- Sidebar Ads (Desktop only) --- */ .promo-sidebar { position: fixed; top: 50%; transform: translateY(-50%); width: 220px; z-index: 100; display: none; } .promo-sidebar .promo-ad-body { padding: 24px 18px; } .promo-sidebar .promo-app-icon { width: 64px; height: 64px; font-size: 1.8rem; border-radius: 16px; margin-bottom: 14px; } .promo-sidebar .promo-app-name { font-size: .95rem; margin-bottom: 6px; } .promo-sidebar .promo-app-desc { font-size: .82rem; margin-bottom: 16px; line-height: 1.5; } .promo-sidebar .promo-app-rating { margin-bottom: 14px; } .promo-sidebar .promo-install-btn { padding: 11px 24px; font-size: .85rem; } .promo-sidebar-left { left: 16px; } .promo-sidebar-right { right: 16px; } @media (min-width: 1280px) { .promo-sidebar { display: block; animation: promoFadeIn .6s var(--ease) both; } } @media (min-width: 1280px) and (max-width: 1439px) { .container, .container-narrow { padding-left: 200px !important; padding-right: 200px !important; max-width: 100% !important; } .promo-sidebar { width: 180px; } .promo-sidebar .promo-ad-body { padding: 20px 14px; } .promo-sidebar .promo-app-icon { width: 56px; height: 56px; font-size: 1.5rem; } .promo-sidebar .promo-app-name { font-size: .88rem; } } @media (min-width: 1440px) and (max-width: 1599px) { .container, .container-narrow { padding-left: 230px !important; padding-right: 230px !important; max-width: 100% !important; } .promo-sidebar-left { left: 16px; } .promo-sidebar-right { right: 16px; } .promo-sidebar { width: 200px; } } @media (min-width: 1600px) { .promo-sidebar { width: 220px; } .promo-sidebar-left { left: calc((100vw - 1100px) / 2 - 245px); } .promo-sidebar-right { right: calc((100vw - 1100px) / 2 - 245px); } } html[dir="rtl"] .faq-question { text-align: right; } html[dir="rtl"] .stats .container { justify-content: space-around; } @keyframes promoFadeIn { from { opacity: 0; transform: translateY(-50%) translateX(-10px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } .promo-sidebar-right .promo-ad { animation: promoFadeInR .6s var(--ease) both; } @keyframes promoFadeInR { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } /* --- Inline Ad Banner (All screen sizes) --- */ .promo-inline { max-width: 720px; margin: 28px auto; } .promo-inline .promo-ad { display: flex; flex-direction: row; align-items: center; background: linear-gradient(135deg, var(--primary-50) 0%, var(--white) 100%); } .promo-inline .promo-ad-body { display: flex; align-items: center; gap: 16px; padding: 16px 20px; text-align: left; flex: 1; } .promo-inline .promo-app-icon { width: 48px; height: 48px; min-width: 48px; margin: 0; font-size: 1.3rem; border-radius: 12px; } .promo-inline .promo-ad-info { flex: 1; min-width: 0; } .promo-inline .promo-app-name { font-size: .85rem; margin-bottom: 2px; } .promo-inline .promo-app-desc { font-size: .76rem; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .promo-inline .promo-ad-cta { padding: 0 20px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; } .promo-inline .promo-install-btn { padding: 8px 18px; font-size: .78rem; } .promo-inline .promo-ad-label { position: static; display: inline-block; margin-bottom: 4px; } .promo-inline .promo-play-badge { border-top: none; background: none; padding: 4px 0 0; font-size: .65rem; } /* Inline ad responsive */ @media (max-width: 600px) { .promo-inline .promo-ad { flex-direction: column; } .promo-inline .promo-ad-body { flex-direction: column; text-align: center; padding: 16px; gap: 10px; } .promo-inline .promo-app-desc { white-space: normal; } .promo-inline .promo-ad-cta { padding: 0 0 14px; } } /* --- RTL Support for Ads --- */ html[dir="rtl"] .promo-ad-label { right: auto; left: 8px; } html[dir="rtl"] .promo-inline .promo-ad-body { text-align: right; direction: rtl; } html[dir="rtl"] .promo-inline .promo-ad-cta { padding: 0 0 0 20px; } @media (max-width: 600px) { html[dir="rtl"] .promo-inline .promo-ad-body { text-align: center; } html[dir="rtl"] .promo-inline .promo-ad-cta { padding: 0 0 14px; } } /* ============================================================ SUNDAR UNIQUE LAYOUT OVERRIDES (2026) ============================================================ */ :root { --primary: #0a5b7a; --primary-dark: #073a4f; --primary-light: #e8f5fa; --primary-50: #f4fbfe; --accent: #d97706; --accent-light: #fff4df; --shadow-card: 0 22px 46px rgba(7, 58, 79, .16); } body { background: radial-gradient(circle at 6% 8%, rgba(10, 91, 122, .12) 0%, transparent 33%), radial-gradient(circle at 95% 16%, rgba(217, 119, 6, .12) 0%, transparent 30%), linear-gradient(180deg, #f8fcff 0%, #f2f8fc 52%, #f8fcff 100%); color: #1d3641; } .navbar { background: rgba(255, 255, 255, .96); border-bottom: 2px solid rgba(10, 91, 122, .14); box-shadow: 0 10px 24px rgba(15, 42, 58, .1); } .navbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(217, 119, 6, .7) 18%, rgba(10, 91, 122, .75) 52%, rgba(217, 119, 6, .7) 86%, transparent 100%); } .nav-logo { color: #0d3445; } .nav-logo .icon { background: linear-gradient(140deg, #0a5b7a 0%, #118ab7 100%); border-radius: 12px; box-shadow: 0 7px 16px rgba(7, 58, 79, .26); } .nav-links a { color: #30586b; border-radius: 999px; border: 1px solid transparent; } .nav-links a:hover, .nav-links a.active { color: #0a5b7a; background: rgba(10, 91, 122, .1); border-color: rgba(10, 91, 122, .22); } .lang-toggle { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); box-shadow: 0 8px 20px rgba(180, 83, 9, .26); } .lang-toggle:hover { background: linear-gradient(135deg, #c86b05 0%, #9a4708 100%); } .hero { background: radial-gradient(circle at 18% -12%, rgba(255, 255, 255, .24) 0%, transparent 38%), radial-gradient(circle at 85% 8%, rgba(217, 119, 6, .32) 0%, transparent 34%), linear-gradient(125deg, #073a4f 0%, #0a5b7a 50%, #0f7196 100%); padding: 72px 0 64px; border-bottom: 4px solid rgba(217, 119, 6, .3); } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .045) 0%, transparent 45%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 2px, rgba(255, 255, 255, 0) 2px 22px); pointer-events: none; } .hero::after { inset: auto -180px -120px; height: 230px; background: radial-gradient(circle, rgba(217, 119, 6, .3) 0%, rgba(217, 119, 6, 0) 70%); } .hero .container { display: grid; grid-template-columns: 1.06fr .94fr; max-width: 1110px; gap: 34px; align-items: center; } .hero h1 { font-size: clamp(1.84rem, 3.9vw, 2.75rem); line-height: 1.22; margin-bottom: 12px; } .hero .subtitle { color: rgba(235, 247, 254, .95); max-width: 650px; } .hero .search-box { max-width: 510px; margin-left: auto; background: rgba(255, 255, 255, .98); border: 1px solid rgba(10, 91, 122, .22); border-top: 6px solid var(--accent); border-radius: 18px 18px 26px 26px; box-shadow: var(--shadow-card); padding: 24px 24px 22px; } html[dir="rtl"] .hero .search-box { margin-left: 0; margin-right: auto; } .search-tabs { border: 1px solid rgba(10, 91, 122, .16); border-radius: 12px; background: #f2f9fd; } .search-tab { color: #245369; border-radius: 10px; font-weight: 700; } .search-tab.active { background: linear-gradient(135deg, #0a5b7a 0%, #0f7196 100%); color: #fff; } .search-input { border: 1px solid rgba(10, 91, 122, .24); border-radius: 12px; } .search-input:focus { box-shadow: 0 0 0 4px rgba(10, 91, 122, .15); } .btn-check { background: linear-gradient(135deg, #0a5b7a 0%, #0f7196 100%); } .btn-official { background: #fff9f0; border: 1px solid rgba(217, 119, 6, .42); color: #9a5607; } .article-section { padding: 62px 0 84px; } .toc-box { border: 1px solid rgba(10, 91, 122, .15); border-radius: 18px; box-shadow: 0 15px 32px rgba(7, 58, 79, .1); } .toc-toggle { background: linear-gradient(90deg, #f4fbff 0%, #fef5e8 100%); color: #18485c; } .toc-list li a::before { color: #d97706; } .article-content { background: rgba(255, 255, 255, .99); border: 1px solid rgba(10, 91, 122, .13); border-radius: 16px; box-shadow: 0 18px 36px rgba(7, 58, 79, .08); padding: 34px 30px; } .article-content h2 { color: #0a4f6c; border-left: 6px solid #d97706; padding-left: 12px; border-bottom: none; } .article-content h3 { color: #116f94; } .info-box { border-radius: 12px; border: 1px solid rgba(10, 91, 122, .16); } .coverage-item, .payment-item, .news-card, .method-card, .step-list li, .faq-item { border: 1px solid rgba(10, 91, 122, .14); border-radius: 12px; background: #fafdff; } .faq-icon { background: #fff4df; color: #9a5607; } .page-header { background: radial-gradient(circle at 85% 18%, rgba(217, 119, 6, .24) 0%, transparent 35%), linear-gradient(130deg, #083f55 0%, #0d6587 100%); border-bottom: 3px solid rgba(217, 119, 6, .34); } .breadcrumb { background: #f5fbff; border-top: 1px solid rgba(10, 91, 122, .14); border-bottom: 1px solid rgba(10, 91, 122, .14); } .footer { background: linear-gradient(150deg, #041f2b 0%, #0a3a4e 52%, #062a3a 100%); } .footer-brand .nav-logo .icon { background: linear-gradient(145deg, #d97706 0%, #0f7196 100%); } .footer-links a { color: rgba(219, 239, 250, .9); } .footer-links a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(144, 197, 221, .25); } .promo-ad { border: 1px solid rgba(10, 91, 122, .14); box-shadow: 0 14px 30px rgba(7, 58, 79, .1); } html[dir="rtl"] .article-content h2 { border-left: none; border-right: 6px solid #d97706; padding-left: 0; padding-right: 12px; } @media (max-width: 992px) { .hero .container { grid-template-columns: 1fr; } .hero .content-en, .hero .content-ur, html[dir="rtl"] .hero .content-en, html[dir="rtl"] .hero .content-ur { text-align: center; } .hero .search-box, html[dir="rtl"] .hero .search-box { margin: 0 auto; max-width: 700px; } .nav-links { background: linear-gradient(160deg, #f5fbff 0%, #e9f4fa 100%); border: 1px solid rgba(10, 91, 122, .18); } } @media (max-width: 768px) { .hero { padding: 56px 0 48px; } .hero .search-box { padding: 22px 18px; border-radius: 14px; } .article-content { padding: 26px 20px; border-radius: 13px; } }