/* =============================================================================
   Responsive overrides — بیمه البرز
   Targets: mobile (≤575), tablet (≤900/991), and small-tablet/landscape (≤1100).
   Loaded after site.css and admin.css so these rules win without !important.
   ============================================================================= */

/* ---- global: kill any accidental horizontal scroll ------------------------- */
html, body { overflow-x: hidden; max-width: 100vw; }
img, svg, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* ============================================================ PUBLIC SITE */

/* shell padding shrinks on phones */
@media (max-width: 575px) {
    .shell { padding-inline: 14px; }
}

/* ----------------------------------------------- header (top row + nav) */
@media (max-width: 991px) {
    .hdr-top-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding-block: 10px;
        align-items: center;
    }
    .brand-logo { gap: 9px; }
    .brand-logo .mark { width: 42px; height: 42px; }
    .brand-logo .name b { font-size: 1.02rem; }
    .brand-logo .name small { font-size: .68rem; }
    .hdr-actions {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .call-link .ic { width: 36px; height: 36px; }
    .call-link .lbl { display: none; }
    .btn-pill { padding: 8px 14px; font-size: .8rem; gap: 6px; }
    .btn-pill .material-symbols-rounded { font-size: 17px; }
    .btn-account .soon { display: none; }
}
@media (max-width: 575px) {
    .hdr-top-inner { padding-block: 8px; }
    /* Compact top-row: logo + hamburger on the left/right ends, action pills wrap below. */
    .brand-logo { flex: 1 1 auto; min-width: 0; }
    .brand-logo .name b { font-size: .95rem; }
    .brand-logo .name small { display: none; }
    .hdr-actions { flex: 1 1 100%; order: 3; justify-content: space-between; gap: 6px; }
    .hdr-actions .btn-pill { flex: 1 1 auto; justify-content: center; padding: 8px 10px; }
    .call-link { order: -1; }
    .nav-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px;
        border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--brand); cursor: pointer; }
    .hdr-nav .shell { padding: 0 14px; }
}

/* ------------------------------------------------------- hero slider */
@media (max-width: 991px) {
    .hero { padding-top: 22px; }
    .hero-slider { border-radius: 18px; }
    .hero-slide { min-height: 280px; background-size: cover; background-position: center; }
    .hero-slide-overlay {
        background: linear-gradient(to top, rgba(7,40,24,.6) 0%, rgba(7,40,24,.2) 70%, transparent 100%);
    }
    .hero-slide-content { padding: 28px 24px; max-width: 100%; }
    .hero-slide-content h1 { font-size: 1.45rem; line-height: 1.5; margin-bottom: 10px; }
    .hero-slide-content p { font-size: .9rem; line-height: 1.75; margin-bottom: 16px; }
    .hero-play { padding: 10px 18px; font-size: .85rem; }
    .hero-arrow { width: 38px; height: 38px; }
    .hero-arrow.next { right: 8px; }
    .hero-arrow.prev { left: 8px; }
    .hero-dots { bottom: 10px; }
    .hero-dot { width: 8px; height: 8px; }
    .hero-dot.active { width: 22px; }
}
@media (max-width: 575px) {
    .hero { padding-top: 14px; }
    .hero-slide { min-height: 240px; }
    .hero-slide-content { padding: 22px 18px; }
    .hero-slide-content h1 { font-size: 1.2rem; }
    .hero-slide-content p { font-size: .85rem; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
    .hero-arrow { display: none; }
}

/* --------------------------------------------- sections / sliders / cards */
@media (max-width: 991px) {
    .section-pad { padding-block: 36px; }
    .sec-head { flex-wrap: wrap; gap: 10px; }
    .sec-title { font-size: 1.15rem; }
    .sec-actions { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 575px) {
    .section-pad { padding-block: 28px; }
    .sec-head { margin-bottom: 18px; }
    .sec-title { font-size: 1.05rem; gap: 6px; }
    .sec-title .material-symbols-rounded { font-size: 22px; }
    /* Service & news horizontal tracks → full-width single card per page */
    .svc-track, .news-track { grid-auto-columns: 100% !important; gap: 14px !important; }
    .svc-card, .news-card { padding: 16px; }
    .news-thumb img, .news-thumb.ph { height: 160px; }
}

/* ------------------------------------------------------------- modals */
@media (max-width: 575px) {
    .modal-dialog { margin: .5rem; }
    #khesaratFrame { height: 240px; }
}

/* ----------------------------------------------- breadcrumb + sec-actions */
@media (max-width: 575px) {
    .breadcrumb.bc { font-size: .8rem; flex-wrap: wrap; }
    .slider-nav button { width: 36px; height: 36px; }
    .slider-nav .material-symbols-rounded { font-size: 18px; }
    .chip-link { font-size: .8rem; padding: 6px 12px; }
}

/* ---------------------------------------------------------- about block */
@media (max-width: 991px) {
    .about-grid { grid-template-columns: 1fr; gap: 22px; }
    .about-logo { order: -1; }
    .about-pills { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 575px) {
    .about-pills a { font-size: .78rem; padding: 7px 12px; }
    .about-block h2 { font-size: 1.25rem; }
}

/* -------------------------------------------------------- life services */
@media (max-width: 575px) {
    .life-list { gap: 10px; }
    .life-row { padding: 14px; gap: 10px; }
    .life-row .ic { width: 42px; height: 42px; }
    .life-row .ic .material-symbols-rounded { font-size: 22px; }
    .life-row .body b { font-size: .88rem; }
    .life-row .body small { font-size: .76rem; }
}

/* --------------------------------------------------------- social banner */
@media (max-width: 575px) {
    .social-banner { padding: 24px 20px; text-align: center; gap: 14px; }
    .social-icons { justify-content: center; }
}

/* --------------------------------------------------------- footer */
@media (max-width: 991px) {
    .foot-top-inner { flex-wrap: wrap; gap: 8px; padding: 12px 0; justify-content: center; text-align: center; }
    .foot-divider { display: none; }
    .foot-main { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; padding-block: 32px; }
    .foot-col h4 { font-size: 1rem; }
    .foot-bottom .shell { flex-wrap: wrap; gap: 12px; }
    .foot-bottom p { font-size: .76rem; line-height: 1.9; }
}
@media (max-width: 575px) {
    .foot-main { grid-template-columns: 1fr; padding-block: 26px; }
    .foot-col.intro { text-align: center; }
    .foot-col.intro .foot-social, .foot-col.intro .foot-trust { justify-content: center; }
    .foot-map .map-img { height: 100px; }
    .back-top { width: 40px; height: 40px; }
}

/* --------------------------------------------------------- article (news view) */
@media (max-width: 900px) {
    .article-body { grid-template-columns: 1fr; gap: 22px; }
    .article-side { position: static; top: auto; }
}
@media (max-width: 575px) {
    .article { padding: 22px 0 36px; }
    .article-head h1 { font-size: 1.35rem; line-height: 1.6; }
    .article-meta { gap: 10px; font-size: .78rem; }
    .article-lead { font-size: .98rem; padding: 14px 16px; }
    .article-content { font-size: .94rem; line-height: 1.95; }
    .engage { padding: 14px 16px; gap: 12px; }
    .like-btn { padding: 8px 14px; font-size: .85rem; }
    .stars .star { font-size: 24px; }
    .comment-form-card { padding: 18px; }
}

/* --------------------------------------------------------- forms / message-form */
@media (max-width: 900px) {
    .msg-grid { grid-template-columns: 1fr !important; gap: 18px; }
}
@media (max-width: 575px) {
    .msg-card { padding: 20px; }
    .fld-row { grid-template-columns: 1fr !important; gap: 0; }
    .fld { margin-bottom: 14px; }
}

/* --------------------------------------------------------- licenses + medical-center view */
@media (max-width: 900px) {
    .lic-grid { grid-template-columns: 1fr; gap: 16px; }
    .mcv-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 575px) {
    .lic-card { padding: 22px; }
    .mcv-head { gap: 12px; }
    .mcv-ic { width: 52px; height: 52px; }
    .mcv-title { font-size: 1.25rem; }
    .mcv-map { height: 240px; }
    .mcv-actions .btn-pill { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------- generic page-grid */
@media (max-width: 575px) {
    .page-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ============================================================ ADMIN PANEL */

/* Backdrop is invisible on desktop; only the mobile drawer needs it. */
.admin-backdrop { display: none; }

/* The admin shell becomes a drawer on tablet+phone. */
@media (max-width: 900px) {
    .admin-backdrop { display: block; }
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: fixed; right: 0; top: 0; bottom: 0;
        width: 280px; max-width: 86vw; z-index: 1100;
        transform: translateX(105%);
        transition: transform .32s var(--ease);
        box-shadow: -10px 0 30px rgba(0,0,0,.25);
        overflow-y: auto;
    }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,.45);
        opacity: 0; visibility: hidden; transition: all .25s var(--ease); z-index: 1050;
        cursor: pointer;
    }
    .admin-shell.menu-open .admin-backdrop { opacity: 1; visibility: visible; }
    .admin-burger { display: inline-grid !important; place-items: center; }
    .admin-topbar { padding: 12px 18px; gap: 10px; }
    .admin-topbar h1 { font-size: 1.05rem; }
    .topbar-right { gap: 8px; }
    .topbar-right .btn .material-symbols-rounded { font-size: 17px; }
    .topbar-user .avatar { width: 32px; height: 32px; }
    .topbar-user { font-size: .82rem; }
    .admin-content { padding: 18px; }
}
@media (max-width: 575px) {
    .admin-topbar h1 { font-size: .95rem; }
    .topbar-right > a.btn span:not(.material-symbols-rounded) { display: none; }
    .topbar-user span:not(.avatar):not(.material-symbols-rounded) { display: none; }
    .admin-content { padding: 14px; }
}

/* tables become horizontally scrollable on small screens */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
    table.grid { min-width: 640px; }
    table.grid th, table.grid td { padding: 11px 12px; font-size: .82rem; }
    .panel-head { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
    .panel-head h2 { font-size: .98rem; }
    .panel-body { padding: 16px; }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .stat-card { padding: 16px; gap: 12px; }
    .stat-card .ic { width: 48px; height: 48px; }
    .stat-card .num { font-size: 1.5rem; }
}
@media (max-width: 575px) {
    .stat-grid { grid-template-columns: 1fr; }
    .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .tab { white-space: nowrap; }
    /* CRUD form grids → single column on phones */
    .news-form-grid, .form-grid-2 { grid-template-columns: 1fr !important; }
    .publish-card, .seo-panel { position: static; }
    .form-card { padding: 18px; }
    .form-actions { flex-wrap: wrap; }
    .form-actions .btn { flex: 1 1 auto; justify-content: center; }
    .img-uploader { flex-direction: column; gap: 12px; }
    .img-preview { width: 100%; max-width: 280px; }
    .breadcrumb-admin { font-size: .8rem; flex-wrap: wrap; }
    .admin-content > .alert { padding: 10px 14px; font-size: .85rem; }
}

/* admin login screen */
@media (max-width: 575px) {
    .auth-screen { padding: 16px; }
    .auth-box { padding: 28px 22px; border-radius: 18px; }
    .auth-box .auth-logo .mark { width: 56px; height: 56px; }
    .auth-box h1 { font-size: 1.05rem; }
}

/* ============================================================ COMPANY PORTAL */

@media (max-width: 720px) {
    .portal-topbar-inner { flex-wrap: wrap; gap: 10px; padding: 10px 0; }
    .portal-brand b { font-size: .92rem; }
    .portal-brand small { font-size: .68rem; }
    .portal-user { flex: 1 1 100%; justify-content: flex-end; gap: 8px; }
    .portal-user .who { display: none; }
    .portal-site, .portal-logout { padding: 7px 10px; font-size: .78rem; }
    .portal-row { flex-direction: column; gap: 14px; }
    .portal-main { padding: 18px 0 28px; }
}
@media (max-width: 575px) {
    .ref-box { flex-direction: column; }
    .ref-box .btn { width: 100%; justify-content: center; }
    .plan-line { flex-wrap: wrap; }
}