/* Custom CSS  */

/* CLS prevention — reserve space for images & ads before they load */
.vrt-list-thumb-figure {
    min-height: 153px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.sidebar-banner-item picture,
.sidebar-banner picture {
    display: block;
    aspect-ratio: 3 / 2;
}
.sidebar-banner-item img,
.sidebar-banner img {
    width: 100%;
    height: auto;
}
ins.adsbygoogle {
    min-height: 220px;
}

/* Business profile cards — elevated style */
.d-block.bg-white.rounded:has(.jbd-01),
.jb-apply-form.bg-white.rounded {
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}
.jb-apply-form.bg-white.rounded {
    border-color: rgba(0, 0, 0, 0.06);
}
.vrt-list-wrap {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
.cursor-pointer {
    cursor: pointer;
}
.float-right {
    float: right!important;
}
.parsley-errors-list {
    color: #F41b3b !important;
    padding-left: unset;
}
.selectize-input > .parsley-errors-list {

    position: absolute;
    bottom: -60%;
    left: 0;
}
.Goodup-ft-first{
    min-height: 30px;
}
.blg_title {
    min-height: 53px;;
}
.payment-period {
    font-size: 22px;
}
.selectize-control.single .selectize-input, .selectize-control.single .selectize-input  {
    /** selectize styling override*/
    height: 54px !important;
    padding: 10px 15px;
    font-size: 15px;
    border-radius: 1px;
    border-color: #eee;
    color: #2b2e30;
}
.selectize-control.single .selectize-input, .selectize-control.single .selectize-input input {
    margin-top: 5px !important;
}
.selectize-control.single .selectize-input, .selectize-control.single .selectize-input span {
    margin-top: 3px !important;
}

.selectize-no-top-margin .selectize-control.single .selectize-input {
    margin-top: 0px !important;
}

.selectize-control.plugin-remove_button .remove-single { 
    right: 39px !important;
    top: 7px !important;
}
.selectize-dropdown, .selectize-dropdown.form-control {
    height: auto !important;
}
.remember-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.vrt-list-thumb {
    max-width: 280px;
}

label.required::after {
    content: "\002A";
    font-size: "12px";
    color: #F41b3b;
    margin-left: 2.5px;
}

.home-banner {
    height: 30vh;
    min-height: 420px;
}
/* 
.home-banner .banner_caption {
    background-color: rgba(255, 255, 255, 0.8);
} */

#search-suggestions-container {
    position: absolute;
    top: 68px;
    width: 100%;
    min-height: 85px;
    max-height: 250px;
    background: #FFF;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow-x: scroll;
    z-index: 999;
    visibility: hidden;
    height: 0px;
}

#search-suggestions-container.relative {
    
    position: relative !important; 
    top: unset !important;  
   
    width: 100%; 
    min-height: unset;
    max-height: 250px; 
    background: #FFF; 
    border: 1px solid #eee; 
    border-radius: 6px; 
    overflow-x: scroll; 
    z-index: 3;
    visibility: hidden;
    height: 0px;
}

#search-suggestions-container ul {
    padding-bottom: 15px;
}
#search-suggestions-container li > p {
    cursor: pointer;
}

.home-counters {
    background: #FFF;
    padding: 15px;
    border-radius: 6px;
    min-width: 120px;
}

#map_custom {
    position: relative;
    width: 320px;
    height: 420px;
    overflow: hidden;
    margin-left: auto;
}
#map_custom svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}

/* Alphabetical places list */
.places-alpha-list {
    font-size: 13px;
}
.places-alpha-list h6 {
    font-size: 14px;
    margin-bottom: 0.3rem;
}
.places-alpha-list .mb-1 {
    margin-bottom: 0.2rem !important;
}
.places-alpha-list .mb-3 {
    margin-bottom: 0.5rem !important;
}

/* Banner next to map */
.map-banner-link {
    display: block;
    max-height: 420px;
    margin: 0 auto;
    transition: transform 0.2s, box-shadow 0.2s;
}
.map-banner-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.map-banner-link img {
    max-width: 100%;
    max-height: 420px;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
}

.datamap path:hover {
    fill: #FC8D59 !important;
}

.more {

}
.more .excerpt {
    position: relative;
    overflow: hidden;
    transition: 0.35s;
}

.more .excerpt.closed {

}
.more .excerpt.opened {

}

.more .show-more-btn {
    border: none;
    background: none;
    color: #666;
    cursor: pointer;
    outline:none;
}

.more .excerpt.closed:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 10px;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,0.5) 47%, rgba(237,237,237,0.5) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.5)), color-stop(47%, rgba(246,246,246,0.5)), color-stop(100%, rgba(237,237,237,0.5)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,0.5) 47%, rgba(237,237,237,0.5) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,0.5) 47%, rgba(237,237,237,0.5) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,0.5) 47%, rgba(237,237,237,0.5) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,0.5) 47%, rgba(237,237,237,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
}

.banner_title {
    font-weight: 500;
}

.premium-badge {
    margin: 3px 5px 4px 0px;
    display: inline-block;
    padding: 2px 8px;
    background: #0fb351;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    transition: all ease 0.4s;
    float: right;
}

.premium-badge  span.verified-badge {
    top: unset;
}

.vrt-list-wrap {
    margin-bottom: 20px;
}

#search.postcode {
    text-transform: uppercase;
}


.service-price {
    /* margin: 3px 5px 4px 0px; */
    display: inline-block;
    padding: 2px 8px;
    background: #f4f5f7;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    transition: all ease 0.4s;
    position: absolute;
    top: 0px;
    right: 0;
}

.service-item img, .service-item .color-thief-init {
    height: 153px;
}

.services-slide {
    display: flex;
    align-items: center;
}
.about-business-label {
    font-size: 20px!important;
}
.single_article_wrap .article_body_wrap ul {
    list-style: circle;
    color: #6e7c90;
}
.single_article_wrap .article_body_wrap .h2-article {
    font-size:18px !important; 
    margin-top:20px !important;
}
.single_article_wrap .article_body_wrap .h3-article {
    font-size:16px !important; 
    margin-top:20px !important;
}
.single_article_wrap .article_body_wrap .p-article {
    margin-top:0px !important;
}
/* Premium Hero Section */
.premium-hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
}
.premium-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}
.premium-hero-content {
    padding-bottom: 2rem;
}
.premium-hero-logo {
    border-radius: 10px;
    border: 3px solid rgba(255,255,255,0.9);
    background: #fff;
    object-fit: contain;
}
.premium-hero-title {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.premium-hero-tagline {
    color: rgba(255,255,255,0.9);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}
.premium-hero-location {
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
.premium-hero-reviews {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.premium-hero-reviews .Goodup-rating .fa-star {
    color: #ffc107;
}
.premium-hero-actions .btn {
    font-weight: 500;
}

@media (max-width: 991px) {
    .home-banner {
        height: 30vh;
        min-height: 520px;
    }
    .about-business-label {
        font-size: 18px!important;
    }
    .premium-hero-section {
        min-height: 320px;
    }
    .premium-hero-title {
        font-size: 1.7rem;
    }
    .premium-hero-actions {
        text-align: left !important;
        padding-bottom: 1rem;
    }
}

@media (max-width: 600px) {
    .home-banner {
        height: 30vh;
        min-height: 620px;
    }
    .home-counters {
        background: unset;
        padding: initial;
        border-radius: none;
        min-width: unset;
    }
    #map_custom {
        position: relative;
        width: 100%;
        max-width: 320px;
        height: 420px;
        margin: 0 auto;
        overflow: hidden;
    }
    #map_custom svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        max-height: 100%;
    }
    .map-banner-link {
        margin-top: 20px;
        height: auto;
        max-height: 300px;
    }
    .map-banner-link img {
        width: 100%;
        height: auto;
        max-height: 300px;
    }
    .service-price {
        top: 4px;
        right: -6px;
    }

    .review-comments-avatar {
        position: relative;
        display: flex;
        align-content: center;
        justify-content: center;
        width: 100%;
    }


    .reviews-comments-item {
        padding-left: 0px;
    }
    .vrt-list-thumb {
        /* --widthA: calc(24px * 4);
        --widthB: calc(12px * 2);
        --widthC: calc(var(--widthA) + var(--widthB) + 250px);
        --widthD: calc(100vw - var(--widthC));
        margin-left: calc(var(--widthD) / 2); */
    }
    .vrt-list-thumb {
        max-width: unset;
    }
    .premium-hero-section {
        min-height: 280px;
    }
    .premium-hero-title {
        font-size: 1.4rem;
    }
    .premium-hero-tagline {
        font-size: 1rem;
    }
    .premium-hero-actions .btn {
        display: block;
        width: 100%;
    }
}
@media (max-width:360px) {

}

/* ── Featured business slot ─────────────────────────────────────────────
   One rotating premium listing above the Recommended strip. A single list
   row with a fixed-height thumbnail: the earlier grid version let its two
   columns stretch to match each other and left most of the card empty. */
.featured-business {
    display: flex;
    align-items: center;
    gap: 18px;
    /* Full container width, inset by the same 8px the carousel cards carry, so the
       featured row and the strip below it share both edges. */
    margin: 0 8px 28px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e8e8ef;
    border-left: 4px solid #F41b3b;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.featured-business-thumb {
    flex: 0 0 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 90px;
    background: #f7f7fa;
    border-radius: 6px;
    overflow: hidden;
}
.featured-business-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.featured-business-body {
    flex: 1 1 auto;
    min-width: 0; /* lets the summary ellipsis instead of forcing the row wider */
}
.featured-business-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.featured-business-tag {
    background: #F41b3b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
}
.featured-business-tag i { margin-right: 4px; }
.featured-business-note {
    font-size: 11px;
    color: #8a8a99;
}
.featured-business-rating {
    font-size: 12px;
    font-weight: 600;
    color: #1a8f5f;
}
.featured-business-rating i { margin-right: 3px; }
.featured-business-name {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.3;
}
.featured-business-name a { color: #1f1f2c; }
.featured-business-name a:hover { color: #F41b3b; }
.featured-business-place {
    font-size: 12.5px;
    color: #70707e;
    margin-bottom: 3px;
}
.featured-business-place i { margin-right: 5px; color: #F41b3b; }
.featured-business-summary {
    font-size: 13px;
    color: #70707e;
    margin: 0;
    /* One line on a wide screen; the profile holds the rest. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.featured-business-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.featured-business-actions .btn { white-space: nowrap; }
.featured-business-actions .btn i { margin-right: 5px; }
.btn-featured-business {
    background: #F41b3b;
    border: 1px solid #F41b3b;
    color: #fff;
}
.btn-featured-business:hover,
.btn-featured-business:focus {
    background: #d0152f;
    border-color: #d0152f;
    color: #fff;
}

@media (max-width: 767px) {
    /* Stack on a phone, and let the summary wrap to two lines rather than
       truncate to almost nothing at narrow widths. */
    .featured-business {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 14px;
    }
    .featured-business-thumb {
        flex: 0 0 90px;
        width: 90px;
        height: 60px;
    }
    .featured-business-body { flex: 1 1 180px; }
    .featured-business-summary { white-space: normal; }
    .featured-business-actions {
        flex: 1 1 100%;
        flex-direction: row;
    }
    .featured-business-actions .btn { flex: 1 1 0; text-align: center; }
}

/* ── Classifieds strip ──────────────────────────────────────────────────
   Four cards below the quotes. Fixed-height thumbnails so a row of ads
   with mismatched images stays a row rather than a staircase. */
.classifieds-strip-card {
    display: flex;
    flex-direction: column;
    /* Full column height, so a row of cards lines up at the bottom. Written here
       rather than with Bootstrap's .h-100, which this theme redefines as
       height:100vh with a 580px floor. */
    height: 100%;
    background: #fff;
    border: 1px solid #e8e8ef;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .15s ease;
}
.classifieds-strip-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}
.classifieds-strip-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 170px;
    background: #f7f7fa;
    overflow: hidden;
}
.classifieds-strip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.classifieds-strip-placeholder {
    font-size: 28px;
}
.classifieds-strip-body {
    padding: 12px 14px 14px;
    flex: 1 1 auto;
}
.classifieds-strip-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 6px;
    /* Two lines, so a long heading cannot push the card out of line with its row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.classifieds-strip-title a { color: #1f1f2c; }
.classifieds-strip-title a:hover { color: #F41b3b; }
.classifieds-strip-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.classifieds-strip-price {
    font-weight: 700;
    color: #1a8f5f;
}

/* ------------------------------------------------------------------
   Profile form label hierarchy

   The theme had this inverted. Labels inherit body colour (#696969),
   .text-muted hints are #656b78 - darker than the label they qualify -
   and styles.css sets .form-control::placeholder to #2b2e30, which is
   nearly black. So on the business form the example text shouted, the
   hint spoke, and the field's own name whispered.

   Scoped to the dashboard so the public-facing forms are untouched.
   ------------------------------------------------------------------ */
.goodup-dashboard-content .form-group > label,
.goodup-dashboard-content > .dashboard-widg-bar label.mb-1 {
    color: #1f2430;
    font-weight: 500;
}

/* A placeholder is an example, not a value. Lighter than real input text
   so a filled field and an empty one can be told apart at a glance. */
.goodup-dashboard-content .form-control::placeholder {
    color: #9aa0ab;
    opacity: 1;
}
.goodup-dashboard-content .form-control::-moz-placeholder {
    color: #9aa0ab;
    opacity: 1;
}

/* Hints sit below the label in the hierarchy, not above it. */
.goodup-dashboard-content small.text-muted,
.goodup-dashboard-content smal.text-info,
.goodup-dashboard-content small.text-info,
.goodup-dashboard-content label.smart-text {
    color: #7a808c !important;
    font-weight: 400;
}

/* ------------------------------------------------------------------
   Profile empty states (app/Views/domain/profile/partials/empty-state.php)

   Schematic previews of the public card for a section with nothing in it
   yet: grey bars in the right shape, not screenshots that go stale or
   sample data that reads as real. Neutral greys so they sit under any
   theme colour; the one accent bar picks up the theme.
   ------------------------------------------------------------------ */
.profile-empty-state .pes-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0,0,0,.05); font-size: 20px; color: #1f2430;
}
.profile-empty-state .pes-intro { color: #4b515d; }
.profile-empty-state .pes-benefits li { padding: 3px 0; color: #1f2430; }
.profile-empty-state .pes-preview {
    background: #f4f5f7; border: 1px dashed #d5d8de; border-radius: 10px; padding: 16px;
}
.profile-empty-state .pes-preview-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #7a808c; margin-bottom: 12px;
}

/* bars and blocks */
.pes-sk-bar { display: block; height: 8px; border-radius: 4px; background: #d9dce2; margin: 6px 0; }
.pes-sk-bar.dark { background: #b9bec8; height: 10px; }
.pes-sk-bar.accent { background: var(--theme-color, #e4002b); opacity: .55; }
.pes-sk-bar.tall { height: 14px; }
.pes-sk-bar.mt { margin-top: 12px; }
.pes-sk-bar.w-30 { width: 30%; } .pes-sk-bar.w-40 { width: 40%; } .pes-sk-bar.w-50 { width: 50%; }
.pes-sk-bar.w-60 { width: 60%; } .pes-sk-bar.w-70 { width: 70%; } .pes-sk-bar.w-80 { width: 80%; }
.pes-sk-bar.w-90 { width: 90%; } .pes-sk-bar.w-100 { width: 100%; }
.pes-sk-lines { display: block; flex: 1; min-width: 0; }

/* card: image left, text right (services, products, offers, ads) */
.pes-sk-card { display: flex; gap: 14px; background: #fff; border-radius: 8px; padding: 12px; }
.pes-sk-image { flex: 0 0 96px; height: 64px; border-radius: 6px; background: linear-gradient(135deg,#dfe2e8,#c9cdd6); }

/* range: wide hero, heading, three small cards */
.pes-sk-range { background: #fff; border-radius: 8px; padding: 12px; }
.pes-sk-hero { display: block; height: 56px; border-radius: 6px; background: linear-gradient(135deg,#dfe2e8,#c9cdd6); margin-bottom: 10px; }
.pes-sk-cards { display: flex; gap: 8px; margin-top: 10px; }
.pes-sk-mini { flex: 1; height: 44px; border-radius: 6px; background: #e4e7ec; }

/* person: round avatar, name, role */
.pes-sk-person { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 8px; padding: 12px; }
.pes-sk-avatar { flex: 0 0 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#dfe2e8,#c9cdd6); }

/* gallery: 3x2 tiles */
.pes-sk-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; background: #fff; border-radius: 8px; padding: 12px; }
.pes-sk-tile { display: block; aspect-ratio: 4/3; border-radius: 6px; background: linear-gradient(135deg,#dfe2e8,#c9cdd6); }
.pes-sk-tile:nth-child(2n) { background: linear-gradient(135deg,#e4e7ec,#d2d6de); }

/* office: pin, address lines, accent phone line */
.pes-sk-office { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 8px; padding: 12px; }
.pes-sk-pin { flex: 0 0 40px; height: 40px; border-radius: 8px; background: #eef0f3; display: inline-flex; align-items: center; justify-content: center; color: #7a808c; }

/* post: title, date, paragraph */
.pes-sk-post { background: #fff; border-radius: 8px; padding: 12px; }

/* quote: big mark, lines, attribution */
.pes-sk-quote { display: flex; gap: 10px; background: #fff; border-radius: 8px; padding: 12px; }
.pes-sk-quote-mark { font-size: 40px; line-height: 1; color: #c9cdd6; font-family: Georgia, serif; }

@media (max-width: 991px) {
    .profile-empty-state .pes-preview { margin-top: 4px; }
}

/* ------------------------------------------------------------------
   Product catalogue cards and product page
   Cards in a row stretch to the tallest (h-100) and member images come
   in any shape, so a short card beside a tall image showed a block of
   white under its name. A fixed 4:3 image box with object-fit: cover
   makes every card the same height whatever the source image is.
   ------------------------------------------------------------------ */
/* Not Bootstrap's .h-100: the theme redefines that utility as min-height: 580px for
   listing cards, which is exactly the block of white this rule replaces. */
.product-card {
    height: 100%;
}
.product-card-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f3f4f6;
    border-radius: 0.375rem 0.375rem 0 0;
}
.product-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-card h3 a:hover {
    color: var(--theme-color, #e30613);
}
/* The product page's main image: contained, never upscaled past its box. */
#product-main-image {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    background: #f3f4f6;
}
.product-thumb img {
    object-fit: cover;
    width: 90px;
    height: 68px;
}


/* Logo editor (profile > business) and the "How it appears" replicas */
.logo-editor-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 24, 32, .6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.logo-editor { background: #fff; border-radius: 8px; padding: 16px; width: 100%; max-width: 640px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.logo-editor-stage { width: 100%; aspect-ratio: 273 / 153; background: #ffffff; overflow: hidden; border-radius: 4px; border: 1px solid #e5e7eb; }
.logo-editor .btn-group .btn.active { background: #343a40; color: #fff; border-color: #343a40; }
.logo-editor-stage img { display: block; max-width: 100%; }
.logo-editor-open { overflow: hidden; }
.logo-preview-list, .logo-preview-home { width: 273px; height: 153px; max-width: 100%; border-radius: 4px; overflow: hidden; position: relative; }
.logo-preview-list { background: #fff; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; }
.logo-preview-list img { width: 100%; height: 100%; object-fit: contain; }
.logo-preview-home img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-preview-home:before { content: ""; position: absolute; inset: 0; background: #202838; opacity: .3; pointer-events: none; }
/* The logo dropzone shows the card shape, not a square, and stays inside its column */
#logo.dropzone { min-height: 0; padding: 12px; }
#logo.dropzone .dz-preview { display: block; width: 100%; margin: 0 0 8px; }
#logo.dropzone .dz-preview .dz-image { width: 100% !important; height: auto !important; aspect-ratio: 273 / 153; border-radius: 4px !important; background: #fff; border: 1px solid #e5e7eb; }
#logo.dropzone .dz-preview .dz-image img { width: 100%; height: 100%; object-fit: contain; }
#logo.dropzone .dz-preview .dz-details { display: none; }


/* Product/service card slider: slick makes each <img> a slide, so size the image itself.
   (The old inline rule gave the images display:flex, which some browsers paint empty.) */
.vrt-list-thumb-figure.services-slide .slick-list { height: 153px; }
.vrt-list-thumb-figure.services-slide .slick-track { display: flex; align-items: center; }
.vrt-list-thumb-figure.services-slide img.slick-slide { display: block !important; width: 273px; max-width: 100%; height: 153px !important; object-fit: contain; background: #fff; }
.vrt-list-thumb-figure.services-slide .slick-dots { bottom: 2px; }
.vrt-list-thumb-figure.services-slide .slick-dots li button:before { font-size: 8px; }

/* Premium+ badge */
.rpm-tag-plus, .premium-badge-plus { background: #1f2937 !important; }

/* ---- Plans & features page and the per-section feature strip ---- */
.feature-strip { background: #f7f8fa; border: 1px solid #e6e8ec; border-radius: 8px; padding: 8px 12px; color: #4b515d; }
.feature-strip a { text-decoration: underline; }
.feature-strip-unlock { color: #1f2430; }
.pf-compare th, .pf-compare td { vertical-align: middle; font-size: 14px; }
.pf-compare th { background: #f7f8fa; font-weight: 600; }
.pf-compare .pf-feature-col { width: 34%; color: #1f2430; }
.pf-compare .pf-current { background: rgba(25,135,84,.06); }
.pf-feature .pf-plan-lines li { padding: 5px 0; border-top: 1px solid #f0f1f3; color: #1f2430; }
.pf-feature .pf-plan-lines li:first-child { border-top: 0; }
.pf-feature .pf-current-line { background: rgba(25,135,84,.06); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
.pf-plan-tag { display: inline-block; min-width: 82px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-right: 8px; color: #7a808c; }
.pf-tag-premium { color: var(--theme-color, #e4002b); }
.pf-tag-premium_plus { color: #198754; }
.pf-diagram { width: 100%; height: auto; display: block; }
.pf-diagram .pf-t  { font: 600 12px Helvetica, Arial, sans-serif; fill: #1f2430; }
.pf-diagram .pf-tw { font: 600 12px Helvetica, Arial, sans-serif; fill: #fff; }
.pf-diagram .pf-ts { font: 11px Helvetica, Arial, sans-serif; fill: #4b515d; }
.pf-missing-item { color: #1f2430; }

/* ---- trust ladder ---- */
.trust-step-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #e8eaee; color: #4b515d; font-weight: 600; font-size: 13px; flex-shrink: 0; }
.trust-step-mark.done { background: #198754; color: #fff; }
.feature-strip-verify { color: #1f2430; }