/*
===============================================================================
FILE: /public_html/assets/css/layout.css
PROJECT: Jassas Net
VERSION: V1.1.0-JASSAS-LAYOUT-FIX
FUNCTION: Main layout system for home page, hero, services, form, cities, modal
AUTHOR: Jassas Net
STATUS: PRODUCTION READY
CREATED: 2026-06-07
UPDATED: 2026-06-16
===============================================================================
*/

.page{
    width:100%;
    padding-bottom:110px;
}

main{
    width:100%;
    position:relative;
    z-index:2;
}

/* Hero */

.jassas-hero-clean{
    width:min(94%,1180px);
    margin:16px auto 18px;
    position:relative;
    overflow:hidden;
    border-radius:34px;
    min-height:500px;
    display:grid;
    grid-template-columns:1fr .72fr;
    gap:24px;
    align-items:center;
    padding:42px;
    box-shadow:var(--j-shadow-strong);
}

.jassas-hero-clean::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:42px 42px;
    pointer-events:none;
}

.hero-content,
.hero-visual{
    position:relative;
    z-index:2;
}

.jassas-hero-clean h1{
    margin:0;
    max-width:680px;
    font-size:clamp(42px,6vw,76px);
    line-height:1.1;
    font-weight:900;
    letter-spacing:-.8px;
}

.jassas-hero-clean p{
    max-width:660px;
    margin:16px 0 0;
    font-size:18px;
    line-height:1.9;
    font-weight:800;
}

.hero-features{
    margin-top:24px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.hero-features span{
    min-height:36px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    font-size:12px;
    font-weight:900;
}

.hero-actions{
    margin-top:30px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.hero-actions a{
    min-height:58px;
    padding:0 26px;
    border-radius:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:900;
}

.hero-visual{
    min-height:360px;
    border-radius:32px;
    padding:24px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-phone{
    width:290px;
    max-width:100%;
    border-radius:38px;
    background:#fff;
    padding:10px;
    box-shadow:0 30px 70px rgba(0,0,0,.28);
    transform:rotate(-2deg);
}

.hero-phone-image img{
    width:100%;
    display:block;
    border-radius:30px;
}

/* Trust */

.trust-strip{
    width:min(94%,1180px);
    margin:0 auto 18px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.trust-item{
    min-height:76px;
    padding:14px;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
}

.trust-item i{
    width:34px;
    height:34px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--j-accent-soft);
    color:var(--j-accent);
    font-style:normal;
}

/* Sections */

.section-title{
    width:min(94%,1180px);
    margin:22px auto 14px;
}

.section-title h2{
    margin:0;
    font-size:24px;
    font-weight:900;
}

.section-title p{
    margin:5px 0 0;
    font-size:14px;
    font-weight:800;
}

/* Services */

.services-grid{
    width:min(94%,1180px);
    margin:0 auto 20px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
}

.service-card{
    width:100%;
    min-height:142px;
    padding:16px 12px;
    border-radius:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    cursor:pointer;
    font-family:inherit;
    transition:.18s ease;
}

.service-card:hover,
.service-card.selected,
.service-card.active{
    transform:translateY(-2px);
}

.service-check{
    display:none!important;
}

.service-icon-bubble{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.service-icon-bubble svg{
    width:30px;
    height:30px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.25;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.service-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}

.service-content strong{
    font-size:18px;
    font-weight:900;
}

.service-content small{
    font-size:12px;
    font-weight:800;
    line-height:1.45;
}

/* Form */

.order-form{
    width:min(94%,920px);
    margin:10px auto 28px;
    padding:26px;
    border-radius:30px;
}

.form-head{
    margin-bottom:18px;
}

.form-head span{
    display:inline-flex;
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    align-items:center;
    color:var(--j-primary-2);
    background:var(--j-primary-soft);
    font-size:12px;
    font-weight:900;
}

.form-head h2{
    margin:10px 0 0;
    font-size:26px;
    font-weight:900;
}

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

.form-grid input,
.form-grid select,
.form-grid textarea{
    width:100%;
    min-height:54px;
    padding:0 16px;
    border-radius:18px;
    font-size:14px;
    font-weight:800;
}

.form-grid textarea{
    min-height:124px;
    padding:16px;
    resize:vertical;
}

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

.counter{
    margin-top:7px;
    font-size:12px;
    font-weight:800;
}

.check{
    margin-top:16px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14px;
    line-height:1.8;
    font-weight:800;
}

.check input{
    width:22px;
    height:22px;
    margin-top:3px;
    flex:0 0 auto;
}

.submit-btn{
    width:100%;
    min-height:60px;
    margin-top:20px;
    border-radius:18px;
    font-family:inherit;
    font-size:18px;
    font-weight:900;
    cursor:pointer;
}

/* Cities */

.cities-strip-section{
    width:min(94%,1180px);
    margin:18px auto;
    padding:14px 0;
    border-radius:24px;
    overflow:hidden;
    text-align:center;
}

.cities-strip-head{
    padding:0 16px 8px;
}

.cities-strip-head h2{
    margin:0;
    font-size:18px;
    font-weight:900;
}

.cities-legend{
    margin-top:8px;
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.cities-legend span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:900;
}

.cities-legend i{
    width:8px;
    height:8px;
    border-radius:999px;
    display:inline-block;
}

.served-dot{
    background:var(--j-primary);
    box-shadow:0 0 0 5px rgba(20,99,255,.10);
}

.soon-dot{
    background:#94a3b8;
}

.cities-marquee{
    overflow:hidden;
    padding:7px 0;
}

.cities-track{
    width:max-content;
    display:flex;
    align-items:center;
    gap:8px;
    animation:citiesMove 34s linear infinite;
}

html[dir="ltr"] .cities-track{
    animation-name:citiesMoveLtr;
}

.cities-track span{
    height:34px;
    padding:0 13px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    font-size:12px;
    font-weight:900;
}

@keyframes citiesMove{
    from{transform:translateX(0)}
    to{transform:translateX(50%)}
}

@keyframes citiesMoveLtr{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* Success modal */

.success-modal{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
}

.success-modal.show{
    display:flex;
}

.success-box{
    width:min(100%,480px);
    max-height:calc(100vh - 36px);
    overflow:auto;
    padding:26px;
    border-radius:28px;
    text-align:center;
}

.success-mark{
    width:64px;
    height:64px;
    margin:0 auto 14px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:var(--j-success);
    font-size:30px;
    font-weight:900;
}

.success-box h2{
    margin:0;
    font-size:24px;
    font-weight:900;
}

.modal-subtitle{
    margin:8px 0 16px;
    font-weight:800;
}

.ticket-box{
    padding:14px;
    border-radius:18px;
}

.ticket-box span,
.ticket-details span{
    display:block;
    font-size:11px;
    font-weight:900;
}

.ticket-box strong{
    display:block;
    margin-top:4px;
    font-size:22px;
    font-weight:900;
}

.ticket-details{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.ticket-details div{
    padding:10px;
    border-radius:14px;
}

.ticket-details strong{
    display:block;
    margin-top:4px;
    font-size:12px;
    font-weight:900;
}

.progress-line{
    height:7px;
    margin-top:14px;
    border-radius:999px;
    overflow:hidden;
    background:var(--j-border-soft);
}

.progress-line span{
    display:block;
    height:100%;
    width:40%;
    background:var(--j-primary);
    animation:progressMove 2s ease-in-out infinite;
}

.process-steps{
    margin-top:14px;
    font-size:12px;
    line-height:1.8;
    font-weight:800;
}

.waiting-text{
    margin:10px 0 0;
    color:var(--j-primary-2);
    font-weight:900;
}

@keyframes progressMove{
    0%{width:15%}
    50%{width:85%}
    100%{width:15%}
}

/* Responsive */

@media(max-width:1100px){
    .jassas-hero-clean{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-features,
    .hero-actions{
        justify-content:center;
    }

    .hero-visual{
        min-height:280px;
    }

    .services-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .trust-strip{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:760px){
    .page{
        padding-bottom:104px;
    }

    .jassas-hero-clean,
    .trust-strip,
    .section-title,
    .services-grid,
    .order-form,
    .cities-strip-section{
        width:calc(100% - 18px);
    }

    .jassas-hero-clean{
        min-height:auto;
        margin-top:10px;
        padding:26px 16px;
        border-radius:26px;
    }

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

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

    .hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .hero-actions a{
        width:100%;
        min-height:52px;
    }

    .hero-visual{
        min-height:auto;
        padding:14px;
    }

    .hero-phone{
        width:220px;
        border-radius:32px;
        padding:8px;
        transform:none;
    }

    .hero-phone-image img{
        border-radius:24px;
    }

    .trust-strip{
        grid-template-columns:1fr;
        gap:8px;
    }

    .trust-item{
        min-height:58px;
        padding:12px;
    }

    .services-grid{
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .service-card{
        min-height:78px;
        padding:12px 14px;
        border-radius:20px;
        display:grid;
        grid-template-columns:54px minmax(0,1fr);
        text-align:start;
    }

    .service-icon-bubble{
        width:54px;
        height:54px;
        border-radius:16px;
    }

    .service-content{
        align-items:flex-start;
        text-align:start;
    }

    .order-form{
        padding:20px 16px;
        border-radius:24px;
    }

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

    .ticket-details{
        grid-template-columns:1fr;
    }
}
/* Fix bottom spacing */
.page{
    padding-bottom:40px !important;
    min-height:auto !important;
}

.cities-strip-section{
    margin-bottom:26px !important;
}

.jassas-rights{
    width:min(94%,1180px);
    margin:0 auto 28px !important;
    padding:14px 16px;
    border-radius:20px;
    text-align:center;
}

/* Desktop */
@media(min-width:761px){
    .page{
        padding-bottom:30px !important;
    }

    .cities-strip-section{
        margin-top:18px !important;
        margin-bottom:24px !important;
    }
}

/* Mobile */
@media(max-width:760px){
    .page{
        padding-bottom:115px !important;
    }

    .jassas-rights{
        margin-bottom:120px !important;
    }
}
html,
body{
    min-height:auto !important;
}

.page{
    min-height:0 !important;
    padding-bottom:20px !important;
}

main{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.cities-strip-section{
    margin-bottom:18px !important;
}

.jassas-rights{
    width:min(94%,1180px) !important;
    margin:0 auto 24px !important;
    padding:14px 16px !important;
}

@media(max-width:760px){
    .page{
        padding-bottom:110px !important;
    }

    .jassas-rights{
        margin-bottom:115px !important;
    }
}
.jassas-hero-compact{
    display:block !important;
    min-height:auto !important;
    padding:42px 22px !important;
    text-align:center !important;
}

.jassas-hero-compact .hero-content{
    max-width:760px;
    margin:0 auto;
}

.jassas-hero-compact h1{
    font-size:clamp(42px,7vw,72px);
}

.jassas-hero-compact p{
    margin-inline:auto;
}

.jassas-hero-compact .hero-actions{
    justify-content:center;
}