/* ==========================================================================
   VISIT BEDFORD - BUSINESS DIRECTORY
   VERSION 2.0
   PART 1 - FOUNDATION & HERO
========================================================================== */


/* ==========================================================================
   ROOT VARIABLES
========================================================================== */

:root{

    --vb-max-width:1280px;

    --vb-primary:#0D6EFD;
    --vb-primary-dark:#0056B3;

    --vb-heading:#1F2937;
    --vb-text:#4B5563;
    --vb-light:#6B7280;

    --vb-bg:#F8FAFC;
    --vb-card:#FFFFFF;
    --vb-border:#E5E7EB;

    --vb-success:#22C55E;
    --vb-warning:#F59E0B;

    --vb-radius:18px;

    --vb-shadow:
        0 10px 30px rgba(15,23,42,.06);

    --vb-shadow-lg:
        0 20px 60px rgba(15,23,42,.12);

    --vb-transition:.25s ease;

}


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

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

    box-sizing:border-box;

}

img{

    display:block;
    max-width:100%;
    height:auto;

}

html{

    scroll-behavior:smooth;

}


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

.vb-business-page{

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

}


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

.vb-container{

    width:100%;
    max-width:var(--vb-max-width);

    margin:0 auto;

    padding:0 32px;

}


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

.vb-content,
.vb-gallery-section,
.vb-opening-hours,
.vb-map-section,
.vb-nearby,
.vb-claim-listing{

    padding:85px 0;

}


/* ==========================================================================
   TYPOGRAPHY
========================================================================== */

h1,h2,h3,h4{

    margin:0;

    color:var(--vb-heading);

    line-height:1.2;

}

.vb-business-page h2{

    margin-bottom:28px;

    font-size:2.25rem;

    font-weight:800;

}

.vb-business-page h3{

    margin-bottom:16px;

    font-size:1.45rem;

    font-weight:700;

}

.vb-business-page p{

    margin:0 0 20px;

    line-height:1.85;

    color:var(--vb-text);

}

.vb-business-page a{

    transition:var(--vb-transition);

}


/* ==========================================================================
   CARD
========================================================================== */

.vb-card{

    background:#fff;

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

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

}


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

.vb-button{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    padding:15px 28px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:var(--vb-transition);

}

.vb-button:hover{

    transform:translateY(-2px);

}

.vb-button.primary{

    background:var(--vb-primary);

    color:#fff;

}

.vb-button.primary:hover{

    background:var(--vb-primary-dark);

    color:#fff;

}

.vb-button.secondary{

    background:rgba(255,255,255,.12);

    color:#fff;

    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(10px);

}

.vb-button.secondary:hover{

    background:rgba(255,255,255,.20);

}


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


.vb-hero{
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#111827;
}

.vb-hero-image{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
}

.vb-hero-image img{
    display:block;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    object-fit:cover;
    object-position:center;
}

.vb-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;

    background:
        linear-gradient(
            90deg,
            rgba(15,23,42,.82) 0%,
            rgba(15,23,42,.72) 30%,
            rgba(15,23,42,.45) 55%,
            rgba(15,23,42,.20) 100%
        );
}

/* ==========================================================================
   HERO CLAIM BANNER
========================================================================== */

.vb-claim-banner{

    margin-top:36px;

    max-width:760px;

    padding:28px 32px;

    border-radius:18px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(16px);

}

.vb-claim-banner__badge{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    margin-bottom:18px;

    border-radius:999px;

    background:#fde68a;

    color:#92400e;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

}

.vb-claim-banner h3{

    margin:0 0 14px;

    color:#fff;

    font-size:1.7rem;

}

.vb-claim-banner p{

    margin:0 0 26px;

    color:rgba(255,255,255,.92);

    line-height:1.8;

}

.vb-claim-banner strong{

    color:#fff;

}

.vb-claim-banner .vb-button{

    background:#fff;

    color:#1f2937;

}

.vb-claim-banner .vb-button:hover{

    background:#f3f4f6;

}

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

.vb-hero-inner{
    position:relative;
    z-index:5;
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:120px 32px 100px;
    color:#fff;
}


/* ==========================================================================
   BREADCRUMBS
========================================================================== */

.vb-breadcrumbs{

    margin-bottom:26px;

    font-size:.95rem;

    opacity:.95;

}

.vb-breadcrumbs,
.vb-breadcrumbs a{

    color:#fff;

    text-decoration:none;

}

.vb-breadcrumbs a:hover{

    opacity:.8;

}


/* ==========================================================================
   CATEGORY PILLS
========================================================================== */

.vb-category-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:26px;

}

.vb-category{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(255,255,255,.14);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(8px);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

    color:#fff;

    text-decoration:none;

    transition:all .2s ease;

}
.vb-category:hover{

    background:#fff;

    color:#1f2937;

    transform:translateY(-2px);

}
.vb-category:focus-visible{

    outline:2px solid #fff;

    outline-offset:3px;

}


/* ==========================================================================
   TITLE
========================================================================== */

.vb-title{
    font-size:clamp(3.5rem,6vw,5.5rem);
    font-weight:800;
    line-height:.95;
    max-width:850px;
    margin:20px 0 30px;
}


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

.vb-location{

    margin-top:24px;

    font-size:1.15rem;

    color:rgba(255,255,255,.92);

}


/* ==========================================================================
   BADGES
========================================================================== */

.vb-badges{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:26px;

}

.vb-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:999px;

    font-size:.88rem;

    font-weight:700;

}

.vb-badge.featured{

    background:var(--vb-warning);

    color:#fff;

}

.vb-badge.verified{

    background:var(--vb-success);

    color:#fff;

}


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

.vb-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:36px;

}


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

.vb-placeholder-image{

    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:

        linear-gradient(
            135deg,
            #dae7ec,
            #edf4f6
        );

    color:#6b7280;

    font-size:1.2rem;

    font-weight:700;

}


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

@media (max-width:992px){

    .vb-container{

        padding:0 24px;

    }

    .vb-hero{

        min-height:340px;

    }

    .vb-hero-inner{

        padding:70px 24px 50px;

    }

}

@media (max-width:768px){

    .vb-content,
    .vb-gallery-section,
    .vb-opening-hours,
    .vb-map-section,
    .vb-nearby,
    .vb-claim-listing{

        padding:60px 0;

    }

    .vb-container{

        padding:0 20px;

    }

    .vb-hero{

        min-height:300px;

    }

    .vb-title{

        font-size:2.6rem;

    }

    .vb-buttons{

        flex-direction:column;

    }

    .vb-button{

        width:100%;

    }

}

/* ==========================================================================
   PART 2 - MAIN CONTENT
   WHY VISIT / AT A GLANCE
========================================================================== */


/* ==========================================================================
   CONTENT WRAPPER
========================================================================== */

.vb-content{

    position:relative;

}

.vb-content-grid{

    display:grid;

    grid-template-columns:minmax(0,1fr) 420px;

    gap:48px;

    align-items:start;

}


/* ==========================================================================
   WHY VISIT
========================================================================== */

.vb-why-visit{

    background:#fff;

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

    padding:48px;

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

}

.vb-why-visit h2{

    margin-bottom:30px;

}

.vb-why-content{

    font-size:1.06rem;

    line-height:1.9;

    color:var(--vb-text);

}

.vb-why-content p:last-child{

    margin-bottom:0;

}

.vb-why-content strong{

    color:var(--vb-heading);

}

.vb-why-content ul{

    margin:24px 0;

    padding-left:22px;

}

.vb-why-content li{

    margin-bottom:12px;

}

.vb-why-content a{

    color:var(--vb-primary);

    text-decoration:none;

}

.vb-why-content a:hover{

    text-decoration:underline;

}


/* ==========================================================================
   STICKY SIDEBAR
========================================================================== */

.vb-quick-info{

    position:sticky;

    top:30px;

}


/* ==========================================================================
   QUICK INFO CARD
========================================================================== */

.vb-quick-card{

    background:#fff;

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

    overflow:hidden;

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

}


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

.vb-quick-header{

    padding:26px 32px;

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

}

.vb-quick-header h2{

    margin:0;

    color:#fff;

    font-size:1.45rem;

}


/* ==========================================================================
   CARD BODY
========================================================================== */

.vb-quick-body{

    padding:18px 32px;

}


/* ==========================================================================
   INFORMATION ROW
========================================================================== */

.vb-info-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:20px 0;

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

}

.vb-info-item:last-child{

    border-bottom:none;

}


/* ==========================================================================
   ICON
========================================================================== */

.vb-info-icon{

    width:48px;

    height:48px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EFF6FF;

    color:var(--vb-primary);

    font-size:1.2rem;

}


/* ==========================================================================
   CONTENT
========================================================================== */

.vb-info-content{

    flex:1;

    min-width:0;

}

.vb-info-label{

    display:block;

    margin-bottom:5px;

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.5px;

    color:var(--vb-light);

    font-weight:700;

}

.vb-info-value{

    color:var(--vb-heading);

    font-weight:600;

    line-height:1.7;

    word-break:break-word;

}

.vb-info-value a{

    color:var(--vb-primary);

    text-decoration:none;

}

.vb-info-value a:hover{

    text-decoration:underline;

}


/* ==========================================================================
   OPEN STATUS
========================================================================== */

.vb-opening-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    margin-bottom:16px;

    border-radius:999px;

    background:#ecfdf5;

    color:#047857;

    font-size:.88rem;

    font-weight:700;

}

.vb-opening-hours-text{

    white-space:pre-line;

    line-height:1.8;

}


/* ==========================================================================
   PRICE
========================================================================== */

.vb-price{

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    margin-top:8px;

    border-radius:999px;

    background:#f3f4f6;

    color:var(--vb-heading);

    font-weight:700;

}


/* ==========================================================================
   WEBSITE LINKS
========================================================================== */

.vb-info-value a{

    display:inline-block;

    max-width:100%;

    overflow-wrap:anywhere;

}


/* ==========================================================================
   SMALL NOTICE BOX
========================================================================== */

.vb-notice{

    margin-top:24px;

    padding:18px;

    border-radius:14px;

    background:#f8fafc;

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

    font-size:.95rem;

    line-height:1.7;

}


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

@media (max-width:1100px){

    .vb-content-grid{

        grid-template-columns:1fr;

        gap:36px;

    }

    .vb-quick-info{

        position:relative;

        top:auto;

    }

}

@media (max-width:768px){

    .vb-why-visit{

        padding:30px;

    }

    .vb-quick-header{

        padding:22px 26px;

    }

    .vb-quick-body{

        padding:14px 26px;

    }

    .vb-info-item{

        gap:14px;

        padding:18px 0;

    }

    .vb-info-icon{

        width:40px;

        height:40px;

        font-size:1rem;

    }

}

/* ==========================================================================
   PART 3 - GALLERY / OPENING HOURS / MAP
========================================================================== */


/* ==========================================================================
   GALLERY
========================================================================== */

.vb-gallery-section{

    position:relative;

}

.vb-gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:24px;

}

.vb-gallery-item{

    position:relative;

    overflow:hidden;

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

    background:#fff;

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

}

.vb-gallery-item img{

    width:100%;

    aspect-ratio:4 / 3;

    object-fit:cover;

    transition:.45s ease;

}

.vb-gallery-item:hover img{

    transform:scale(1.08);

}

.vb-gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.18),
        transparent 45%
    );

    opacity:0;

    transition:.3s;

}

.vb-gallery-item:hover::after{

    opacity:1;

}


/* ==========================================================================
   PLACEHOLDER IMAGE
========================================================================== */

.vb-gallery-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    aspect-ratio:4 / 3;

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

    background:linear-gradient(
        135deg,
        #edf4f7,
        #dfe9ef
    );

    color:#6b7280;

    font-weight:700;

    font-size:1.05rem;

    text-align:center;

    padding:30px;

}


/* ==========================================================================
   OPENING HOURS
========================================================================== */

.vb-opening-hours{

    background:transparent;

}

.vb-opening-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));

    gap:32px;

}

.vb-opening-card{

    background:#fff;

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

    padding:38px;

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

    transition:var(--vb-transition);

}

.vb-opening-card:hover{

    transform:translateY(-4px);

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

}

.vb-opening-card h3{

    margin-bottom:22px;

}

.vb-opening-text{

    white-space:pre-line;

    line-height:1.9;

}

.vb-prices{

    white-space:pre-line;

    line-height:1.9;

}


/* ==========================================================================
   FREE ENTRY BADGE
========================================================================== */

.vb-free-entry{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    margin-bottom:20px;

    border-radius:999px;

    background:#dcfce7;

    color:#166534;

    font-weight:700;

}


/* ==========================================================================
   MAP
========================================================================== */

.vb-map-section{

    position:relative;

}

.vb-map-wrapper{

    display:grid;

    grid-template-columns:minmax(0,1fr) 420px;

    gap:42px;

    align-items:start;

}


/* ==========================================================================
   MAP
========================================================================== */

.vb-map{

    overflow:hidden;

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

    background:#fff;

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

}

.vb-map iframe{

    display:block;

    width:100%;

    height:540px;

    border:0;

}


/* ==========================================================================
   MAP SIDEBAR
========================================================================== */

.vb-map-info{

    background:#fff;

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

    padding:36px;

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

}

.vb-map-info h3{

    margin-bottom:24px;

}

.vb-map-info p{

    margin-bottom:18px;

}

.vb-map-info strong{

    color:var(--vb-heading);

}

.vb-map-info .vb-button{

    margin-top:20px;

}


/* ==========================================================================
   MAP ADDRESS
========================================================================== */

.vb-map-address{

    display:flex;

    gap:14px;

    margin-bottom:18px;

}

.vb-map-address-icon{

    flex-shrink:0;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EFF6FF;

    color:var(--vb-primary);

}

.vb-map-address-content{

    line-height:1.8;

}


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

.vb-map-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:420px;

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

    background:#eef3f6;

    color:#6b7280;

    text-align:center;

    font-weight:600;

    padding:40px;

}


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

@media (max-width:1100px){

    .vb-map-wrapper{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .vb-gallery-grid{

        gap:18px;

    }

    .vb-opening-grid{

        grid-template-columns:1fr;

    }

    .vb-opening-card{

        padding:28px;

    }

    .vb-map-info{

        padding:28px;

    }

    .vb-map iframe{

        height:360px;

    }

}

/* ==========================================================================
   PART 4 - NEARBY / CLAIM LISTING / UTILITIES
   BUSINESS CSS v2.0
========================================================================== */


/* ==========================================================================
   NEARBY
========================================================================== */

.vb-nearby{
    position:relative;
}

.vb-nearby-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:32px;

}


/* ==========================================================================
   NEARBY CARD
========================================================================== */

.vb-nearby-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#fff;

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

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

    transition:.3s ease;

    height:100%;

}

.vb-nearby-card:hover{

    transform:translateY(-6px);

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

}


/* ==========================================================================
   IMAGE
========================================================================== */

.vb-nearby-image{

    display:block;

    overflow:hidden;

    background:#eef3f6;

}

.vb-nearby-image img{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    transition:.45s ease;

}

.vb-nearby-card:hover img{

    transform:scale(1.08);

}


/* ==========================================================================
   PLACEHOLDER
========================================================================== */

.vb-placeholder-image{

    display:flex;

    align-items:center;

    justify-content:center;

    aspect-ratio:16/10;

    background:
        linear-gradient(
            135deg,
            #eef3f6,
            #dfe8ee
        );

    color:#7a8693;

    font-weight:700;

    text-align:center;

    padding:30px;

}


/* ==========================================================================
   CONTENT
========================================================================== */

.vb-nearby-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:30px;

}

.vb-nearby-content h3{

    margin-bottom:12px;

}

.vb-nearby-content h3 a{

    color:var(--vb-heading);

    text-decoration:none;

}

.vb-nearby-content h3 a:hover{

    color:var(--vb-primary);

}

.vb-nearby-content p{

    margin-bottom:22px;

}

.vb-read-more{

    margin-top:auto;

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-weight:700;

    color:var(--vb-primary);

    text-decoration:none;

}

.vb-read-more:hover{

    color:var(--vb-primary-dark);

}


/* ==========================================================================
   FEATURED LABEL
========================================================================== */

.vb-featured-label{

    display:inline-flex;

    align-items:center;

    align-self:flex-start;

    padding:7px 14px;

    margin-bottom:18px;

    border-radius:999px;

    background:var(--vb-warning);

    color:#fff;

    font-size:.82rem;

    font-weight:700;

}


/* ==========================================================================
   CLAIM LISTING
========================================================================== */

.vb-claim-listing{

    position:relative;

}

.vb-claim-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    padding:50px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f5f8fa
        );

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

}

.vb-claim-content{

    flex:1;

}

.vb-claim-content h2{

    margin-bottom:18px;

}

.vb-claim-content p{

    margin-bottom:0;

    max-width:720px;

}

.vb-claim-action{

    flex-shrink:0;

}

.vb-claim-action .vb-button{

    min-width:240px;

}


/* ==========================================================================
   ACCESSIBILITY
========================================================================== */

.screen-reader-text{

    position:absolute;

    width:1px;

    height:1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

}


/* ==========================================================================
   TABLES
========================================================================== */

.vb-business-page table{

    width:100%;

    border-collapse:collapse;

}

.vb-business-page td,
.vb-business-page th{

    padding:14px;

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

}

.vb-business-page th{

    text-align:left;

}


/* ==========================================================================
   FORMS
========================================================================== */

.vb-business-page input,
.vb-business-page textarea,
.vb-business-page select{

    width:100%;

    padding:14px;

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

    border-radius:10px;

    font:inherit;

}

.vb-business-page input:focus,
.vb-business-page textarea:focus,
.vb-business-page select:focus{

    outline:none;

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

    box-shadow:0 0 0 4px rgba(13,110,253,.15);

}


/* ==========================================================================
   UTILITIES
========================================================================== */

.text-center{
    text-align:center;
}

.text-right{
    text-align:right;
}

.mt-1{
    margin-top:10px;
}

.mt-2{
    margin-top:20px;
}

.mt-3{
    margin-top:30px;
}

.mt-4{
    margin-top:40px;
}

.mb-0{
    margin-bottom:0 !important;
}


/* ==========================================================================
   FADE IN
========================================================================== */

@keyframes vbFadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.vb-content,
.vb-gallery-section,
.vb-opening-hours,
.vb-map-section,
.vb-nearby,
.vb-claim-listing{

    animation:vbFadeUp .5s ease;

}


/* ==========================================================================
   PRINT
========================================================================== */

@media print{

    .vb-buttons,
    .vb-claim-listing{

        display:none;

    }

}


/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width:1100px){

    .vb-claim-box{

        flex-direction:column;

        align-items:flex-start;

    }

}


/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width:768px){

    .vb-nearby-grid{

        grid-template-columns:1fr;

    }

    .vb-nearby-content{

        padding:24px;

    }

    .vb-claim-box{

        padding:32px;

        text-align:center;

        align-items:center;

    }

    .vb-claim-action{

        width:100%;

    }

    .vb-claim-action .vb-button{

        width:100%;

    }

}


/* ==========================================================================
   LARGE SCREENS
========================================================================== */

@media (min-width:1600px){

    .vb-container{

        max-width:1360px;

    }

}

/* ==========================================================================
  Reviews
========================================================================== */



.vb-reviews{
    padding:70px 0;
}

.vb-reviews h2{
    font-size:36px;
    font-weight:700;
    margin-bottom:30px;
}

.vb-review-summary,
.vb-review-list,
.vb-review-form{
    background:#fff;
    border-radius:18px;
    padding:30px;
    margin-bottom:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.vb-review-actions{
    text-align:center;
    margin:40px 0;
}
.vb-review-summary{
    margin-bottom:40px;
}

.vb-review-list{
    margin-bottom:40px;
}

/* ==========================================================================
  Features
========================================================================== */


.vb-features-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    margin:60px 0;

}

.vb-feature-section{

    margin-bottom:35px;

}

.vb-feature-section:last-child{

    margin-bottom:0;

}

.vb-feature-section h3{

    margin:0 0 18px;

    font-size:1.3rem;

    color:#1f2937;

}

.vb-feature-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0;
}

.vb-feature{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#eef6ff;

    color:#1f2937;

    text-decoration:none;

    font-weight:600;

    transition:all .2s ease;

}

.vb-feature:hover{

    background:#1f2937;

    color:#fff;

    transform:translateY(-2px);

}

.vb-feature:focus-visible{

    outline:2px solid #1f2937;

    outline-offset:3px;

}

.vb-section-title{

    margin:0 0 30px;

    font-size:1.8rem;

    color:#1f2937;

    font-weight:700;

}

/* ==========================================
   Follow & Connect
========================================== */

.vb-connect{
    margin:60px 0;
}

.vb-connect-card{
    background:#fff;
    border-radius:18px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Social Icons */

.vb-social-links{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin:30px 0;
}

.vb-social-links a{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f5f7fa;
    color:#555;
    font-size:24px;
    text-decoration:none;
    transition:all .3s ease;
    border:1px solid #e8e8e8;
}

.vb-social-links a:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

/* Brand colours */

.vb-social-links a[aria-label="Facebook"]:hover{
    background:#1877f2;
    color:#fff;
}

.vb-social-links a[aria-label="Instagram"]:hover{
    background:#d62976;
    color:#fff;
}

.vb-social-links a[aria-label="X"]:hover{
    background:#000;
    color:#fff;
}

.vb-social-links a[aria-label="TikTok"]:hover{
    background:#111;
    color:#fff;
}

.vb-social-links a[aria-label="YouTube"]:hover{
    background:#ff0000;
    color:#fff;
}

.vb-social-links a[aria-label="LinkedIn"]:hover{
    background:#0a66c2;
    color:#fff;
}


/* ==========================================
   Action Buttons
========================================== */

.vb-action-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:15px;
}

.vb-action-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 28px;
    border-radius:10px;
    background:#0077cc;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:all .3s ease;
    min-width:220px;
}

.vb-action-button i{
    font-size:18px;
}

.vb-action-button:hover{
    background:#005fa3;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,119,204,.25);
}

.vb-action-button.secondary{
    background:#f5f7fa;
    color:#333;
    border:1px solid #dcdcdc;
}

.vb-action-button.secondary:hover{
    background:#eceff3;
    color:#111;
}

.vb-action-button.website{
    background:#fff;
    color:#0077cc;
    border:2px solid #0077cc;
}

.vb-action-button.website:hover{
    background:#0077cc;
    color:#fff;
}


/* ==========================================
   Mobile
========================================== */

@media (max-width:768px){

    .vb-connect-card{
        padding:25px;
    }

    .vb-social-links{
        justify-content:center;
    }

    .vb-action-buttons{
        flex-direction:column;
    }

    .vb-action-button{
        width:100%;
        min-width:100%;
    }

}

/* ==========================================
   Business Claim 
========================================== */

.business-claim {
    padding: 30px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fafafa;
    margin-top: 40px;
}

.business-claim h2 {
    margin-top: 0;
}

.vb-notice {
    padding: 18px;
    border-radius: 8px;
}

.vb-notice-success {
    background: #e8f8ee;
    border: 1px solid #84d39c;
}

.vb-notice-warning {
    background: #fff7e6;
    border: 1px solid #f1c40f;
}

/* Business hero title */
/* Hero title */

.vb-title{
    color:#EAF6FF;
    text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/*--------------------------------------------------------------*
 * Opening Hours Schedule
 *--------------------------------------------------------------*/

.vb-opening-schedule{
	width:100%;
	margin-top:20px;
}

.vb-opening-day{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;

	padding:14px 16px;

	border-bottom:1px solid #e5e7eb;

	font-size:15px;
	line-height:1.4;
}

.vb-opening-day:first-child{
	border-top:1px solid #e5e7eb;
}

.vb-opening-day-name{
	display:flex;
	align-items:center;
	gap:10px;

	min-width:140px;

	font-weight:600;
	color:var(--vb-text);
}

.vb-opening-day-hours{
	text-align:right;
	color:var(--vb-text);
	font-weight:500;
	white-space:nowrap;
}

.vb-opening-separator{
	margin:0 5px;
	color:var(--vb-muted);
}

.vb-opening-closed{
	color:var(--vb-muted);
}

.vb-opening-not-set{
	color:var(--vb-muted);
	font-weight:400;
}

/*--------------------------------------------------------------*
 * Today
 *--------------------------------------------------------------*/

.vb-opening-day.is-today{
	background:#f0f7ff;
	border-radius:10px;
	border-bottom-color:transparent;
	margin:4px 0;
	padding-top:14px;
	padding-bottom:14px;
}

.vb-opening-day.is-today .vb-opening-day-name{
	color:var(--vb-primary);
}

.vb-opening-today{
	display:inline-flex;
	align-items:center;

	padding:3px 8px;

	border-radius:999px;

	background:var(--vb-primary);
	color:#fff;

	font-size:11px;
	font-weight:700;
	line-height:1;
	text-transform:uppercase;
	letter-spacing:.03em;
}

/*--------------------------------------------------------------*
 * Mobile
 *--------------------------------------------------------------*/

@media (max-width:600px){

	.vb-opening-day{
		padding:13px 10px;
		gap:12px;
	}

	.vb-opening-day-name{
		min-width:0;
		gap:7px;
	}

	.vb-opening-day-hours{
		font-size:14px;
	}

	.vb-opening-today{
		font-size:10px;
		padding:3px 6px;
	}

}

/* ==========================================================
   Favourite Button
   ========================================================== */

.vb-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}


.vb-title-row .vb-title {
	margin-bottom: 0;
}


.vb-favourite-button {
	flex-shrink: 0;

	display: inline-flex;
	align-items: center;
	gap: 8px;

	min-height: 44px;
	padding: 0 16px;

	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;

	background: rgba(255, 255, 255, 0.95);
	color: var(--vb-text);

	font-size: 14px;
	font-weight: 700;

	cursor: pointer;

	transition:
		background-color .2s ease,
		color .2s ease,
		transform .2s ease;
}


.vb-favourite-button:hover {
	transform: translateY(-1px);
}


.vb-favourite-button i {
	font-size: 17px;
}


.vb-favourite-button.is-saved {
	background: var(--vb-primary);
	color: #ffffff;
}


@media (max-width: 600px) {

	.vb-title-row {
		align-items: flex-start;
	}

	.vb-favourite-button-label {
		display: none;
	}

	.vb-favourite-button {
		width: 44px;
		height: 44px;
		padding: 0;

		justify-content: center;
	}

}