/* =========================================================
   LORNET ONLINE
   Global Modern Style
   ========================================================= */

:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#eff6ff;

    --secondary:#0f766e;
    --secondary-dark:#115e59;
    --secondary-light:#f0fdfa;

    --success:#16a34a;
    --success-dark:#15803d;
    --success-light:#f0fdf4;

    --danger:#dc2626;
    --danger-dark:#b91c1c;
    --danger-light:#fef2f2;

    --warning:#d97706;
    --warning-dark:#b45309;
    --warning-light:#fffbeb;

    --text:#172033;
    --text-dark:#0f172a;
    --muted:#64748b;

    --background:#f5f7fb;
    --surface:#ffffff;

    --border:#e2e8f0;
    --border-dark:#cbd5e1;

    --shadow-sm:0 2px 8px rgba(15,23,42,.05);
    --shadow:0 8px 28px rgba(15,23,42,.07);
    --shadow-lg:0 16px 45px rgba(15,23,42,.11);

    --radius-sm:9px;
    --radius:12px;
    --radius-lg:16px;
    --radius-xl:20px;

    --transition:all .22s ease;
}


/* =========================================================
   RESET
   ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--background);
    color:var(--text);
    font-family:Vazirmatn,Tahoma,"Segoe UI",Arial,sans-serif;
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

img{
    max-width:100%;
    height:auto;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container{
    width:min(1120px,calc(100% - 32px));
    margin:auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(226,232,240,.95);
    box-shadow:0 3px 18px rgba(15,23,42,.04);
}

.nav-wrap{
    min-height:72px;
    display:flex;
    align-items:center;
    gap:24px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    white-space:nowrap;
    color:var(--text-dark);
}

.brand-mark{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    font-weight:900;
    box-shadow:0 7px 18px rgba(37,99,235,.24);
}

.main-nav{
    display:flex;
    align-items:center;
    gap:5px;
    flex:1;
}

.main-nav a,
.nav-account{
    padding:9px 13px;
    border-radius:10px;
    font-size:13px;
    font-weight:800;
    color:#475569;
    transition:var(--transition);
}

.main-nav a:hover,
.nav-account:hover{
    background:var(--primary-light);
    color:var(--primary-dark);
}

.nav-actions{
    margin-right:auto;
}

.menu-toggle{
    display:none;
    border:1px solid var(--border);
    background:#fff;
    color:var(--text);
    border-radius:10px;
    padding:8px 11px;
    font-size:18px;
    cursor:pointer;
    transition:var(--transition);
}

.menu-toggle:hover{
    border-color:var(--primary);
    color:var(--primary);
    background:var(--primary-light);
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
    padding:82px 0 68px;
    background:
        radial-gradient(circle at 85% 20%,rgba(37,99,235,.08),transparent 30%),
        radial-gradient(circle at 10% 80%,rgba(15,118,110,.06),transparent 28%),
        linear-gradient(180deg,#ffffff 0%,#f5f7fb 100%);
}

.hero-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:42px;
    align-items:center;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    color:var(--primary);
    background:var(--primary-light);
    border:1px solid #dbeafe;
    padding:5px 11px;
    border-radius:999px;
    font-weight:900;
    margin-bottom:14px;
}

.hero h1{
    font-size:44px;
    line-height:1.35;
    margin:0 0 18px;
    color:var(--text-dark);
    letter-spacing:-.5px;
}

.hero p{
    color:var(--muted);
    max-width:680px;
    margin:0;
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-box{
    display:flex;
    gap:10px;
    margin-top:26px;
}

.search-box input{
    flex:1;
    height:52px;
    border:1px solid var(--border-dark);
    border-radius:12px;
    padding:0 16px;
    font:inherit;
    background:#fff;
    color:var(--text);
    outline:none;
    transition:var(--transition);
    box-shadow:var(--shadow-sm);
}

.search-box input::placeholder{
    color:#94a3b8;
}

.search-box input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(37,99,235,.10);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 17px;
    border-radius:11px;
    border:1px solid var(--border-dark);
    background:#fff;
    color:#334155;
    font-weight:800;
    font-size:13px;
    cursor:pointer;
    transition:var(--transition);
    box-shadow:0 2px 5px rgba(15,23,42,.03);
}

.button:hover{
    transform:translateY(-2px);
    box-shadow:0 7px 18px rgba(15,23,42,.10);
}

.button:active{
    transform:translateY(0);
}

.button.primary{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    border-color:#2563eb;
    box-shadow:0 7px 18px rgba(37,99,235,.22);
}

.button.primary:hover{
    background:linear-gradient(135deg,#1d4ed8,#1e40af);
    box-shadow:0 10px 25px rgba(37,99,235,.30);
}

.button.secondary{
    background:linear-gradient(135deg,#0f766e,#115e59);
    color:#fff;
    border-color:#0f766e;
    box-shadow:0 7px 18px rgba(15,118,110,.20);
}

.button.secondary:hover{
    box-shadow:0 10px 25px rgba(15,118,110,.28);
}

.button.success{
    background:#f0fdf4;
    color:#15803d;
    border-color:#bbf7d0;
}

.button.success:hover{
    background:#dcfce7;
    border-color:#86efac;
}

.button.danger{
    background:#fef2f2;
    color:#b91c1c;
    border-color:#fecaca;
}

.button.danger:hover{
    background:#fee2e2;
    border-color:#fca5a5;
}

.button.warning{
    background:#fffbeb;
    color:#b45309;
    border-color:#fde68a;
}

.button.warning:hover{
    background:#fef3c7;
}

.button.outline{
    background:#fff;
    color:#2563eb;
    border-color:#bfdbfe;
}

.button.outline:hover{
    background:#eff6ff;
    border-color:#2563eb;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section{
    padding:60px 0;
}

.section-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:end;
    margin-bottom:24px;
}

.section h2{
    margin:0;
    font-size:27px;
    color:var(--text-dark);
}

.muted{
    color:var(--muted);
}


/* =========================================================
   GRID
   ========================================================= */

.grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}


/* =========================================================
   CARDS
   ========================================================= */

.card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:23px;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.card:hover{
    transform:translateY(-4px);
    border-color:#bfdbfe;
    box-shadow:var(--shadow);
}

.card h3{
    margin:0 0 9px;
    font-size:18px;
    color:var(--text-dark);
}

.card p{
    color:var(--muted);
    font-size:13px;
    margin:0 0 16px;
}


/* =========================================================
   PILL
   ========================================================= */

.pill{
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    border-radius:999px;
    background:var(--primary-light);
    color:var(--primary-dark);
    border:1px solid #dbeafe;
    font-size:11px;
    font-weight:900;
}


/* =========================================================
   PAGE
   ========================================================= */

.page{
    padding:52px 0 82px;
}

.page-header{
    margin-bottom:30px;
}

.page-header h1{
    margin:0 0 9px;
    font-size:35px;
    line-height:1.4;
    color:var(--text-dark);
}

.page-header p{
    color:var(--muted);
    margin:0;
}


/* =========================================================
   FORM
   ========================================================= */

.form-card{
    max-width:760px;
    margin:auto;
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:28px;
    box-shadow:var(--shadow-sm);
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.field.full{
    grid-column:1/-1;
}

.field label{
    font-size:13px;
    font-weight:900;
    color:#334155;
}

.field input,
.field select,
.field textarea{
    width:100%;
    border:1px solid var(--border-dark);
    border-radius:10px;
    background:#fff;
    color:var(--text);
    padding:11px 13px;
    font:inherit;
    outline:none;
    transition:var(--transition);
}

.field input::placeholder,
.field textarea::placeholder{
    color:#94a3b8;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.field textarea{
    min-height:130px;
    resize:vertical;
}


/* =========================================================
   ALERTS
   ========================================================= */

.alert{
    padding:13px 15px;
    border-radius:11px;
    margin-bottom:18px;
    font-size:13px;
    font-weight:700;
}

.alert.error{
    background:#fef2f2;
    color:#b91c1c;
    border:1px solid #fecaca;
}

.alert.success{
    background:#f0fdf4;
    color:#15803d;
    border:1px solid #bbf7d0;
}

.alert.warning{
    background:#fffbeb;
    color:#92400e;
    border:1px solid #fde68a;
}


/* =========================================================
   TABLE
   ========================================================= */

.table-wrap{
    overflow:auto;
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

.table{
    width:100%;
    border-collapse:collapse;
    min-width:760px;
}

.table th,
.table td{
    padding:14px 15px;
    border-bottom:1px solid #eef2f7;
    text-align:right;
    font-size:12px;
}

.table th{
    background:#f8fafc;
    color:#475569;
    font-weight:900;
}

.table tbody tr{
    transition:background .18s ease;
}

.table tbody tr:hover{
    background:#f8fbff;
}

.table tbody tr:last-child td{
    border-bottom:0;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
    margin-top:40px;
    background:#0f172a;
    color:#cbd5e1;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:32px;
    padding:50px 0;
}

.site-footer p{
    color:#94a3b8;
    font-size:12px;
}

.site-footer h3{
    color:#fff;
    font-size:14px;
    margin:0 0 12px;
}

.site-footer a{
    display:block;
    color:#94a3b8;
    font-size:12px;
    padding:4px 0;
    transition:var(--transition);
}

.site-footer a:hover{
    color:#fff;
    transform:translateX(-2px);
}

.footer-bottom{
    text-align:center;
    padding:16px;
    border-top:1px solid #1e293b;
    color:#64748b;
    font-size:11px;
}


/* =========================================================
   EMPTY
   ========================================================= */

.empty{
    text-align:center;
    padding:50px 20px;
    color:var(--muted);
    background:#fff;
    border:1px dashed var(--border-dark);
    border-radius:var(--radius-lg);
}


/* =========================================================
   STATS
   ========================================================= */

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.stat{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:21px;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.stat:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow);
    border-color:#bfdbfe;
}

.stat small{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-bottom:4px;
}

.stat strong{
    font-size:28px;
    color:var(--text-dark);
}


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

.admin-body{
    background:#f1f5f9;
}

.admin-nav{
    background:#0f172a;
    color:#fff;
    padding:16px;
    box-shadow:0 4px 18px rgba(15,23,42,.12);
}

.admin-nav .container{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

.admin-nav a{
    padding:9px 11px;
    border-radius:9px;
    color:#cbd5e1;
    font-size:12px;
    font-weight:700;
    transition:var(--transition);
}

.admin-nav a:hover{
    background:#2563eb;
    color:#fff;
}

.admin-nav a.active{
    background:#2563eb;
    color:#fff;
}

.admin-main{
    padding:32px 0 72px;
}


/* =========================================================
   ERROR PAGE
   ========================================================= */

.error-code{
    font-size:76px;
    line-height:1;
    font-weight:900;
    color:var(--primary);
    margin-bottom:15px;
}


/* =========================================================
   PROSE
   ========================================================= */

.prose{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:30px;
    box-shadow:var(--shadow-sm);
}

.prose h2,
.prose h3{
    margin-top:25px;
    color:var(--text-dark);
}

.prose h2:first-child,
.prose h3:first-child{
    margin-top:0;
}

.prose p,
.prose li{
    color:#475569;
    font-size:14px;
}

.prose a{
    color:var(--primary);
    font-weight:700;
}

.prose a:hover{
    color:var(--primary-dark);
}


/* =========================================================
   CTA
   ========================================================= */

.cta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px;
}


/* =========================================================
   DETAIL LIST
   ========================================================= */

.detail-list{
    display:grid;
    gap:12px;
}

.detail-row{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:13px 0;
    border-bottom:1px solid #eef2f7;
}

.detail-row:last-child{
    border-bottom:0;
}


/* =========================================================
   SERVICE CATEGORY
   ========================================================= */

.service-category{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:20px;
    margin-bottom:18px;
    box-shadow:var(--shadow-sm);
}

.service-category h2,
.service-category h3{
    color:var(--text-dark);
}

.service-item{
    background:#fff;
    border:1px solid var(--border);
    border-radius:13px;
    padding:17px;
    transition:var(--transition);
}

.service-item:hover{
    border-color:#bfdbfe;
    box-shadow:var(--shadow-sm);
    transform:translateY(-2px);
}

.city-contact{
    background:var(--primary-light);
    border:1px solid #dbeafe;
    border-radius:var(--radius-lg);
    padding:20px;
    color:#1e3a8a;
}


/* =========================================================
   GLOBAL LINKS
   ========================================================= */

a{
    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease;
}


/* =========================================================
   FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(37,99,235,.22);
    outline-offset:2px;
}


/* =========================================================
   RESPONSIVE 850
   ========================================================= */

@media(max-width:850px){

    .hero-grid,
    .grid,
    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

    .main-nav{
        display:none;
    }

    .main-nav.open{
        display:flex;
        position:absolute;
        top:72px;
        left:16px;
        right:16px;
        background:#fff;
        border:1px solid var(--border);
        border-radius:14px;
        padding:10px;
        flex-direction:column;
        align-items:stretch;
        box-shadow:var(--shadow-lg);
    }

    .main-nav.open a{
        padding:11px 13px;
    }

    .menu-toggle{
        display:block;
    }

    .nav-actions{
        margin-right:0;
    }

    .stats{
        grid-template-columns:1fr 1fr;
    }

    .hero h1{
        font-size:38px;
    }
}


/* =========================================================
   RESPONSIVE 600
   ========================================================= */

@media(max-width:600px){

    .container{
        width:min(100% - 22px,1120px);
    }

    .hero{
        padding:58px 0 48px;
    }

    .hero-grid,
    .grid,
    .footer-grid,
    .form-grid{
        grid-template-columns:1fr;
    }

    .hero h1{
        font-size:31px;
        line-height:1.45;
    }

    .hero p{
        font-size:14px;
    }

    .search-box{
        flex-direction:column;
    }

    .search-box .button{
        width:100%;
    }

    .section{
        padding:45px 0;
    }

    .section-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .section h2{
        font-size:23px;
    }

    .page{
        padding:40px 0 65px;
    }

    .page-header h1{
        font-size:28px;
    }

    .form-card{
        padding:20px;
    }

    .stats{
        grid-template-columns:1fr 1fr;
    }

    .stat{
        padding:17px;
    }

    .stat strong{
        font-size:24px;
    }

    .prose{
        padding:21px;
    }

    .cta{
        flex-direction:column;
    }

    .cta .button{
        width:100%;
    }

    .detail-row{
        flex-direction:column;
        gap:4px;
    }

    .footer-grid{
        gap:22px;
        padding:38px 0;
    }
}


/* =========================================================
   RESPONSIVE 400
   ========================================================= */

@media(max-width:400px){

    .stats{
        grid-template-columns:1fr;
    }

    .nav-wrap{
        gap:10px;
    }

    .brand{
        font-size:13px;
    }

    .brand-mark{
        width:36px;
        height:36px;
    }

    .hero h1{
        font-size:27px;
    }
}
/* LORNET_SERVICE_GUIDE_CSS_V4 */
.lornet-service-guide{margin-top:28px;display:grid;gap:18px}
.lornet-guide-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm)}
.lornet-guide-title{font-size:18px;font-weight:900;color:var(--text-dark);margin-bottom:16px}
.lornet-guide-columns{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.lornet-guide-card h3{font-size:15px;margin:0 0 10px;color:var(--text-dark)}
.lornet-guide-card ul,.lornet-guide-card ol{margin:0;padding-right:22px;color:var(--muted)}
.lornet-guide-card li{margin:6px 0}
.lornet-contact-card{background:linear-gradient(180deg,#fff,#f8fbff)}
.lornet-contact-card p{margin:0 0 16px;color:var(--muted)}
.lornet-call-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:11px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:900;box-shadow:0 7px 18px rgba(37,99,235,.22)}
.lornet-phone{margin-top:10px;font-weight:900;direction:ltr;text-align:right;color:var(--text-dark)}
@media(max-width:700px){.lornet-guide-columns{grid-template-columns:1fr}.lornet-guide-card{padding:18px}.lornet-call-button{width:100%}}