/*
====================================================
Visit Bedford - Claim Page Styles
Version: 3.0
====================================================
*/

/* ==================================================
   Variables
================================================== */

:root{

    --vb-primary:#0057b8;
    --vb-primary-dark:#00479a;
    --vb-accent:#3b82f6;

    --vb-bg:#f6f8fa;
    --vb-card:#ffffff;

    --vb-text:#243332;
    --vb-muted:#667085;

    --vb-border:#e4e7ec;

    --vb-success:#16a34a;
    --vb-success-bg:#eafaf2;

    --vb-warning:#8a6500;
    --vb-warning-bg:#fff7d6;

    --vb-radius:18px;

    --vb-shadow:0 14px 40px rgba(15,23,42,.08);
    --vb-shadow-hover:0 22px 50px rgba(15,23,42,.12);

    --vb-transition:.25s ease;

}


/* ==================================================
   Global
================================================== */

body{

    background:var(--vb-bg);
    color:var(--vb-text);

}

.vb-container{

    max-width:1280px;
    margin:0 auto;

}


/* ==================================================
   Hero
================================================== */

.vb-claim-hero{
    position:relative;
    padding:68px 20px;
    text-align:center;
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #0057b8,
            #3b82f6
        );
}

.vb-claim-hero h1{

    margin:0 0 18px;

    font-size:clamp(2.4rem,4vw,3.5rem);

    line-height:1.1;

    font-weight:700;

}

.vb-claim-hero p{

    max-width:720px;

    margin:0 auto;

    font-size:1.1rem;

    line-height:1.8;

    opacity:.96;

}


/* ==================================================
   Main Layout
================================================== */

.vb-page{

    position:relative;

}

.vb-claim-layout{

    max-width:1260px;

    margin:-45px auto 80px;

    display:grid;

    grid-template-columns:360px 1fr;

    gap:42px;

    align-items:start;

    padding:0 20px;

}


/* ==================================================
   Shared Cards
================================================== */

.vb-claim-sidebar,
.vb-claim-card{

    background:var(--vb-card);

    border-radius:var(--vb-radius);

    box-shadow:var(--vb-shadow);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.vb-claim-sidebar:hover,
.vb-claim-card:hover{

    box-shadow:var(--vb-shadow-hover);

}

.vb-claim-sidebar{

    padding:38px;

    position:sticky;

    top:30px;

}

.vb-claim-card{

    padding:52px;

}

/* ==================================================
   Business Summary
================================================== */

.vb-business-summary{

    margin-bottom:34px;

}

.vb-status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    padding:.55rem 1rem;

    border-radius:999px;

    background:var(--vb-warning-bg);

    color:var(--vb-warning);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.vb-business-name{

    margin:8px 0 22px;

    font-size:2.2rem;

    line-height:1.2;

    font-weight:700;

    color:var(--vb-text);

}

.vb-business-address{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:0 0 10px;

    color:var(--vb-muted);

    line-height:1.8;
    
    font-size:1.02rem;

}

.vb-business-address i{

    color:var(--vb-primary);

    margin-top:4px;

    flex-shrink:0;

}


/* ==================================================
   Sidebar Intro
================================================== */

.vb-sidebar-intro{

    color:var(--vb-muted);

    line-height:1.8;

    font-size:.98rem;

}

.vb-sidebar-intro p{

    margin:0;

}


/* ==================================================
   Divider
================================================== */

.vb-divider{

    margin:34px 0;

    border:0;

    border-top:1px solid var(--vb-border);

}


/* ==================================================
   Benefits
================================================== */

.vb-claim-benefits{

    margin-top:10px;

}

.vb-claim-benefits h3{

    margin:0 0 20px;

    font-size:1.15rem;

    font-weight:700;

    color:var(--vb-text);

}

.vb-claim-benefits ul{

    margin:0;

    padding:0;

    list-style:none;

}

.vb-claim-benefits li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:16px 0;

    border-bottom:1px solid var(--vb-border);

    line-height:1.6;

    color:var(--vb-text);

}

.vb-claim-benefits li:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.vb-claim-benefits li i{

    color:var(--vb-success);

    font-size:1rem;

    margin-top:4px;

    flex-shrink:0;

}

/* ==================================================
   Feature Panels
================================================== */

.vb-form-banner{

    display:flex;

    gap:20px;

    align-items:flex-start;

    padding:24px;

    margin:0 0 34px;

    background:#f2fbfa;

    border:1px solid rgba(20,184,177,.15);

    border-radius:16px;

}

.vb-form-banner-icon{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(20,184,177,.12);

    color:var(--vb-primary);

    font-size:1.4rem;

    flex-shrink:0;

}

.vb-form-banner strong{

    display:block;

    margin-bottom:8px;

    font-size:1.05rem;

}

.vb-form-banner p{

    margin:0;

    color:var(--vb-muted);

    line-height:1.7;

}

/* Business Preview */

.vb-business-preview{

    margin:0 0 32px;
    padding:18px 20px;
    border:1px solid var(--vb-border);
    border-radius:14px;
    background:#fcfcfd;

}

.vb-preview-label{

    display:block;
    margin-bottom:8px;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--vb-muted);

}

.vb-preview-business{

    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    color:var(--vb-text);

}

.vb-preview-business i{

    color:var(--vb-primary);

}


/* ==================================================
   Claim Form
================================================== */

.vb-card-title{

    margin:0 0 18px;

    font-size:2.15rem;

    line-height:1.15;

    font-weight:700;

    letter-spacing:-0.02em;

    color:var(--vb-text);

}

.vb-card-intro{

    margin:0 0 36px;

    color:var(--vb-muted);

    line-height:1.8;

}


/* ==================================================
   Form Layout
================================================== */

.vb-form-group{

    margin-bottom:24px;

}

.vb-form-group label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:var(--vb-text);

}

.vb-form-group input,
.vb-form-group textarea,
.vb-form-group select{

    width:100%;

    box-sizing:border-box;

    padding:16px 18px;

    border:1px solid var(--vb-border);

    border-radius:14px;

    background:#fcfcfd;

    color:var(--vb-text);

    font-size:1rem;

    transition:all var(--vb-transition);

}

.vb-form-group textarea{

    min-height:170px;

    resize:vertical;

}

.vb-form-group input:focus,
.vb-form-group textarea:focus,
.vb-form-group select:focus{

    outline:none;

    border-color:var(--vb-accent);

    background:#fff;

    box-shadow:
        0 0 0 4px rgba(20,184,177,.15);

}


/* ==================================================
   Information Panel
================================================== */

.vb-form-note{

    margin:36px 0;

    padding:22px 24px;

    border-left:4px solid var(--vb-primary);

    border-radius:14px;

    background:#eef9f8;

    color:var(--vb-muted);

    line-height:1.8;

}


/* ==================================================
   Submit Button
================================================== */

.vb-claim-button{

    width:100%;

    border:none;

    border-radius:14px;

    padding:20px;

    cursor:pointer;

    font-size:1.05rem;

    font-weight:700;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--vb-primary),
            var(--vb-accent)
        );

    transition:all .25s ease;

}

.vb-claim-button:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 36px rgba(15,118,110,.28);

}

.vb-claim-button:active{

    transform:translateY(0);

}

.vb-claim-button:disabled{

    opacity:.7;

    cursor:not-allowed;

}

.vb-claim-button.is-loading{

    cursor:wait;

    opacity:.92;

    pointer-events:none;

}

.vb-claim-button.is-loading i{

    margin-right:10px;

}


/* ==================================================
   Trust Section
================================================== */

.vb-trust{

    display:grid;

    gap:12px;

    margin-top:28px;

    color:var(--vb-muted);

    font-size:.95rem;

}

.vb-trust div{

    display:flex;

    align-items:center;

    gap:10px;

}

.vb-trust div::before{

    content:"\f00c";
font-family:"Font Awesome 6 Free";
font-weight:900;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--vb-success-bg);

    color:var(--vb-success);

    font-size:.8rem;

    font-weight:700;

    flex-shrink:0;

}

/* ==================================================
   Responsive
================================================== */

@media (max-width:1024px){

    .vb-claim-layout{

        grid-template-columns:320px 1fr;

        gap:32px;

    }

    .vb-claim-sidebar{

        padding:32px;

    }

  .vb-claim-card{

    padding:42px;

}

}

@media (max-width:900px){

    .vb-claim-hero{

        padding:56px 20px;

    }

    .vb-claim-layout{

        grid-template-columns:1fr;

        gap:28px;

        margin:-35px auto 60px;

    }

    .vb-claim-sidebar{

        position:static;

        top:auto;

    }

}

@media (max-width:640px){

    .vb-container{

        padding:0 16px;

    }

    .vb-claim-hero{

        padding:46px 20px;

    }

    .vb-claim-hero h1{

        font-size:2rem;

    }

    .vb-claim-hero p{

        font-size:1rem;

        line-height:1.7;

    }

    .vb-claim-sidebar,
    .vb-claim-card{

        padding:26px;

        border-radius:16px;

    }

    .vb-business-name{

        font-size:1.7rem;

    }

    .vb-card-title{

        font-size:1.75rem;

    }

    .vb-form-group input,
    .vb-form-group textarea,
    .vb-form-group select{

        padding:14px 16px;

    }

    .vb-claim-button{

        padding:18px;

        font-size:1rem;

    }

}

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{

        transition:none !important;

        animation:none !important;

        scroll-behavior:auto !important;

    }

}