/* ═══════════════════════════════════════════════
   GLOBAL CALCULATOR RESPONSIVE FIXES
   All calculator page templates share these styles
═══════════════════════════════════════════════ */

/* ── Hero Section ── */
@media(max-width:768px){
  .hero-text h1{font-size:26px !important}
  .hero-text p{font-size:13px !important;padding:0 .5rem}
  .hero{padding:2rem 1rem 0 !important}
}
@media(max-width:480px){
  .hero-text h1{font-size:22px !important}
  .hero-text p{font-size:12.5px !important}
}

/* ── Breadcrumb ── */
@media(max-width:480px){
  .breadcrumb{padding:.5rem 1rem}
  .breadcrumb-in{font-size:11px;flex-wrap:wrap;gap:4px}
}

/* ── Calculator Card ── */
@media(max-width:768px){
  .calc-card{padding:1.25rem !important;border-radius:12px 12px 0 0 !important}
}
@media(max-width:480px){
  .calc-card{padding:1rem !important}
}

/* ── Form Rows - Global ── */
@media(max-width:640px){
  .form-row{grid-template-columns:1fr 1fr !important}
  .form-row.three{grid-template-columns:1fr 1fr !important}
}
@media(max-width:420px){
  .form-row{grid-template-columns:1fr !important}
  .form-row.two{grid-template-columns:1fr !important}
  .form-row.three{grid-template-columns:1fr !important}
}

/* ── Stat/Result Grids ── */
@media(max-width:640px){
  .stat-grid{grid-template-columns:1fr 1fr !important}
  .result-grid{grid-template-columns:1fr 1fr !important}
  .stat-box .sb-val{font-size:16px !important}
}
@media(max-width:380px){
  .stat-grid{grid-template-columns:1fr !important}
}

/* ── Content Grid (Article + Sidebar) ── */
@media(max-width:860px){
  .content-grid{grid-template-columns:1fr !important}
  .sidebar-card{position:static !important}
  .sidebar{position:static !important}
}

/* ── Article Typography ── */
@media(max-width:640px){
  .article h2{font-size:17px !important}
  .article h3{font-size:14px !important}
  .article p,.article li{font-size:13.5px !important}
  .wrap{padding:1.5rem 1rem !important}
}

/* ── Tables ── */
@media(max-width:640px){
  .sched-table,.data-table,.diff-table,.comp-table,.amounts-table,.dates-table{font-size:11px}
  .sched-table th,.sched-table td,
  .data-table th,.data-table td{padding:6px 4px}
  .comp-table{display:block;overflow-x:auto}
}

/* ── Net Main Result ── */
@media(max-width:480px){
  .net-main .amount{font-size:34px !important}
  .ovu-main .ov-date{font-size:20px !important}
  .due-main .due-date{font-size:22px !important}
}

/* ── Stat Box 3-col → 2-col → 1-col ── */
@media(max-width:640px){
  .stat-grid.three-col{grid-template-columns:1fr 1fr !important}
}
@media(max-width:380px){
  .stat-grid.three-col{grid-template-columns:1fr !important}
}

/* ── Rate Toggle / Tab Buttons ── */
@media(max-width:420px){
  .rate-toggle,.buysell-toggle{flex-direction:column}
  .rtog,.bs-btn{flex:unset}
}

/* ── Personal Loan Schedule Table ── */
@media(max-width:640px){
  .sched-scroll{max-height:260px}
  .sched-table{font-size:11px}
}

/* ── Tranche Row (Stocks multi-buy) ── */
@media(max-width:480px){
  .tranche-row{grid-template-columns:1fr 1fr auto !important}
}

/* ── Tabs (multi-tab calculators) ── */
@media(max-width:520px){
  .tabs{flex-wrap:wrap}
  .tab{flex:unset;width:calc(50% - 3px);font-size:12px;padding:9px 4px}
}
@media(max-width:380px){
  .tab{width:100%}
}

/* ── DBR / Info Boxes ── */
@media(max-width:480px){
  .dbr-box,.tip-box,.info-box,.warn-box,.success-box{padding:.75rem 1rem}
  .dbr-detail{font-size:12px}
}

/* ── Fertile Window Days (Ovulation) ── */
@media(max-width:480px){
  .fw-days{gap:3px}
  .fw-day{padding:.4rem .15rem;font-size:10px}
  .fw-day .fd-date{font-size:13px}
  .fw-day .fd-label{font-size:8.5px}
}

/* ── Calendar Toggle (Miladi / Hijri) ── */
@media(max-width:380px){
  .cal-toggle{flex-direction:column}
  .tog{padding:10px}
}

/* ── Education / Score Grid ── */
@media(max-width:640px){
  .score-grid,.subjects-grid{grid-template-columns:1fr !important}
}

/* ── Nitaqat Range Bands ── */
@media(max-width:560px){
  .band-grid{grid-template-columns:1fr 1fr !important}
}
@media(max-width:380px){
  .band-grid{grid-template-columns:1fr !important}
}

/* ── Sleep Cycles ── */
@media(max-width:480px){
  .cycle-row{flex-direction:column;gap:6px}
  .cycle-time{font-size:20px !important}
}

/* ── Work Calculator Grids ── */
@media(max-width:640px){
  .pay-grid,.retire-grid,.salary-grid{grid-template-columns:1fr !important}
}

/* ── Percentage Calculator Modes ── */
@media(max-width:520px){
  .pct-tabs{flex-wrap:wrap}
  .pct-tab{width:calc(50% - 3px)}
}

/* ── Scientific Calculator ── */
@media(max-width:480px){
  .sr{grid-template-columns:repeat(6,1fr) !important}
  .b{padding:8px 2px;font-size:10px}
  .cv{font-size:22px !important}
}

/* ── FAQ Items ── */
@media(max-width:480px){
  .faq-q{font-size:13px;padding:.875rem 1rem}
  .faq-a{font-size:12.5px;padding:.75rem 1rem .875rem}
}

/* ── Condition Grid (2-col) ── */
@media(max-width:560px){
  .cond-grid{grid-template-columns:1fr !important}
}

/* ── Related Calculators Grid ── */
@media(max-width:480px){
  .related-grid{grid-template-columns:1fr !important}
}

/* ── Sections / Panels padding ── */
@media(max-width:640px){
  .panel{padding:1.25rem !important}
}
@media(max-width:480px){
  .panel{padding:1rem !important}
}

/* ── Section Intro Box ── */
@media(max-width:640px){
  .intro{padding:1.1rem !important}
  .intro h2{font-size:15px}
}

/* ── Dep Table (Citizen Account) ── */
@media(max-width:480px){
  .dep-table th,.dep-table td{padding:6px 8px;font-size:12px}
  .dep-table input[type=number]{width:70px;font-size:12px}
}

/* ── Trimester Grid ── */
@media(max-width:640px){
  .trimester-grid,.stats-row{grid-template-columns:1fr 1fr !important}
}
@media(max-width:420px){
  .trimester-grid{grid-template-columns:1fr !important}
  .stats-row{grid-template-columns:1fr 1fr !important}
}

/* ── General overflow safety ── */
img,video,iframe,table{max-width:100%}
@media(max-width:768px){
  .page{overflow-x:hidden}
  *{word-break:break-word}
}