/* ============================================================
   SPAVERSE - SPA DETAILS
   FINAL 65 / 35 PREMIUM WORKSPACE
   FONT SIZE UPDATED VERSION
============================================================ */

:root {
    --svd-green: #2e5e4e;
    --svd-green-dark: #1e4338;
    --svd-green-deep: #15362d;

    --svd-gold: #c9a66b;
    --svd-gold-dark: #a98249;
    --svd-gold-light: #ead7b1;

    --svd-cream: #f7f3eb;
    --svd-cream-soft: #fcfaf6;
    --svd-white: #ffffff;

    --svd-text: #243d35;
    --svd-muted: #6e7f79;
    --svd-soft: #909c97;

    --svd-border: rgba(46, 94, 78, 0.12);
    --svd-border-strong: rgba(46, 94, 78, 0.22);

    --svd-success: #2b8a59;
    --svd-success-soft: #edf8f2;

    --svd-danger: #c65353;
    --svd-danger-soft: #fff1f1;

    --svd-shadow-soft:
        0 8px 24px rgba(30, 67, 56, 0.05);

    --svd-shadow:
        0 15px 40px rgba(30, 67, 56, 0.08);

    --svd-shadow-lg:
        0 28px 70px rgba(19, 54, 43, 0.14);

    --svd-radius-sm: 9px;
    --svd-radius: 13px;
    --svd-radius-lg: 17px;
    --svd-radius-xl: 22px;
}


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

.svd-page,
.svd-page *,
.svd-gallery-modal,
.svd-gallery-modal *,
.svd-success-popup,
.svd-success-popup *,
.svd-mobile-booking-bar,
.svd-mobile-booking-bar * {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body.svd-modal-open {
    overflow: hidden;
}


.svd-page {
    min-height: 100vh;

    padding:
        22px
        0
        90px;

    overflow-x: hidden;

    color:
        var(--svd-text);

    background:
        radial-gradient(
            circle at 7% 0%,
            rgba(201, 166, 107, 0.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #fcfbf8 0%,
            #f7f5ef 100%
        );
}


.svd-shell {
    width: 90%;
    max-width: 1180px;

    margin:
        0
        auto;
}


.svd-page img {
    display: block;

    max-width: 100%;
}


.svd-page a {
    color: inherit;

    text-decoration: none;
}


.svd-page button,
.svd-page input,
.svd-page select,
.svd-page textarea,
.svd-gallery-modal button,
.svd-success-popup button {
    font: inherit;
}


/* ============================================================
   BREADCRUMB
============================================================ */

.svd-breadcrumb {
    display: flex;

    margin-bottom: 15px;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    color:
        var(--svd-muted);

    font-size: 13px;
    font-weight: 700;
}


.svd-breadcrumb a {
    transition:
        color
        0.2s
        ease;
}


.svd-breadcrumb a:hover {
    color:
        var(--svd-green);
}


.svd-breadcrumb strong {
    color:
        var(--svd-green-dark);

    font-weight: 900;
}


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

.svd-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(380px, 0.88fr);

    gap: 22px;

    padding: 14px;

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

    border-radius:
        var(--svd-radius-xl);

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        var(--svd-shadow);
}


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

.svd-hero-gallery {
    min-width: 0;
}


.svd-gallery-main {
    position: relative;

    width: 100%;
    height: 420px;

    overflow: hidden;

    padding: 0;

    border: 0;
    border-radius: 17px;

    background:
        #e8ece9;

    cursor: pointer;
}


.svd-gallery-main::after {
    position: absolute;

    inset: 0;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(10, 32, 24, 0.37)
        );
}


.svd-gallery-main img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.35s
        ease;
}


.svd-gallery-main:hover img {
    transform:
        scale(1.025);
}


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

.svd-open-status {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 3;

    display: grid;

    grid-template-columns:
        auto
        auto;

    align-items: center;

    column-gap: 6px;

    padding:
        9px
        11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.42);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.95);

    box-shadow:
        0
        8px
        20px
        rgba(0, 0, 0, 0.10);

    backdrop-filter:
        blur(8px);
}


.svd-open-status i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--svd-success);
}


.svd-open-status strong {
    color:
        var(--svd-green-dark);

    font-size: 12px;
    font-weight: 900;
}


.svd-open-status small {
    grid-column: 2;

    margin-top: 1px;

    color:
        var(--svd-muted);

    font-size: 10px;
}


.svd-open-status.is-closed i {
    background:
        var(--svd-danger);
}


.svd-open-status.is-closed strong {
    color:
        var(--svd-danger);
}


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

.svd-gallery-count {
    position: absolute;

    right: 11px;
    bottom: 11px;

    z-index: 3;

    display: inline-flex;

    min-height: 30px;

    padding:
        0
        10px;

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

    border-radius: 999px;

    background:
        rgba(19, 48, 38, 0.84);

    color:
        #fff;

    font-size: 11px;
    font-weight: 900;
}


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

.svd-gallery-thumbs {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 6px;

    margin-top: 6px;
}


.svd-gallery-thumb {
    position: relative;

    height: 80px;

    overflow: hidden;

    padding: 0;

    border: 0;
    border-radius: 9px;

    background:
        #e9eeeb;

    cursor: pointer;
}


.svd-gallery-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.svd-gallery-more {
    position: absolute;

    inset: 0;

    display: flex;

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

    flex-direction: column;

    background:
        rgba(19, 48, 38, 0.74);

    color:
        #fff;
}


.svd-gallery-more strong {
    font-size: 19px;
}


.svd-gallery-more small {
    margin-top: 2px;

    font-size: 10px;
    font-weight: 900;
}


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

.svd-hero-info {
    display: flex;

    min-width: 0;

    padding:
        18px
        19px
        18px
        3px;

    justify-content: center;

    flex-direction: column;
}


.svd-title-row {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}


.svd-title-row > div {
    min-width: 0;
}


.svd-eyebrow {
    display: block;

    margin-bottom: 6px;

    color:
        var(--svd-gold-dark);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.3px;
}


/* ============================================================
   SPA TITLE + VERIFIED
============================================================ */

.svd-spa-title {
    display: inline;

    margin: 0;

    color:
        var(--svd-green-dark);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            38px,
            4vw,
            52px
        );

    font-weight: 700;

    line-height: 0.98;
}


.svd-spa-name-leading {
    display: inline;
}


.svd-spa-name-leading:not(:empty)::after {
    content: " ";
}


.svd-spa-name-last {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;
}


.svd-verified-badge {
    display: inline-grid;

    width: 18px;
    height: 18px;

    flex:
        0
        0
        18px;

    place-items: center;

    border-radius: 50%;

    background:
        var(--svd-green);

    color:
        #fff;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 900;

    line-height: 1;

    transform:
        translateY(1px);

    box-shadow:
        0
        3px
        7px
        rgba(46, 94, 78, 0.18);
}


/* ============================================================
   FAVORITE
============================================================ */

.svd-favorite-btn {
    display: inline-flex;

    min-height: 36px;

    padding:
        0
        11px;

    flex:
        0
        0
        auto;

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

    gap: 5px;

    border:
        1px solid
        var(--svd-border-strong);

    border-radius: 999px;

    background:
        #fff;

    color:
        var(--svd-green);

    font-size: 17px;

    cursor: pointer;
}


.svd-favorite-btn span {
    font-size: 11px;
    font-weight: 900;
}


.svd-favorite-btn.is-favorite {
    background:
        #fff2f2;

    color:
        #bf4f4f;
}


/* ============================================================
   LOCATION / RATING
============================================================ */

.svd-location {
    display: flex;

    gap: 5px;

    margin:
        11px
        0
        0;

    color:
        var(--svd-muted);

    font-size: 13px;

    line-height: 1.45;
}


.svd-location span {
    color:
        var(--svd-gold-dark);
}


.svd-rating {
    display: flex;

    margin-top: 9px;

    align-items: center;

    gap: 6px;
}


.svd-stars {
    color:
        #e2a439;

    font-size: 13px;

    letter-spacing: 0.5px;
}


.svd-rating strong {
    color:
        var(--svd-green-dark);

    font-size: 12px;
}


.svd-rating > span {
    color:
        var(--svd-muted);

    font-size: 11px;
}


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

.svd-quick-stats {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

    margin-top: 14px;
}


.svd-quick-stats article {
    display: flex;

    min-width: 0;

    padding: 9px;

    align-items: center;

    gap: 8px;

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

    border-radius: 9px;

    background:
        #fbfcfa;
}


.svd-quick-stats article > span {
    display: grid;

    width: 29px;
    height: 29px;

    flex:
        0
        0
        29px;

    place-items: center;

    border-radius: 7px;

    background:
        #edf5f1;

    color:
        var(--svd-green);

    font-size: 14px;
}


.svd-quick-stats article div {
    min-width: 0;
}


.svd-quick-stats strong,
.svd-quick-stats small {
    display: block;
}


.svd-quick-stats strong {
    color:
        var(--svd-green-dark);

    font-size: 12px;
    font-weight: 900;
}


.svd-quick-stats small {
    margin-top: 1px;

    color:
        var(--svd-muted);

    font-size: 10px;
}


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

.svd-hero-description {
    margin:
        13px
        0
        0;

    color:
        var(--svd-muted);

    font-size: 13px;

    line-height: 1.6;
}


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

.svd-hero-actions {
    display: flex;

    gap: 8px;

    margin-top: 14px;
}


.svd-primary-action,
.svd-secondary-action {
    display: inline-flex;

    min-height: 40px;

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

    border-radius: 8px;

    font-size: 12px;
    font-weight: 900;
}


.svd-primary-action {
    flex: 1;

    border: 0;

    background:
        var(--svd-green);

    color:
        #fff
        !important;

    cursor: pointer;
}


.svd-secondary-action {
    padding:
        0
        13px;

    border:
        1px solid
        var(--svd-border-strong);

    background:
        #fff;

    color:
        var(--svd-green)
        !important;
}


/* ============================================================
   MAIN WORKSPACE 65 / 35
============================================================ */

.svd-workspace-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 65fr)
        minmax(300px, 35fr);

    gap: 18px;

    margin-top: 20px;

    align-items: start;
}


.svd-workspace-left,
.svd-workspace-right {
    min-width: 0;
}


.svd-workspace-left {
    display: grid;

    gap: 16px;
}


.svd-workspace-right {
    display: grid;

    gap: 12px;
}


/* ============================================================
   BOOKING WRAPPER
============================================================ */

.svd-booking-wrapper {
    min-width: 0;
}


.svd-booking {
    width: 100%;

    overflow: visible;

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

    border-radius:
        var(--svd-radius-lg);

    background:
        #fff;

    box-shadow:
        var(--svd-shadow);
}


.svd-booking-form {
    width: 100%;
}


/* ============================================================
   BOOKING HEADING
============================================================ */

.svd-booking-heading {
    padding:
        17px
        18px
        12px;

    text-align: center;
}


.svd-booking-heading > span {
    display: block;

    color:
        var(--svd-gold-dark);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


.svd-booking-heading h2 {
    margin:
        3px
        0
        0;

    color:
        var(--svd-green-dark);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    line-height: 1;
}


.svd-booking-heading p {
    margin:
        4px
        0
        0;

    color:
        var(--svd-muted);

    font-size: 12px;
}


/* ============================================================
   STEPPER
============================================================ */

.svd-booking-stepper {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto
        1fr
        auto
        1fr
        auto;

    padding:
        10px
        15px;

    align-items: center;

    gap: 7px;

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

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

    background:
        linear-gradient(
            90deg,
            #f8fbf9,
            #fffdf8
        );
}


.svd-booking-stepper > i {
    width: 100%;
    height: 1px;

    background:
        #d9e2de;
}


.svd-stepper-item {
    display: flex;

    padding: 0;

    align-items: center;

    gap: 6px;

    border: 0;

    background:
        transparent;

    opacity: 0.44;

    cursor: pointer;
}


.svd-stepper-item:disabled {
    cursor: default;
}


.svd-stepper-item > span {
    display: grid;

    width: 26px;
    height: 26px;

    flex:
        0
        0
        26px;

    place-items: center;

    border:
        1px solid
        #d8e1dd;

    border-radius: 50%;

    background:
        #fff;

    color:
        var(--svd-muted);

    font-size: 10px;
    font-weight: 900;
}


.svd-stepper-item strong,
.svd-stepper-item small {
    display: block;

    text-align: left;

    white-space: nowrap;
}


.svd-stepper-item strong {
    color:
        var(--svd-green-dark);

    font-size: 11px;
    font-weight: 900;
}


.svd-stepper-item small {
    margin-top: 1px;

    color:
        var(--svd-muted);

    font-size: 9px;
}


.svd-stepper-item.is-active,
.svd-stepper-item.is-complete {
    opacity: 1;
}


.svd-stepper-item.is-active > span {
    border-color:
        var(--svd-green);

    background:
        var(--svd-green);

    color:
        #fff;
}


.svd-stepper-item.is-complete > span {
    border-color:
        var(--svd-success);

    background:
        var(--svd-success-soft);

    color:
        var(--svd-success);
}


/* ============================================================
   BOOKING PANELS
============================================================ */

.svd-step-stage {
    width: 100%;
}


.svd-booking-panel {
    display: none;

    width: 100%;

    min-height: 0;

    padding:
        16px
        18px
        13px;
}


.svd-booking-panel.is-active {
    display: block;
}


.svd-booking-panel[hidden] {
    display:
        none !important;
}


/* ============================================================
   PANEL HEAD
============================================================ */

.svd-panel-head {
    display: flex;

    padding-bottom: 10px;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    border-bottom:
        1px solid
        var(--svd-border);
}


.svd-panel-head > div > span {
    display: block;

    color:
        var(--svd-gold-dark);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}


.svd-panel-head h3 {
    margin:
        3px
        0
        0;

    color:
        var(--svd-green-dark);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    line-height: 1;
}


.svd-panel-head p {
    margin:
        3px
        0
        0;

    color:
        var(--svd-muted);

    font-size: 11px;
}


.svd-panel-head > strong {
    color:
        rgba(201, 166, 107, 0.20);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    line-height: 0.8;
}


/* ============================================================
   GENERAL FIELDS
============================================================ */

.svd-field {
    min-width: 0;
}


.svd-field label,
.svd-duration-section > label {
    display: block;

    margin-bottom: 5px;

    color:
        var(--svd-green-dark);

    font-size: 11px;
    font-weight: 900;
}


.svd-field select,
.svd-field input[type="date"] {
    width: 100%;
    height: 41px;

    padding:
        0
        11px;

    border:
        1px solid
        var(--svd-border-strong);

    border-radius: 8px;

    outline: none;

    background:
        #fff;

    color:
        var(--svd-text);

    font-size: 12px;
}


.svd-field select:focus,
.svd-field input[type="date"]:focus {
    border-color:
        var(--svd-green);

    box-shadow:
        0
        0
        0
        3px
        rgba(46, 94, 78, 0.07);
}


.svd-field select:disabled,
.svd-field input:disabled {
    background:
        #f5f7f6;

    cursor: not-allowed;
}


/* ============================================================
   STEP 1
============================================================ */

.svd-step-one-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(235px, 0.85fr);

    gap: 13px;

    padding-top: 12px;
}


.svd-service-preview {
    display: flex;

    margin-top: 8px;

    padding: 10px;

    align-items: center;

    gap: 8px;

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

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #fbfdfc,
            #fffaf1
        );
}


.svd-service-preview-icon {
    display: grid;

    width: 33px;
    height: 33px;

    flex:
        0
        0
        33px;

    place-items: center;

    border-radius: 7px;

    background:
        #f3ead9;

    color:
        var(--svd-gold-dark);

    font-size: 15px;
}


.svd-service-preview strong,
.svd-service-preview small {
    display: block;
}


.svd-service-preview strong {
    color:
        var(--svd-green-dark);

    font-size: 12px;
    font-weight: 900;
}


.svd-service-preview small {
    margin-top: 2px;

    color:
        var(--svd-muted);

    font-size: 10px;
}


/* ============================================================
   DURATION
============================================================ */

.svd-duration-options {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;
}


.svd-duration-option {
    position: relative;

    display: block;

    cursor: pointer;
}


.svd-duration-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.svd-duration-option > span {
    position: relative;

    display: flex;

    min-height: 86px;

    padding:
        11px
        10px;

    justify-content: center;

    flex-direction: column;

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

    border-radius: 9px;

    background:
        #fff;
}


.svd-duration-option input:checked + span {
    border-color:
        var(--svd-green);

    background:
        #f1f8f4;
}


.svd-duration-option input:disabled + span {
    opacity: 0.46;

    cursor: not-allowed;
}


.svd-duration-option > span > i {
    position: absolute;

    top: 7px;
    right: 7px;

    display: grid;

    width: 17px;
    height: 17px;

    place-items: center;

    border-radius: 50%;

    background:
        #edf3f0;

    color:
        var(--svd-muted);

    font-size: 8px;
    font-style: normal;
}


.svd-duration-option input:checked + span > i {
    background:
        var(--svd-green);

    color:
        #fff;
}


.svd-duration-option strong {
    color:
        var(--svd-green-dark);

    font-size: 16px;
    font-weight: 900;
}


.svd-duration-option small {
    margin-top: 3px;

    color:
        var(--svd-green);

    font-size: 12px;
    font-weight: 900;
}


.svd-duration-option em {
    margin-top: 3px;

    color:
        var(--svd-muted);

    font-size: 10px;
    font-style: normal;
}


.svd-duration-help {
    display: flex;

    margin-top: 7px;

    padding:
        7px
        8px;

    gap: 6px;

    border-radius: 7px;

    background:
        #f7f9f8;
}


.svd-duration-help p {
    margin: 0;

    color:
        var(--svd-muted);

    font-size: 10px;

    line-height: 1.4;
}


/* ============================================================
   FIELD MESSAGE
============================================================ */

.svd-field-message {
    margin-top: 4px;

    color:
        var(--svd-muted);

    font-size: 10px;
}


.svd-field-message:empty {
    display: none;
}


.svd-field-message.is-error {
    color:
        var(--svd-danger);
}


.svd-field-message.is-success {
    color:
        var(--svd-success);
}


/* ============================================================
   STEP ACTIONS
============================================================ */

.svd-step-actions {
    display: flex;

    margin-top: 11px;

    padding-top: 9px;

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

    gap: 7px;

    border-top:
        1px solid
        var(--svd-border);
}


.svd-back-button,
.svd-next-button {
    display: inline-flex;

    min-height: 36px;

    padding:
        0
        12px;

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

    gap: 6px;

    border-radius: 7px;

    font-size: 11px;
    font-weight: 900;

    cursor: pointer;
}


.svd-back-button {
    border:
        1px solid
        var(--svd-border-strong);

    background:
        #fff;

    color:
        var(--svd-green);
}


.svd-next-button {
    min-width: 108px;

    border: 0;

    background:
        var(--svd-green);

    color:
        #fff;
}


.svd-next-button:disabled {
    opacity: 0.42;

    cursor: not-allowed;
}


/* ============================================================
   STEP 2
============================================================ */

.svd-step-two-layout {
    display: grid;

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

    gap: 10px;

    padding-top: 12px;
}


.svd-customer-card {
    display: flex;

    min-width: 0;

    padding: 11px;

    align-items: center;

    gap: 8px;

    border:
        1px solid
        rgba(201, 166, 107, 0.20);

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #fbf6ec,
            #ffffff
        );
}


.svd-customer-avatar {
    display: grid;

    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    place-items: center;

    border-radius: 50%;

    background:
        var(--svd-green);

    color:
        #fff;

    font-size: 15px;
    font-weight: 900;
}


.svd-customer-card span,
.svd-customer-card strong,
.svd-customer-card small {
    display: block;
}


.svd-customer-card span {
    color:
        var(--svd-gold-dark);

    font-size: 9px;
    font-weight: 900;
}


.svd-customer-card strong {
    margin-top: 2px;

    color:
        var(--svd-green-dark);

    font-size: 12px;
}


.svd-customer-card small {
    margin-top: 2px;

    overflow-wrap: anywhere;

    color:
        var(--svd-muted);

    font-size: 10px;
}


.svd-details-fields {
    display: grid;

    gap: 8px;
}


.svd-readonly-field {
    display: flex;

    min-height: 38px;

    padding:
        0
        9px;

    align-items: center;

    gap: 6px;

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

    border-radius: 7px;

    background:
        #f8faf9;
}


.svd-readonly-field span {
    color:
        var(--svd-gold-dark);
}


.svd-readonly-field strong {
    overflow-wrap: anywhere;

    color:
        var(--svd-green-dark);

    font-size: 11px;
}


.svd-room-note {
    display: flex;

    margin-top: 7px;

    padding: 8px;

    align-items: center;

    gap: 7px;

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

    border-radius: 7px;

    background:
        #fafcfa;
}


.svd-room-note > span {
    display: grid;

    width: 28px;
    height: 28px;

    flex:
        0
        0
        28px;

    place-items: center;

    border-radius: 6px;

    background:
        #edf5f1;

    color:
        var(--svd-green);
}


.svd-room-note p {
    margin: 0;
}


.svd-room-note strong,
.svd-room-note small {
    display: block;
}


.svd-room-note strong {
    color:
        var(--svd-green-dark);

    font-size: 11px;
}


.svd-room-note small {
    margin-top: 2px;

    color:
        var(--svd-muted);

    font-size: 9px;
}


/* ============================================================
   STEP 3 - DATE & TIME
============================================================ */

.svd-date-time-layout {
    display: grid;

    grid-template-columns:
        minmax(180px, 0.72fr)
        minmax(0, 1.28fr);

    gap: 13px;

    padding-top: 12px;
}


.svd-date-panel,
.svd-time-panel {
    min-width: 0;
}


.svd-date-field {
    position: relative;
}


.svd-date-field > span {
    position: absolute;

    top: 50%;
    left: 11px;

    z-index: 2;

    color:
        var(--svd-gold-dark);

    font-size: 12px;

    pointer-events: none;

    transform:
        translateY(-50%);
}


.svd-date-field input[type="date"] {
    padding-left: 32px;
}


.svd-selected-date-card {
    display: flex;

    margin-top: 8px;

    min-height: 62px;

    padding:
        10px;

    align-items: center;

    gap: 9px;

    border:
        1px solid
        rgba(201, 166, 107, 0.22);

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #fffaf1,
            #fbfdfc
        );
}


.svd-selected-date-card > span {
    display: grid;

    width: 34px;
    height: 34px;

    flex:
        0
        0
        34px;

    place-items: center;

    border-radius: 8px;

    background:
        #f3ead9;

    color:
        var(--svd-gold-dark);

    font-size: 15px;
}


.svd-selected-date-card small,
.svd-selected-date-card strong {
    display: block;
}


.svd-selected-date-card small {
    color:
        var(--svd-gold-dark);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.6px;
}


.svd-selected-date-card strong {
    margin-top: 3px;

    color:
        var(--svd-green-dark);

    font-size: 11px;
}


/* ============================================================
   TIME PERIOD TABS
============================================================ */

.svd-period-label {
    margin-bottom: 5px;

    color:
        var(--svd-green-dark);

    font-size: 11px;
    font-weight: 900;
}


.svd-period-tabs {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 5px;
}


.svd-period-tabs button {
    display: flex;

    min-width: 0;
    min-height: 51px;

    padding:
        6px
        4px;

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

    flex-direction: column;

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

    border-radius: 7px;

    background:
        #fff;

    color:
        var(--svd-muted);

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}


.svd-period-tabs button > span {
    margin-bottom: 2px;

    color:
        var(--svd-gold-dark);

    font-size: 12px;
}


.svd-period-tabs button strong {
    color:
        var(--svd-green-dark);

    font-size: 10px;
    font-weight: 900;
}


.svd-period-tabs button small {
    margin-top: 1px;

    font-size: 8px;
}


.svd-period-tabs button.is-active {
    border-color:
        var(--svd-green);

    background:
        #eff7f3;

    color:
        var(--svd-green);
}


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

.svd-slot-head {
    display: flex;

    margin-top: 11px;
    margin-bottom: 6px;

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

    gap: 8px;
}


.svd-slot-head > strong {
    color:
        var(--svd-green-dark);

    font-size: 11px;
    font-weight: 900;
}


.svd-slot-legend {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.svd-slot-legend span {
    display: inline-flex;

    align-items: center;

    gap: 3px;

    color:
        var(--svd-muted);

    font-size: 9px;
}


.svd-slot-legend i {
    display: block;

    width: 5px;
    height: 5px;

    border-radius: 50%;
}


.svd-slot-legend i.available {
    background:
        var(--svd-success);
}


.svd-slot-legend i.booked {
    background:
        var(--svd-danger);
}


.svd-slot-legend i.blocked {
    background:
        #a3aaa7;
}


/* ============================================================
   COMPACT TIME SLOTS
============================================================ */

.svd-time-slots {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 5px;

    width: 100%;
    min-width: 0;

    max-height: 150px;

    padding:
        1px
        2px
        1px
        0;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;
}


.svd-time-slots::-webkit-scrollbar {
    display: none;

    width: 0;
    height: 0;
}


.svd-time-slots button,
.svd-time-slot {
    display: inline-flex;

    width: 100%;
    min-width: 0;

    min-height: 31px;
    height: 31px;

    padding:
        0
        5px;

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

    border:
        1px solid
        rgba(46, 94, 78, 0.15);

    border-radius: 6px;

    outline: none;

    background:
        #fff;

    color:
        var(--svd-green-dark);

    font-size: 11px;
    font-weight: 900;

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    box-shadow: none;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}


.svd-time-slots button:hover:not(:disabled),
.svd-time-slot:hover:not(:disabled) {
    border-color:
        var(--svd-green);

    background:
        #f4f9f6;

    transform:
        translateY(-1px);
}


.svd-time-slots button.is-selected,
.svd-time-slots button.selected,
.svd-time-slot.is-selected,
.svd-time-slot.selected {
    border-color:
        var(--svd-green);

    background:
        var(--svd-green);

    color:
        #fff;
}


.svd-time-slots button.is-available,
.svd-time-slots button.available,
.svd-time-slot.is-available,
.svd-time-slot.available {
    border-color:
        rgba(43, 138, 89, 0.22);

    background:
        #f2faf6;

    color:
        #28784f;
}


.svd-time-slots button.is-available.is-selected,
.svd-time-slots button.available.selected,
.svd-time-slot.is-available.is-selected,
.svd-time-slot.available.selected {
    border-color:
        var(--svd-green);

    background:
        var(--svd-green);

    color:
        #fff;
}


.svd-time-slots button.is-booked,
.svd-time-slots button.booked,
.svd-time-slot.is-booked,
.svd-time-slot.booked,
.svd-time-slots button:disabled {
    border-color:
        rgba(198, 83, 83, 0.15);

    background:
        #fff4f4;

    color:
        #bd6565;

    opacity: 0.78;

    cursor: not-allowed;

    text-decoration: none;
}


.svd-time-slots button.is-blocked,
.svd-time-slots button.blocked,
.svd-time-slot.is-blocked,
.svd-time-slot.blocked {
    border-color:
        #e3e7e5;

    background:
        #f3f5f4;

    color:
        #969e9a;

    cursor: not-allowed;
}


.svd-empty-slots {
    grid-column:
        1 / -1;

    display: flex;

    min-height: 68px;

    padding:
        12px;

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

    border:
        1px dashed
        var(--svd-border-strong);

    border-radius: 8px;

    background:
        #fafcfa;

    color:
        var(--svd-muted);

    text-align: center;

    font-size: 11px;

    line-height: 1.5;
}


/* ============================================================
   STEP 4 - REVIEW BOOKING
============================================================ */

.svd-review-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(215px, 0.85fr);

    gap: 12px;

    padding-top: 12px;
}


.svd-review-main {
    min-width: 0;
}


.svd-review-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;
}


.svd-review-list > div {
    min-width: 0;

    padding:
        9px
        10px;

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

    border-radius: 7px;

    background:
        #fbfcfb;
}


.svd-review-list small,
.svd-review-list strong {
    display: block;
}


.svd-review-list small {
    margin-bottom: 3px;

    color:
        var(--svd-muted);

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.4px;
}


.svd-review-list strong {
    overflow-wrap: anywhere;

    color:
        var(--svd-green-dark);

    font-size: 11px;
    font-weight: 900;
}


/* ============================================================
   PAYMENT SUMMARY
============================================================ */

.svd-payment-summary {
    padding: 12px;

    border:
        1px solid
        rgba(201, 166, 107, 0.24);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #f7fbf9
        );
}


.svd-payment-summary > span {
    display: block;

    color:
        var(--svd-gold-dark);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.8px;
}


.svd-total {
    display: flex;

    margin-top: 7px;

    padding-bottom: 8px;

    align-items: flex-end;
    justify-content: space-between;

    gap: 8px;

    border-bottom:
        1px solid
        var(--svd-border);
}


.svd-total > span {
    color:
        var(--svd-muted);

    font-size: 10px;
}


.svd-total > strong {
    color:
        var(--svd-green-dark);

    font-size: 21px;
    font-weight: 900;
}


.svd-total b {
    font-weight: inherit;
}


.svd-wallet-note {
    display: flex;

    margin-top: 8px;

    padding:
        7px;

    align-items: flex-start;

    gap: 6px;

    border-radius: 7px;

    background:
        #edf6f2;
}


.svd-wallet-note > span {
    color:
        var(--svd-green);

    font-size: 11px;
}


.svd-wallet-note p {
    margin: 0;

    color:
        var(--svd-muted);

    font-size: 9px;

    line-height: 1.45;
}


.svd-confirm-button {
    display: flex;

    width: 100%;
    min-height: 38px;

    margin-top: 9px;

    padding:
        0
        11px;

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

    border: 0;
    border-radius: 7px;

    background:
        var(--svd-green);

    color:
        #fff;

    font-size: 11px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0
        7px
        16px
        rgba(46, 94, 78, 0.16);
}


.svd-confirm-button:hover {
    background:
        var(--svd-green-dark);
}


.svd-confirm-button:disabled {
    opacity: 0.55;

    cursor: wait;
}


.svd-booking-error {
    margin-top: 6px;

    color:
        var(--svd-danger);

    font-size: 10px;

    line-height: 1.4;
}


.svd-booking-error:empty {
    display: none;
}


/* ============================================================
   BOOKING POLICY
============================================================ */

.svd-booking-policy {
    display: flex;

    min-height: 32px;

    padding:
        7px
        14px;

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

    gap: 5px;

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

    background:
        #fafbf9;

    color:
        var(--svd-muted);

    font-size: 10px;
}


.svd-booking-policy span {
    color:
        var(--svd-gold-dark);
}


/* ============================================================
   BOOKING SCROLLBAR FIX
============================================================ */

.svd-booking,
.svd-booking-wrapper,
.svd-booking-form,
.svd-step-stage,
.svd-booking-panel {
    scrollbar-width: none;
    -ms-overflow-style: none;
}


.svd-booking::-webkit-scrollbar,
.svd-booking-wrapper::-webkit-scrollbar,
.svd-booking-form::-webkit-scrollbar,
.svd-step-stage::-webkit-scrollbar,
.svd-booking-panel::-webkit-scrollbar {
    display: none;

    width: 0;
    height: 0;
}


.svd-booking,
.svd-booking-wrapper,
.svd-step-stage {
    overflow-x: hidden;
}


/* ============================================================
   GUEST BOOKING
============================================================ */

.svd-guest-booking {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        19px
        20px
        16px;

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

    border-radius:
        var(--svd-radius-lg);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbf8f1 100%
        );

    box-shadow:
        var(--svd-shadow);
}


.svd-guest-booking::before {
    position: absolute;

    top: -90px;
    right: -90px;

    width: 190px;
    height: 190px;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(201, 166, 107, 0.14),
            transparent 68%
        );

    pointer-events: none;
}


.svd-guest-booking-top {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    gap: 13px;
}


.svd-guest-brand-mark {
    display: grid;

    width: 52px;
    height: 52px;

    flex:
        0
        0
        52px;

    place-items: center;

    border:
        1px solid
        rgba(201, 166, 107, 0.28);

    border-radius: 14px;

    background:
        #fff9ee;

    color:
        var(--svd-gold-dark);

    font-size: 23px;

    box-shadow:
        0
        8px
        20px
        rgba(201, 166, 107, 0.10);
}


.svd-guest-heading {
    min-width: 0;
}


.svd-guest-heading > span {
    display: block;

    color:
        var(--svd-gold-dark);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}


.svd-guest-heading h2 {
    margin:
        3px
        0
        0;

    color:
        var(--svd-green-dark);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    line-height: 0.98;
}


.svd-guest-heading h2 em {
    color:
        var(--svd-gold-dark);

    font-style: italic;
}


.svd-guest-heading p {
    max-width: 560px;

    margin:
        5px
        0
        0;

    color:
        var(--svd-muted);

    font-size: 11px;

    line-height: 1.55;
}


/* ============================================================
   GUEST FLOW
============================================================ */

.svd-guest-booking-flow {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        1fr
        14px
        1fr
        14px
        1fr
        14px
        1fr;

    margin-top: 15px;

    align-items: center;
}


.svd-guest-booking-flow > i {
    display: block;

    width: 100%;
    height: 1px;

    background:
        rgba(46, 94, 78, 0.18);
}


.svd-guest-booking-flow article {
    display: flex;

    min-width: 0;
    min-height: 64px;

    padding:
        8px;

    align-items: center;

    gap: 7px;

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

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.88);
}


.svd-guest-flow-number {
    display: grid;

    width: 27px;
    height: 27px;

    flex:
        0
        0
        27px;

    place-items: center;

    border-radius: 50%;

    background:
        #edf5f1;

    color:
        var(--svd-green);

    font-size: 9px;
    font-weight: 900;
}


.svd-guest-booking-flow strong,
.svd-guest-booking-flow small {
    display: block;
}


.svd-guest-booking-flow strong {
    color:
        var(--svd-green-dark);

    font-size: 10px;
    font-weight: 900;
}


.svd-guest-booking-flow small {
    margin-top: 2px;

    color:
        var(--svd-muted);

    font-size: 8px;

    line-height: 1.3;
}


/* ============================================================
   GUEST BOTTOM
============================================================ */

.svd-guest-bottom {
    position: relative;

    z-index: 1;

    display: grid;

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

    gap: 12px;

    margin-top: 12px;

    align-items: stretch;
}


.svd-guest-benefits {
    display: flex;

    min-width: 0;

    padding:
        8px
        10px;

    align-items: center;

    flex-wrap: wrap;

    gap:
        7px
        12px;

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

    border-radius: 8px;

    background:
        #fafcfa;
}


.svd-guest-benefits > span {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    color:
        var(--svd-muted);

    font-size: 9px;
    font-weight: 800;
}


.svd-guest-benefits i {
    display: grid;

    width: 15px;
    height: 15px;

    place-items: center;

    border-radius: 50%;

    background:
        var(--svd-success-soft);

    color:
        var(--svd-success);

    font-size: 7px;
    font-style: normal;
}


.svd-guest-login-button {
    display: flex;

    min-height: 52px;

    padding:
        8px
        11px;

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

    gap: 10px;

    border-radius: 8px;

    background:
        var(--svd-green);

    color:
        #fff !important;

    box-shadow:
        0
        8px
        18px
        rgba(46, 94, 78, 0.16);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.svd-guest-login-button:hover {
    background:
        var(--svd-green-dark);

    transform:
        translateY(-1px);
}


.svd-guest-login-button small,
.svd-guest-login-button strong {
    display: block;
}


.svd-guest-login-button small {
    color:
        rgba(255, 255, 255, 0.68);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.5px;
}


.svd-guest-login-button strong {
    margin-top: 2px;

    color:
        #fff;

    font-size: 11px;
}


.svd-guest-login-button > i {
    display: grid;

    width: 27px;
    height: 27px;

    flex:
        0
        0
        27px;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.13);

    color:
        #fff;

    font-size: 13px;
    font-style: normal;
}


/* ============================================================
   GUEST SECURITY
============================================================ */

.svd-guest-security {
    position: relative;

    z-index: 1;

    display: flex;

    margin-top: 9px;

    padding-top: 9px;

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

    gap: 5px;

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

    color:
        var(--svd-muted);
}


.svd-guest-security > span {
    color:
        var(--svd-gold-dark);

    font-size: 10px;
}


.svd-guest-security p {
    margin: 0;

    font-size: 9px;

    line-height: 1.4;
}


/* ============================================================
   OUR SERVICES & PRICES
============================================================ */

.svd-left-services {
    width: 100%;
    min-width: 0;
}


.svd-services-card {
    width: 100%;

    overflow: hidden;

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

    border-radius:
        var(--svd-radius-lg);

    background:
        #fff;

    box-shadow:
        var(--svd-shadow);
}


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

.svd-services-head {
    display: flex;

    min-height: 74px;

    padding:
        14px
        16px;

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

    gap: 12px;

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

    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #fbf8f1 100%
        );
}


.svd-services-title {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 10px;
}


.svd-services-title-icon {
    display: grid;

    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    place-items: center;

    border:
        1px solid
        rgba(201, 166, 107, 0.24);

    border-radius: 10px;

    background:
        #fff8ec;

    color:
        var(--svd-gold-dark);

    font-size: 17px;
}


.svd-services-title > div {
    min-width: 0;
}


.svd-services-title small {
    display: block;

    margin-bottom: 2px;

    color:
        var(--svd-gold-dark);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}


.svd-services-title h2 {
    margin: 0;

    color:
        var(--svd-green-dark);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    line-height: 1;
}


.svd-services-title p {
    margin:
        3px
        0
        0;

    color:
        var(--svd-muted);

    font-size: 11px;
}


.svd-services-head-actions {
    flex:
        0
        0
        auto;
}


.svd-services-head-actions > span {
    display: inline-flex;

    min-height: 28px;

    padding:
        0
        9px;

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

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

    border-radius: 999px;

    background:
        #f7faf8;

    color:
        var(--svd-green);

    font-size: 10px;
    font-weight: 900;
}


/* ============================================================
   SERVICES COLUMN HEADER
============================================================ */

.svd-services-table-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        0.7fr
        0.55fr
        0.55fr;

    gap: 8px;

    min-height: 31px;

    padding:
        0
        15px;

    align-items: center;

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

    background:
        #f7faf8;
}


.svd-services-table-head span {
    color:
        var(--svd-muted);

    font-size: 9px;
    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


.svd-services-table-head span:nth-child(2),
.svd-services-table-head span:nth-child(3),
.svd-services-table-head span:nth-child(4) {
    text-align: center;
}


/* ============================================================
   SERVICES LIST
============================================================ */

.svd-services-list {
    width: 100%;

    max-height: 430px;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    scrollbar-width: none;
    -ms-overflow-style: none;
}


.svd-services-list::-webkit-scrollbar {
    display: none;

    width: 0;
    height: 0;
}


/* ============================================================
   SERVICE ROW
============================================================ */

.svd-service-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        0.7fr
        0.55fr
        0.55fr;

    gap: 8px;

    min-width: 0;
    min-height: 63px;

    padding:
        9px
        15px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(46, 94, 78, 0.08);

    background:
        #fff;

    transition:
        background 0.18s ease;
}


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


.svd-service-row:hover {
    background:
        #fbfdfc;
}


.svd-service-main {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 9px;
}


.svd-service-icon {
    display: grid;

    width: 34px;
    height: 34px;

    flex:
        0
        0
        34px;

    place-items: center;

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #f7f0e4,
            #fffaf2
        );

    color:
        var(--svd-gold-dark);

    font-size: 15px;
}


.svd-service-copy {
    min-width: 0;
}


.svd-service-copy h3 {
    margin: 0;

    overflow: hidden;

    color:
        var(--svd-green-dark);

    font-size: 13px;
    font-weight: 900;

    line-height: 1.25;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.svd-service-copy p {
    display: -webkit-box;

    margin:
        3px
        0
        0;

    overflow: hidden;

    color:
        var(--svd-muted);

    font-size: 10px;

    line-height: 1.35;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}


.svd-service-duration {
    color:
        var(--svd-muted);

    text-align: center;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}


.svd-service-price {
    text-align: center;
}


.svd-service-price strong {
    color:
        var(--svd-green);

    font-size: 12px;
    font-weight: 900;

    white-space: nowrap;
}


.svd-service-price span {
    color:
        #a5aeaa;

    font-size: 11px;
}


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

.svd-services-empty {
    display: flex;

    min-height: 160px;

    padding: 25px;

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

    flex-direction: column;

    text-align: center;
}


.svd-services-empty > span {
    display: grid;

    width: 40px;
    height: 40px;

    place-items: center;

    border-radius: 50%;

    background:
        #f6f0e5;

    color:
        var(--svd-gold-dark);

    font-size: 17px;
}


.svd-services-empty strong {
    margin-top: 8px;

    color:
        var(--svd-green-dark);

    font-size: 12px;
}


.svd-services-empty p {
    margin:
        3px
        0
        0;

    color:
        var(--svd-muted);

    font-size: 10px;
}


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

.svd-services-footer {
    display: flex;

    min-height: 31px;

    padding:
        6px
        15px;

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

    gap: 8px;

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

    background:
        #fafbf9;

    color:
        var(--svd-muted);

    font-size: 10px;
}


.svd-services-footer i {
    color:
        var(--svd-gold-dark);

    font-style: normal;
}


/* ============================================================
   RIGHT 35% - COMMON CARD
============================================================ */

.svd-side-card {
    width: 100%;
    min-width: 0;

    padding:
        14px;

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

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

    background:
        #fff;

    box-shadow:
        var(--svd-shadow-soft);
}


.svd-side-card-head {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 9px;

    padding-bottom: 9px;

    border-bottom:
        1px solid
        var(--svd-border);
}


.svd-side-icon {
    display: grid;

    width: 33px;
    height: 33px;

    flex:
        0
        0
        33px;

    place-items: center;

    border-radius: 8px;

    background:
        #f5eee1;

    color:
        var(--svd-gold-dark);

    font-size: 14px;
}


.svd-side-card-head > div {
    min-width: 0;
}


.svd-side-card-head small {
    display: block;

    color:
        var(--svd-gold-dark);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.8px;
}


.svd-side-card-head h2 {
    margin:
        2px
        0
        0;

    overflow-wrap: anywhere;

    color:
        var(--svd-green-dark);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    line-height: 1;
}


/* ============================================================
   ABOUT
============================================================ */

.svd-about-text {
    margin:
        10px
        0
        0;

    color:
        var(--svd-muted);

    font-size: 11px;

    line-height: 1.55;
}


.svd-about-stats {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 5px;

    margin-top: 10px;
}


.svd-about-stats > div {
    display: flex;

    min-width: 0;
    min-height: 69px;

    padding:
        7px
        3px;

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

    flex-direction: column;

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

    border-radius: 7px;

    background:
        #fafcfa;

    text-align: center;
}


.svd-about-stats span {
    color:
        var(--svd-gold-dark);

    font-size: 12px;
}


.svd-about-stats strong {
    margin-top: 2px;

    color:
        var(--svd-green-dark);

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

    line-height: 1;
}


.svd-about-stats small {
    margin-top: 3px;

    color:
        var(--svd-muted);

    font-size: 9px;
    font-weight: 800;
}


/* ============================================================
   AMENITIES
============================================================ */

.svd-amenities {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;

    margin-top: 10px;
}


.svd-amenities > div {
    display: flex;

    min-width: 0;
    min-height: 36px;

    padding:
        6px
        7px;

    align-items: center;

    gap: 6px;

    border:
        1px solid
        rgba(46, 94, 78, 0.09);

    border-radius: 7px;

    background:
        #fbfcfb;
}


.svd-amenities > div > span {
    display: grid;

    width: 23px;
    height: 23px;

    flex:
        0
        0
        23px;

    place-items: center;

    border-radius: 6px;

    background:
        #edf5f1;

    color:
        var(--svd-green);

    font-size: 10px;
}


.svd-amenities strong {
    min-width: 0;

    color:
        var(--svd-text);

    font-size: 10px;
    font-weight: 800;

    line-height: 1.25;
}


/* ============================================================
   WHY CHOOSE
============================================================ */

.svd-why-grid {
    display: grid;

    grid-template-columns:
        1fr;

    gap: 5px;

    margin-top: 10px;
}


.svd-why-grid > span {
    display: flex;

    min-width: 0;
    min-height: 29px;

    padding:
        5px
        7px;

    align-items: center;

    gap: 6px;

    border-radius: 6px;

    background:
        #fafcfa;

    color:
        var(--svd-muted);

    font-size: 10px;
    font-weight: 800;

    line-height: 1.3;
}


.svd-why-grid > span > i {
    display: grid;

    width: 17px;
    height: 17px;

    flex:
        0
        0
        17px;

    place-items: center;

    border-radius: 50%;

    background:
        var(--svd-success-soft);

    color:
        var(--svd-success);

    font-size: 8px;
    font-style: normal;
    font-weight: 900;
}


/* ============================================================
   REVIEW ACTION
============================================================ */

.svd-review-action {
    display: flex;

    width: 100%;

    padding:
        12px;

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

    gap: 10px;

    border:
        1px solid
        rgba(201, 166, 107, 0.25);

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

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

    box-shadow:
        var(--svd-shadow-soft);
}


.svd-review-action > div {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 8px;
}


.svd-review-action-icon {
    display: grid;

    width: 32px;
    height: 32px;

    flex:
        0
        0
        32px;

    place-items: center;

    border-radius: 50%;

    background:
        #f4ead7;

    color:
        var(--svd-gold-dark);

    font-size: 15px;
}


.svd-review-action > div > div {
    min-width: 0;
}


.svd-review-action small,
.svd-review-action strong,
.svd-review-action p {
    display: block;
}


.svd-review-action small {
    color:
        var(--svd-gold-dark);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.6px;
}


.svd-review-action strong {
    margin-top: 2px;

    color:
        var(--svd-green-dark);

    font-size: 11px;
}


.svd-review-action p {
    margin:
        2px
        0
        0;

    color:
        var(--svd-muted);

    font-size: 9px;

    line-height: 1.3;
}


.svd-review-action > a {
    display: inline-flex;

    min-height: 30px;

    padding:
        0
        9px;

    flex:
        0
        0
        auto;

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

    border-radius: 6px;

    background:
        var(--svd-green);

    color:
        #fff !important;

    font-size: 10px;
    font-weight: 900;
}


.svd-review-action.is-reviewed {
    border-color:
        rgba(43, 138, 89, 0.20);

    background:
        var(--svd-success-soft);
}


/* ============================================================
   REVIEWS SECTION
============================================================ */

.svd-reviews {
    width: 100%;
    min-width: 0;

    padding:
        13px;

    overflow: hidden;

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

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

    background:
        #fff;

    box-shadow:
        var(--svd-shadow-soft);
}


.svd-side-section-title {
    display: flex;

    margin-bottom: 10px;

    align-items: center;

    gap: 8px;
}


.svd-side-section-title > span {
    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 166, 107, 0.42)
        );
}


.svd-side-section-title > span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(201, 166, 107, 0.42),
            transparent
        );
}


.svd-side-section-title h2 {
    margin: 0;

    color:
        var(--svd-green-dark);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    white-space: nowrap;
}


/* ============================================================
   REVIEW SLIDER
============================================================ */

.svd-review-slider {
    position: relative;

    width: 100%;
    min-width: 0;

    padding:
        0
        22px;
}


.svd-review-viewport {
    width: 100%;

    overflow: hidden;
}


.svd-review-track {
    display: flex;

    width: 100%;

    transition:
        transform
        0.35s
        ease;
}


.svd-review-card {
    min-width: 100%;

    padding:
        11px;

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

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fafcfb
        );
}


.svd-review-card-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 8px;
}


.svd-review-stars {
    display: flex;

    gap: 1px;
}


.svd-review-stars span {
    color:
        #d9dedb;

    font-size: 11px;
}


.svd-review-stars span.active {
    color:
        #e0a23c;
}


.svd-review-quote {
    color:
        rgba(201, 166, 107, 0.32);

    font-family:
        Georgia,
        serif;

    font-size: 30px;

    line-height: 0.7;
}


.svd-review-card h3 {
    margin:
        7px
        0
        0;

    color:
        var(--svd-green-dark);

    font-size: 12px;
}


.svd-review-text {
    margin:
        5px
        0
        0;

    color:
        var(--svd-muted);

    font-size: 10px;

    line-height: 1.55;
}


.svd-review-user {
    display: flex;

    margin-top: 9px;

    padding-top: 8px;

    align-items: center;

    gap: 7px;

    border-top:
        1px solid
        var(--svd-border);
}


.svd-review-avatar {
    display: grid;

    width: 29px;
    height: 29px;

    flex:
        0
        0
        29px;

    place-items: center;

    border-radius: 50%;

    background:
        var(--svd-green);

    color:
        #fff;

    font-size: 11px;
    font-weight: 900;
}


.svd-review-user strong,
.svd-review-user small {
    display: block;
}


.svd-review-user strong {
    color:
        var(--svd-green-dark);

    font-size: 11px;
}


.svd-review-user small {
    margin-top: 2px;

    color:
        var(--svd-success);

    font-size: 9px;
    font-weight: 800;
}


/* ============================================================
   REVIEW ARROWS
============================================================ */

.svd-review-arrow {
    position: absolute;

    top: 50%;

    z-index: 3;

    display: grid;

    width: 25px;
    height: 25px;

    padding: 0;

    place-items: center;

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

    border-radius: 50%;

    background:
        #fff;

    color:
        var(--svd-green);

    font-size: 17px;

    cursor: pointer;

    transform:
        translateY(-50%);

    box-shadow:
        0
        4px
        12px
        rgba(30, 67, 56, 0.08);
}


.svd-review-prev {
    left: -3px;
}


.svd-review-next {
    right: -3px;
}


.svd-review-arrow:disabled {
    opacity: 0.3;

    cursor: default;
}


/* ============================================================
   REVIEW DOTS
============================================================ */

.svd-review-dots {
    display: flex;

    min-height: 8px;

    margin-top: 8px;

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

    gap: 4px;
}


.svd-review-dots button {
    width: 5px;
    height: 5px;

    padding: 0;

    border: 0;
    border-radius: 999px;

    background:
        #d6dfdb;

    cursor: pointer;

    transition:
        width 0.2s ease,
        background 0.2s ease;
}


.svd-review-dots button.is-active {
    width: 15px;

    background:
        var(--svd-green);
}


/* ============================================================
   RELATED SPAS
============================================================ */

.svd-related {
    margin-top: 24px;
}


.svd-centered-title {
    display: flex;

    margin-bottom: 14px;

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

    gap: 12px;

    text-align: center;
}


.svd-centered-title > span {
    width: 55px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 166, 107, 0.55)
        );
}


.svd-centered-title > span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(201, 166, 107, 0.55),
            transparent
        );
}


.svd-centered-title small {
    display: block;

    color:
        var(--svd-gold-dark);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}


.svd-centered-title h2 {
    margin:
        3px
        0
        0;

    color:
        var(--svd-green-dark);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    line-height: 1;
}


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

.svd-related-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}


.svd-related-card {
    display: block;

    min-width: 0;

    overflow: hidden;

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

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

    background:
        #fff;

    box-shadow:
        var(--svd-shadow-soft);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}


.svd-related-card:hover {
    border-color:
        rgba(201, 166, 107, 0.34);

    transform:
        translateY(-3px);

    box-shadow:
        var(--svd-shadow);
}


.svd-related-image {
    position: relative;

    height: 155px;

    overflow: hidden;

    background:
        #e8eeeb;
}


.svd-related-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.3s
        ease;
}


.svd-related-card:hover
.svd-related-image img {
    transform:
        scale(1.035);
}


.svd-related-image > span {
    position: absolute;

    top: 9px;
    right: 9px;

    display: grid;

    width: 27px;
    height: 27px;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.92);

    color:
        var(--svd-green);

    font-size: 13px;

    box-shadow:
        0
        5px
        13px
        rgba(0, 0, 0, 0.09);
}


.svd-related-copy {
    padding:
        10px
        11px;
}


.svd-related-copy h3 {
    margin: 0;

    overflow: hidden;

    color:
        var(--svd-green-dark);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    line-height: 1.05;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.svd-related-copy > p {
    margin:
        4px
        0
        0;

    overflow: hidden;

    color:
        var(--svd-muted);

    font-size: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.svd-related-copy > div {
    display: flex;

    margin-top: 8px;

    padding-top: 7px;

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

    gap: 8px;

    border-top:
        1px solid
        var(--svd-border);
}


.svd-related-copy > div > span {
    color:
        #d99b35;

    font-size: 10px;
    font-weight: 900;
}


.svd-related-copy > div > strong {
    color:
        var(--svd-green);

    font-size: 10px;
    font-weight: 900;
}


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

.svd-gallery-modal {
    position: fixed;

    inset: 0;

    z-index: 99990;

    display: flex;

    visibility: hidden;

    padding:
        18px;

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

    flex-direction: column;

    background:
        rgba(10, 25, 20, 0.94);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.svd-gallery-modal.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


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

.svd-gallery-modal-header {
    display: flex;

    width: 100%;
    max-width: 1080px;

    min-height: 46px;

    margin-bottom: 8px;

    padding:
        0
        4px;

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

    gap: 15px;
}


.svd-gallery-modal-header small,
.svd-gallery-modal-header strong {
    display: block;
}


.svd-gallery-modal-header small {
    color:
        var(--svd-gold-light);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}


.svd-gallery-modal-header strong {
    margin-top: 2px;

    color:
        #fff;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 22px;
}


#galleryClose {
    display: grid;

    width: 36px;
    height: 36px;

    padding: 0;

    place-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    color:
        #fff;

    font-size: 22px;

    cursor: pointer;
}


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

.svd-gallery-stage {
    display: grid;

    width: 100%;
    max-width: 1080px;

    min-height: 0;

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

    align-items: center;

    gap: 9px;
}


.svd-gallery-stage > div {
    position: relative;

    display: flex;

    width: 100%;
    height: min(68vh, 650px);

    overflow: hidden;

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

    border-radius: 13px;

    background:
        #08130f;
}


#galleryModalImage {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


#galleryCount {
    position: absolute;

    right: 10px;
    bottom: 10px;

    display: inline-flex;

    min-height: 27px;

    padding:
        0
        9px;

    align-items: center;

    border-radius: 999px;

    background:
        rgba(0, 0, 0, 0.56);

    color:
        #fff;

    font-size: 10px;
    font-weight: 900;
}


.svd-gallery-arrow {
    display: grid;

    width: 38px;
    height: 38px;

    padding: 0;

    place-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    color:
        #fff;

    font-size: 23px;

    cursor: pointer;
}


.svd-gallery-arrow:hover {
    background:
        rgba(255, 255, 255, 0.15);
}


/* ============================================================
   GALLERY MODAL THUMBS
============================================================ */

.svd-gallery-modal-thumbs {
    display: flex;

    width: 100%;
    max-width: 1080px;

    margin-top: 8px;

    padding:
        2px;

    overflow-x: auto;

    gap: 5px;

    scrollbar-width: none;
    -ms-overflow-style: none;
}


.svd-gallery-modal-thumbs::-webkit-scrollbar {
    display: none;
}


.gallery-thumb {
    width: 62px;
    height: 45px;

    flex:
        0
        0
        62px;

    overflow: hidden;

    padding: 0;

    border:
        2px solid
        transparent;

    border-radius: 6px;

    background:
        transparent;

    opacity: 0.55;

    cursor: pointer;
}


.gallery-thumb.active {
    border-color:
        var(--svd-gold);

    opacity: 1;
}


.gallery-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ============================================================
   BOOKING SUCCESS OVERLAY
============================================================ */

.svd-success-overlay {
    position: fixed;

    inset: 0;

    z-index: 99996;

    visibility: hidden;

    background:
        rgba(13, 35, 28, 0.72);

    opacity: 0;

    pointer-events: none;

    backdrop-filter:
        blur(6px);

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.svd-success-overlay.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* ============================================================
   BOOKING CONFIRMED POPUP
============================================================ */

.svd-success-popup {
    position: fixed;

    top: 50%;
    left: 50%;

    z-index: 99997;

    width:
        min(
            calc(100% - 30px),
            570px
        );

    max-height:
        calc(100vh - 30px);

    overflow-y: auto;
    overflow-x: hidden;

    visibility: hidden;

    padding:
        22px
        24px
        18px;

    border:
        1px solid
        rgba(201, 166, 107, 0.28);

    border-radius:
        19px;

    background:
        linear-gradient(
            160deg,
            #ffffff 0%,
            #fffdf9 56%,
            #f5faf7 100%
        );

    box-shadow:
        0
        35px
        100px
        rgba(8, 31, 23, 0.30);

    opacity: 0;

    pointer-events: none;

    scrollbar-width: none;
    -ms-overflow-style: none;

    transform:
        translate(-50%, -47%)
        scale(0.96);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s ease;
}


.svd-success-popup::-webkit-scrollbar {
    display: none;

    width: 0;
    height: 0;
}


.svd-success-popup.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* ============================================================
   SUCCESS CLOSE
============================================================ */

.svd-success-close {
    position: absolute;

    top: 11px;
    right: 11px;

    z-index: 4;

    display: grid;

    width: 29px;
    height: 29px;

    padding: 0;

    place-items: center;

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

    border-radius: 50%;

    background:
        #fff;

    color:
        var(--svd-muted);

    font-size: 18px;

    cursor: pointer;
}


/* ============================================================
   CELEBRATION
============================================================ */

.svd-success-celebration {
    position: absolute;

    top: 12px;
    left: 50%;

    width: 210px;
    height: 65px;

    pointer-events: none;

    transform:
        translateX(-50%);
}


.svd-success-celebration span {
    position: absolute;

    color:
        var(--svd-gold);

    font-size: 12px;
}


.svd-success-celebration span:nth-child(1) {
    top: 9px;
    left: 6px;
}


.svd-success-celebration span:nth-child(2) {
    top: 31px;
    left: 31px;

    font-size: 9px;
}


.svd-success-celebration span:nth-child(3) {
    top: 0;
    left: 50%;

    font-size: 10px;
}


.svd-success-celebration span:nth-child(4) {
    top: 30px;
    right: 30px;

    font-size: 9px;
}


.svd-success-celebration span:nth-child(5) {
    top: 9px;
    right: 6px;
}


/* ============================================================
   SUCCESS CHECK
============================================================ */

.svd-success-check {
    display: grid;

    width: 55px;
    height: 55px;

    margin:
        0
        auto
        8px;

    place-items: center;

    border:
        5px solid
        #e1f1e8;

    border-radius: 50%;

    background:
        var(--svd-success);

    color:
        #fff;

    font-family:
        Arial,
        sans-serif;

    font-size: 21px;
    font-weight: 900;

    box-shadow:
        0
        8px
        22px
        rgba(43, 138, 89, 0.18);
}


.svd-success-eyebrow {
    display: block;

    color:
        var(--svd-success);

    text-align: center;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.3px;
}


.svd-success-popup > h2 {
    margin:
        4px
        0
        0;

    color:
        var(--svd-green-dark);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    line-height: 1;

    text-align: center;
}


.svd-success-intro {
    max-width: 390px;

    margin:
        6px
        auto
        0;

    color:
        var(--svd-muted);

    text-align: center;

    font-size: 11px;

    line-height: 1.5;
}


/* ============================================================
   BOOKING NUMBER
============================================================ */

.svd-success-number {
    display: flex;

    width: fit-content;

    min-width: 145px;

    margin:
        10px
        auto
        0;

    padding:
        7px
        13px;

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

    flex-direction: column;

    border:
        1px dashed
        rgba(201, 166, 107, 0.46);

    border-radius: 7px;

    background:
        #fffaf0;
}


.svd-success-number small {
    color:
        var(--svd-gold-dark);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.7px;
}


.svd-success-number strong {
    margin-top: 2px;

    color:
        var(--svd-green-dark);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.4px;
}


/* ============================================================
   SUCCESS DETAILS
============================================================ */

.svd-success-details {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 6px;

    margin-top: 11px;
}


.svd-success-details article {
    display: flex;

    min-width: 0;
    min-height: 52px;

    padding:
        7px;

    align-items: center;

    gap: 6px;

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

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.84);
}


.svd-success-details article > span {
    display: grid;

    width: 26px;
    height: 26px;

    flex:
        0
        0
        26px;

    place-items: center;

    border-radius: 6px;

    background:
        #edf5f1;

    color:
        var(--svd-green);

    font-size: 11px;
}


.svd-success-details article > div {
    min-width: 0;
}


.svd-success-details small,
.svd-success-details strong {
    display: block;
}


.svd-success-details small {
    color:
        var(--svd-muted);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.4px;
}


.svd-success-details strong {
    margin-top: 2px;

    overflow: hidden;

    color:
        var(--svd-green-dark);

    font-size: 10px;
    font-weight: 900;

    line-height: 1.25;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ============================================================
   SUCCESS PAYMENT
============================================================ */

.svd-success-payment {
    display: flex;

    margin-top: 8px;

    padding:
        9px
        11px;

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

    gap: 10px;

    border:
        1px solid
        rgba(43, 138, 89, 0.18);

    border-radius: 8px;

    background:
        var(--svd-success-soft);
}


.svd-success-payment small,
.svd-success-payment strong,
.svd-success-payment span {
    display: block;
}


.svd-success-payment small {
    color:
        var(--svd-success);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.5px;
}


.svd-success-payment strong {
    margin-top: 2px;

    color:
        var(--svd-green-dark);

    font-size: 11px;
}


.svd-success-payment span {
    margin-top: 1px;

    color:
        var(--svd-muted);

    font-size: 8px;
}


.svd-success-payment > b {
    color:
        var(--svd-green);

    font-size: 19px;
    font-weight: 900;

    white-space: nowrap;
}


/* ============================================================
   SUCCESS EMAIL NOTE
============================================================ */

.svd-success-email-note {
    display: flex;

    margin-top: 7px;

    padding:
        8px
        10px;

    align-items: center;

    gap: 8px;

    border:
        1px solid
        rgba(201, 166, 107, 0.18);

    border-radius: 8px;

    background:
        #fffaf1;
}


.svd-success-email-note > span {
    display: grid;

    width: 27px;
    height: 27px;

    flex:
        0
        0
        27px;

    place-items: center;

    border-radius: 50%;

    background:
        #f4ead7;

    color:
        var(--svd-gold-dark);

    font-size: 11px;
}


.svd-success-email-note strong {
    display: block;

    color:
        var(--svd-green-dark);

    font-size: 10px;
}


.svd-success-email-note p {
    margin:
        2px
        0
        0;

    color:
        var(--svd-muted);

    font-size: 9px;

    line-height: 1.35;
}


.svd-success-email-note b {
    color:
        var(--svd-green-dark);

    font-weight: 900;
}


/* ============================================================
   THANK YOU
============================================================ */

.svd-success-thanks {
    display: flex;

    margin-top: 7px;

    padding:
        6px
        9px;

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

    gap: 5px;

    color:
        var(--svd-muted);

    text-align: center;
}


.svd-success-thanks > span {
    color:
        var(--svd-gold-dark);

    font-size: 11px;
}


.svd-success-thanks p {
    margin: 0;

    font-size: 9px;

    line-height: 1.4;
}


.svd-success-thanks strong {
    color:
        var(--svd-green-dark);
}


/* ============================================================
   SUCCESS ACTIONS
============================================================ */

.svd-success-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

    margin-top: 9px;
}


.svd-success-primary,
.svd-success-secondary {
    display: inline-flex;

    width: 100%;
    min-height: 37px;

    padding:
        0
        10px;

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

    border-radius: 7px;

    font-size: 11px;
    font-weight: 900;

    cursor: pointer;
}


.svd-success-primary {
    border: 0;

    background:
        var(--svd-green);

    color:
        #fff !important;
}


.svd-success-primary:hover {
    background:
        var(--svd-green-dark);
}


.svd-success-secondary {
    border:
        1px solid
        var(--svd-border-strong);

    background:
        #fff;

    color:
        var(--svd-green);
}


/* ============================================================
   FAVORITE LOGIN OVERLAY
============================================================ */

.favorite-login-overlay {
    position: fixed;

    inset: 0;

    z-index: 99992;

    visibility: hidden;

    background:
        rgba(14, 38, 30, 0.66);

    opacity: 0;

    pointer-events: none;

    backdrop-filter:
        blur(5px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


.favorite-login-overlay.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* ============================================================
   FAVORITE LOGIN POPUP
============================================================ */

.favorite-login-popup {
    position: fixed;

    top: 50%;
    left: 50%;

    z-index: 99993;

    width:
        min(
            calc(100% - 30px),
            340px
        );

    visibility: hidden;

    padding:
        23px
        20px
        19px;

    border:
        1px solid
        rgba(201, 166, 107, 0.26);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf1
        );

    text-align: center;

    box-shadow:
        0
        25px
        70px
        rgba(17, 49, 38, 0.25);

    opacity: 0;

    pointer-events: none;

    transform:
        translate(-50%, -46%)
        scale(0.96);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


.favorite-login-popup.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        scale(1);
}


.favorite-login-close {
    position: absolute;

    top: 9px;
    right: 9px;

    display: grid;

    width: 27px;
    height: 27px;

    padding: 0;

    place-items: center;

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

    border-radius: 50%;

    background:
        #fff;

    color:
        var(--svd-muted);

    font-size: 17px;

    cursor: pointer;
}


.favorite-login-icon {
    display: grid;

    width: 48px;
    height: 48px;

    margin:
        0
        auto
        9px;

    place-items: center;

    border-radius: 50%;

    background:
        #f5ecdd;

    color:
        var(--svd-gold-dark);

    font-size: 21px;
}


.favorite-login-popup h3 {
    margin: 0;

    color:
        var(--svd-green-dark);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 27px;
}


.favorite-login-popup p {
    margin:
        6px
        0
        13px;

    color:
        var(--svd-muted);

    font-size: 11px;

    line-height: 1.5;
}


.favorite-login-popup > a {
    display: flex;

    min-height: 39px;

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

    border-radius: 7px;

    background:
        var(--svd-green);

    color:
        #fff !important;

    font-size: 11px;
    font-weight: 900;
}


/* ============================================================
   MOBILE BOOKING BAR
============================================================ */

.svd-mobile-booking-bar {
    display: none;
}


/* ============================================================
   FINAL GLOBAL OVERFLOW PROTECTION
============================================================ */

.svd-page,
.svd-shell,
.svd-hero,
.svd-workspace-grid,
.svd-workspace-left,
.svd-workspace-right,
.svd-booking,
.svd-booking-form,
.svd-step-stage,
.svd-left-services,
.svd-services-card,
.svd-side-card,
.svd-reviews {
    min-width: 0;
}


.svd-page {
    max-width: 100vw;
}


.svd-booking *,
.svd-services-card *,
.svd-side-card * {
    max-width: 100%;
}


/* ============================================================
   LIVE CHAT DESKTOP
============================================================ */

@media (min-width: 769px) {

    .svd-page ~ .live-chat,
    .svd-page ~ .live-chat-widget,
    .svd-page ~ .chat-widget,
    .svd-page ~ #liveChat,
    .svd-page ~ #liveChatWidget,
    body:has(.svd-page) .live-chat,
    body:has(.svd-page) .live-chat-widget,
    body:has(.svd-page) .chat-widget,
    body:has(.svd-page) #liveChat,
    body:has(.svd-page) #liveChatWidget {
        display: initial;
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1180px) {

    .svd-shell {
        width: 94%;
    }


    .svd-hero {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(350px, 0.95fr);
    }


    .svd-workspace-grid {
        grid-template-columns:
            minmax(0, 64fr)
            minmax(285px, 36fr);

        gap: 15px;
    }


    .svd-step-one-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 0.8fr);
    }


    .svd-step-two-layout {
        grid-template-columns:
            1fr
            1fr;
    }


    .svd-step-two-layout
    .svd-room-area {
        grid-column:
            1 / -1;
    }


    .svd-date-time-layout {
        grid-template-columns:
            minmax(165px, 0.62fr)
            minmax(0, 1.38fr);
    }


    .svd-time-slots {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


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

@media (max-width: 992px) {

    .svd-page {
        padding-top: 15px;
    }


    .svd-shell {
        width:
            calc(100% - 28px);
    }


    .svd-hero {
        grid-template-columns:
            1fr;

        gap: 13px;
    }


    .svd-gallery-main {
        height: 400px;
    }


    .svd-hero-info {
        padding:
            8px
            8px
            12px;
    }


    .svd-eyebrow {
        font-size: 11px;
    }


    .svd-spa-title {
        font-size:
            clamp(
                36px,
                6vw,
                48px
            );
    }


    .svd-location {
        font-size: 13px;
    }


    .svd-rating strong {
        font-size: 12px;
    }


    .svd-rating > span {
        font-size: 11px;
    }


    .svd-quick-stats strong {
        font-size: 12px;
    }


    .svd-quick-stats small {
        font-size: 10px;
    }


    .svd-hero-description {
        font-size: 13px;
    }


    .svd-primary-action,
    .svd-secondary-action {
        font-size: 12px;
    }


    .svd-workspace-grid {
        grid-template-columns:
            1fr;

        gap: 14px;
    }


    .svd-workspace-left,
    .svd-workspace-right {
        width: 100%;
    }


    .svd-workspace-right {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .svd-reviews,
    .svd-review-action {
        grid-column:
            1 / -1;
    }


    .svd-step-one-layout {
        grid-template-columns:
            1fr
            1fr;
    }


    .svd-step-two-layout {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .svd-date-time-layout {
        grid-template-columns:
            minmax(190px, 0.7fr)
            minmax(0, 1.3fr);
    }


    .svd-review-layout {
        grid-template-columns:
            1fr
            minmax(220px, 0.7fr);
    }


    .svd-booking-heading > span {
        font-size: 10px;
    }


    .svd-booking-heading h2 {
        font-size: 29px;
    }


    .svd-booking-heading p {
        font-size: 12px;
    }


    .svd-stepper-item strong {
        font-size: 11px;
    }


    .svd-stepper-item small {
        font-size: 9px;
    }


    .svd-panel-head > div > span {
        font-size: 9px;
    }


    .svd-panel-head h3 {
        font-size: 25px;
    }


    .svd-panel-head p {
        font-size: 11px;
    }


    .svd-field label,
    .svd-duration-section > label {
        font-size: 11px;
    }


    .svd-field select,
    .svd-field input[type="date"] {
        font-size: 12px;
    }


    .svd-service-preview strong {
        font-size: 12px;
    }


    .svd-service-preview small {
        font-size: 10px;
    }


    .svd-services-list {
        max-height: 400px;
    }


    .svd-services-title small {
        font-size: 9px;
    }


    .svd-services-title h2 {
        font-size: 26px;
    }


    .svd-services-title p {
        font-size: 11px;
    }


    .svd-service-copy h3 {
        font-size: 13px;
    }


    .svd-service-copy p {
        font-size: 10px;
    }


    .svd-service-duration,
    .svd-service-price strong {
        font-size: 11px;
    }


    .svd-side-card-head small {
        font-size: 9px;
    }


    .svd-side-card-head h2 {
        font-size: 21px;
    }


    .svd-about-text {
        font-size: 11px;
    }


    .svd-amenities strong,
    .svd-why-grid > span {
        font-size: 10px;
    }


    .svd-related-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 768px) {

    body:has(.svd-page) {
        padding-bottom: 72px;
    }


    .svd-page {
        padding:
            10px
            0
            30px;
    }


    .svd-shell {
        width:
            calc(100% - 20px);
    }


    /* ========================================================
       LIVE CHAT MOBILE HIDE
    ======================================================== */

    body:has(.svd-page) .live-chat,
    body:has(.svd-page) .live-chat-widget,
    body:has(.svd-page) .chat-widget,
    body:has(.svd-page) .chatbot-widget,
    body:has(.svd-page) .chatbot-button,
    body:has(.svd-page) .floating-chat,
    body:has(.svd-page) .floating-chat-button,
    body:has(.svd-page) #liveChat,
    body:has(.svd-page) #liveChatWidget,
    body:has(.svd-page) #chatWidget,
    body:has(.svd-page) #chatbotWidget,
    body:has(.svd-page) [data-live-chat] {
        display:
            none !important;
    }


    /* ========================================================
       BREADCRUMB
    ======================================================== */

    .svd-breadcrumb {
        margin-bottom: 9px;

        font-size: 11px;
    }


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

    .svd-hero {
        padding: 8px;

        gap: 10px;

        border-radius: 15px;
    }


    .svd-gallery-main {
        height: 285px;

        border-radius: 11px;
    }


    .svd-open-status {
        top: 9px;
        left: 9px;

        padding:
            7px
            9px;
    }


    .svd-open-status strong {
        font-size: 11px;
    }


    .svd-open-status small {
        font-size: 9px;
    }


    .svd-gallery-count {
        right: 8px;
        bottom: 8px;

        font-size: 10px;
    }


    .svd-gallery-thumbs {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 4px;

        margin-top: 4px;
    }


    .svd-gallery-thumb {
        height: 54px;

        border-radius: 6px;
    }


    .svd-hero-info {
        padding:
            9px
            6px
            8px;
    }


    .svd-title-row {
        gap: 8px;
    }


    .svd-eyebrow {
        margin-bottom: 4px;

        font-size: 9px;
    }


    .svd-spa-title {
        font-size: 34px;

        line-height: 0.98;
    }


    .svd-spa-name-last {
        gap: 4px;
    }


    .svd-verified-badge {
        width: 16px;
        height: 16px;

        flex-basis: 16px;

        font-size: 8px;

        transform:
            translateY(0);
    }


    .svd-favorite-btn {
        min-height: 32px;

        padding:
            0
            9px;
    }


    .svd-favorite-btn span {
        display: none;
    }


    .svd-location {
        margin-top: 8px;

        font-size: 11px;
    }


    .svd-rating {
        margin-top: 7px;
    }


    .svd-stars {
        font-size: 11px;
    }


    .svd-rating strong {
        font-size: 11px;
    }


    .svd-rating > span {
        font-size: 10px;
    }


    .svd-quick-stats {
        gap: 5px;

        margin-top: 10px;
    }


    .svd-quick-stats article {
        padding: 7px;
    }


    .svd-quick-stats strong {
        font-size: 10px;
    }


    .svd-quick-stats small {
        font-size: 9px;
    }


    .svd-hero-description {
        margin-top: 10px;

        font-size: 11px;
    }


    .svd-hero-actions {
        margin-top: 10px;
    }


    .svd-primary-action,
    .svd-secondary-action {
        min-height: 37px;

        font-size: 11px;
    }


    /* ========================================================
       WORKSPACE
    ======================================================== */

    .svd-workspace-grid {
        margin-top: 12px;

        gap: 11px;
    }


    .svd-workspace-left {
        gap: 11px;
    }


    .svd-workspace-right {
        grid-template-columns:
            1fr;

        gap: 9px;
    }


    /* ========================================================
       BOOKING
    ======================================================== */

    .svd-booking {
        border-radius: 12px;
    }


    .svd-booking-heading {
        padding:
            13px
            12px
            9px;
    }


    .svd-booking-heading > span {
        font-size: 9px;
    }


    .svd-booking-heading h2 {
        font-size: 25px;
    }


    .svd-booking-heading p {
        font-size: 10px;
    }


    .svd-booking-stepper {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 3px;

        padding:
            8px
            7px;
    }


    .svd-booking-stepper > i {
        display: none;
    }


    .svd-stepper-item {
        justify-content: center;

        gap: 4px;
    }


    .svd-stepper-item > span {
        width: 23px;
        height: 23px;

        flex-basis: 23px;

        font-size: 9px;
    }


    .svd-stepper-item strong {
        font-size: 9px;
    }


    .svd-stepper-item small {
        display: none;
    }


    .svd-booking-panel {
        padding:
            12px
            11px
            10px;
    }


    .svd-panel-head {
        padding-bottom: 8px;
    }


    .svd-panel-head > div > span {
        font-size: 8px;
    }


    .svd-panel-head h3 {
        font-size: 22px;
    }


    .svd-panel-head p {
        font-size: 10px;
    }


    .svd-panel-head > strong {
        font-size: 31px;
    }


    .svd-field label,
    .svd-duration-section > label {
        font-size: 10px;
    }


    .svd-field select,
    .svd-field input[type="date"] {
        font-size: 11px;
    }


    /* STEP 1 */

    .svd-step-one-layout {
        grid-template-columns:
            1fr;

        gap: 10px;

        padding-top: 10px;
    }


    .svd-service-preview strong {
        font-size: 11px;
    }


    .svd-service-preview small {
        font-size: 9px;
    }


    .svd-duration-options {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .svd-duration-option > span {
        min-height: 73px;

        padding:
            9px;
    }


    .svd-duration-option strong {
        font-size: 14px;
    }


    .svd-duration-option small {
        font-size: 11px;
    }


    .svd-duration-option em {
        font-size: 9px;
    }


    .svd-duration-help p {
        font-size: 9px;
    }


    .svd-field-message {
        font-size: 9px;
    }


    .svd-back-button,
    .svd-next-button {
        font-size: 10px;
    }


    /* STEP 2 */

    .svd-step-two-layout {
        grid-template-columns:
            1fr;

        gap: 8px;

        padding-top: 10px;
    }


    .svd-step-two-layout
    .svd-room-area {
        grid-column: auto;
    }


    .svd-customer-card span {
        font-size: 8px;
    }


    .svd-customer-card strong {
        font-size: 11px;
    }


    .svd-customer-card small {
        font-size: 9px;
    }


    .svd-readonly-field strong {
        font-size: 10px;
    }


    .svd-room-note strong {
        font-size: 10px;
    }


    .svd-room-note small {
        font-size: 9px;
    }


    /* STEP 3 */

    .svd-date-time-layout {
        grid-template-columns:
            1fr;

        gap: 10px;

        padding-top: 10px;
    }


    .svd-selected-date-card small {
        font-size: 8px;
    }


    .svd-selected-date-card strong {
        font-size: 10px;
    }


    .svd-period-label {
        font-size: 10px;
    }


    .svd-period-tabs {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 4px;
    }


    .svd-period-tabs button {
        min-height: 47px;

        padding:
            5px
            2px;
    }


    .svd-period-tabs button > span {
        font-size: 10px;
    }


    .svd-period-tabs button strong {
        font-size: 9px;
    }


    .svd-period-tabs button small {
        font-size: 7px;
    }


    .svd-slot-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }


    .svd-slot-head > strong {
        font-size: 10px;
    }


    .svd-slot-legend span {
        font-size: 8px;
    }


    /* ========================================================
       MOBILE TIME SLOTS
    ======================================================== */

    .svd-time-slots {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 4px;

        max-height: 142px;
    }


    .svd-time-slots button,
    .svd-time-slot {
        min-height: 29px;
        height: 29px;

        padding:
            0
            3px;

        border-radius: 5px;

        font-size: 9px;
    }


    .svd-empty-slots {
        font-size: 10px;
    }


    /* STEP 4 */

    .svd-review-layout {
        grid-template-columns:
            1fr;

        gap: 9px;

        padding-top: 10px;
    }


    .svd-review-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .svd-review-list small {
        font-size: 8px;
    }


    .svd-review-list strong {
        font-size: 10px;
    }


    .svd-payment-summary > span {
        font-size: 8px;
    }


    .svd-total > span {
        font-size: 9px;
    }


    .svd-total > strong {
        font-size: 19px;
    }


    .svd-wallet-note p {
        font-size: 9px;
    }


    .svd-confirm-button {
        font-size: 10px;
    }


    .svd-booking-policy {
        font-size: 9px;
    }


    .svd-step-actions {
        margin-top: 9px;
    }


    /* ========================================================
       GUEST BOOKING
    ======================================================== */

    .svd-guest-booking {
        padding:
            15px
            13px
            12px;

        border-radius: 12px;
    }


    .svd-guest-booking-top {
        align-items: flex-start;

        gap: 9px;
    }


    .svd-guest-brand-mark {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        border-radius: 10px;

        font-size: 18px;
    }


    .svd-guest-heading > span {
        font-size: 8px;
    }


    .svd-guest-heading h2 {
        font-size: 25px;
    }


    .svd-guest-heading p {
        font-size: 10px;
    }


    .svd-guest-booking-flow {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px;

        margin-top: 11px;
    }


    .svd-guest-booking-flow > i {
        display: none;
    }


    .svd-guest-booking-flow article {
        min-height: 55px;
    }


    .svd-guest-flow-number {
        font-size: 8px;
    }


    .svd-guest-booking-flow strong {
        font-size: 9px;
    }


    .svd-guest-booking-flow small {
        font-size: 8px;
    }


    .svd-guest-bottom {
        grid-template-columns:
            1fr;

        gap: 7px;

        margin-top: 8px;
    }


    .svd-guest-benefits > span {
        font-size: 9px;
    }


    .svd-guest-login-button {
        min-height: 47px;
    }


    .svd-guest-login-button small {
        font-size: 8px;
    }


    .svd-guest-login-button strong {
        font-size: 10px;
    }


    .svd-guest-security p {
        font-size: 9px;
    }


    /* ========================================================
       OUR SERVICES MOBILE
    ======================================================== */

    .svd-services-card {
        border-radius: 12px;
    }


    .svd-services-head {
        min-height: 64px;

        padding:
            11px
            12px;
    }


    .svd-services-title {
        gap: 8px;
    }


    .svd-services-title-icon {
        width: 32px;
        height: 32px;

        flex-basis: 32px;

        font-size: 13px;
    }


    .svd-services-title small {
        font-size: 8px;
    }


    .svd-services-title h2 {
        font-size: 21px;
    }


    .svd-services-title p {
        font-size: 9px;
    }


    .svd-services-head-actions > span {
        min-height: 25px;

        padding:
            0
            7px;

        font-size: 9px;
    }


    .svd-services-table-head {
        grid-template-columns:
            minmax(0, 1.65fr)
            0.68fr
            0.54fr
            0.54fr;

        gap: 3px;

        min-height: 27px;

        padding:
            0
            8px;
    }


    .svd-services-table-head span {
        font-size: 8px;
    }


    .svd-services-list {
        max-height: 350px;
    }


    .svd-service-row {
        grid-template-columns:
            minmax(0, 1.65fr)
            0.68fr
            0.54fr
            0.54fr;

        gap: 3px;

        min-height: 52px;

        padding:
            7px
            8px;
    }


    .svd-service-main {
        gap: 5px;
    }


    .svd-service-icon {
        width: 27px;
        height: 27px;

        flex-basis: 27px;

        border-radius: 6px;

        font-size: 11px;
    }


    .svd-service-copy h3 {
        font-size: 10px;

        white-space: nowrap;
    }


    .svd-service-copy p {
        margin-top: 2px;

        font-size: 8px;

        white-space: nowrap;

        -webkit-line-clamp: 1;
    }


    .svd-service-duration {
        overflow: hidden;

        font-size: 9px;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    .svd-service-price strong {
        font-size: 9px;
    }


    .svd-service-price span {
        font-size: 9px;
    }


    .svd-services-footer {
        min-height: 28px;

        padding:
            5px
            9px;

        font-size: 8px;
    }


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

    .svd-side-card {
        height: auto;
        min-height: 0;

        padding: 12px;

        overflow: visible;
    }


    .svd-side-card-head {
        padding-bottom: 8px;
    }


    .svd-side-card-head small {
        font-size: 8px;
    }


    .svd-side-card-head h2 {
        font-size: 19px;
    }


    .svd-about-text {
        font-size: 10px;

        line-height: 1.5;
    }


    .svd-about-stats {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 4px;
    }


    .svd-about-stats > div {
        min-height: 61px;
    }


    .svd-about-stats strong {
        font-size: 12px;
    }


    .svd-about-stats small {
        font-size: 8px;
    }


    .svd-amenities {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .svd-amenities > div {
        min-height: 34px;
    }


    .svd-amenities strong {
        font-size: 9px;
    }


    .svd-why-grid > span {
        min-height: 28px;

        font-size: 9px;
    }


    .svd-review-action small {
        font-size: 8px;
    }


    .svd-review-action strong {
        font-size: 10px;
    }


    .svd-review-action p {
        font-size: 8px;
    }


    .svd-review-action > a {
        font-size: 9px;
    }


    .svd-side-section-title h2 {
        font-size: 19px;
    }


    .svd-review-stars span {
        font-size: 10px;
    }


    .svd-review-card h3 {
        font-size: 11px;
    }


    .svd-review-text {
        font-size: 9px;
    }


    .svd-review-user strong {
        font-size: 10px;
    }


    .svd-review-user small {
        font-size: 8px;
    }


    /* ========================================================
       RELATED
    ======================================================== */

    .svd-related {
        margin-top: 17px;
    }


    .svd-centered-title small {
        font-size: 8px;
    }


    .svd-centered-title h2 {
        font-size: 25px;
    }


    .svd-related-grid {
        grid-template-columns:
            1fr;

        gap: 9px;
    }


    .svd-related-image {
        height: 190px;
    }


    .svd-related-copy h3 {
        font-size: 19px;
    }


    .svd-related-copy > p {
        font-size: 9px;
    }


    .svd-related-copy > div > span,
    .svd-related-copy > div > strong {
        font-size: 9px;
    }


    /* ========================================================
       MOBILE STICKY BOOK NOW
    ======================================================== */

    .svd-mobile-booking-bar {
        position: fixed;

        right: 8px;
        bottom: 8px;
        left: 8px;

        z-index: 99980;

        display: flex;

        min-height: 57px;

        padding:
            7px
            7px
            7px
            12px;

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

        gap: 10px;

        border:
            1px solid
            rgba(255, 255, 255, 0.12);

        border-radius: 12px;

        background:
            rgba(29, 67, 55, 0.97);

        box-shadow:
            0
            14px
            35px
            rgba(17, 47, 37, 0.28);

        backdrop-filter:
            blur(12px);
    }


    .svd-mobile-booking-bar small,
    .svd-mobile-booking-bar strong {
        display: block;
    }


    .svd-mobile-booking-bar small {
        color:
            rgba(255, 255, 255, 0.65);

        font-size: 9px;
        font-weight: 800;
    }


    .svd-mobile-booking-bar strong {
        margin-top: 1px;

        color:
            #fff;

        font-size: 15px;
        font-weight: 900;
    }


    .svd-mobile-booking-bar button {
        display: inline-flex;

        min-width: 130px;
        min-height: 43px;

        padding:
            0
            15px;

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

        border: 0;
        border-radius: 8px;

        background:
            var(--svd-gold);

        color:
            var(--svd-green-deep);

        font-size: 11px;
        font-weight: 900;

        cursor: pointer;
    }


    /* ========================================================
       GALLERY MODAL MOBILE
    ======================================================== */

    .svd-gallery-modal {
        padding:
            10px;
    }


    .svd-gallery-modal-header small {
        font-size: 8px;
    }


    .svd-gallery-modal-header strong {
        font-size: 19px;
    }


    .svd-gallery-stage {
        grid-template-columns:
            31px
            minmax(0, 1fr)
            31px;

        gap: 4px;
    }


    .svd-gallery-stage > div {
        height:
            min(
                62vh,
                520px
            );

        border-radius: 9px;
    }


    .svd-gallery-arrow {
        width: 29px;
        height: 29px;

        font-size: 18px;
    }


    .gallery-thumb {
        width: 52px;
        height: 39px;

        flex-basis: 52px;
    }


    /* ========================================================
       SUCCESS POPUP MOBILE
    ======================================================== */

    .svd-success-popup {
        width:
            calc(100% - 18px);

        max-height:
            calc(100dvh - 18px);

        padding:
            18px
            13px
            13px;

        border-radius: 14px;
    }


    .svd-success-check {
        width: 48px;
        height: 48px;

        margin-bottom: 6px;

        border-width: 4px;

        font-size: 18px;
    }


    .svd-success-eyebrow {
        font-size: 8px;
    }


    .svd-success-popup > h2 {
        font-size: 26px;
    }


    .svd-success-intro {
        font-size: 10px;
    }


    .svd-success-number small {
        font-size: 8px;
    }


    .svd-success-number strong {
        font-size: 11px;
    }


    .svd-success-details {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 5px;
    }


    .svd-success-details article {
        min-height: 48px;
    }


    .svd-success-details small {
        font-size: 8px;
    }


    .svd-success-details strong {
        font-size: 9px;
    }


    .svd-success-payment small {
        font-size: 8px;
    }


    .svd-success-payment strong {
        font-size: 10px;
    }


    .svd-success-payment span {
        font-size: 8px;
    }


    .svd-success-email-note strong {
        font-size: 10px;
    }


    .svd-success-email-note p {
        font-size: 9px;
    }


    .svd-success-thanks p {
        font-size: 9px;
    }


    .svd-success-actions {
        grid-template-columns:
            1fr;
    }


    .svd-success-primary,
    .svd-success-secondary {
        min-height: 38px;

        font-size: 10px;
    }

}


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

@media (max-width: 480px) {

    .svd-shell {
        width:
            calc(100% - 14px);
    }


    .svd-gallery-main {
        height: 245px;
    }


    .svd-gallery-thumbs {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .svd-gallery-thumb:nth-child(n + 5) {
        display: none;
    }


    .svd-spa-title {
        font-size: 30px;
    }


    .svd-eyebrow {
        font-size: 8px;
    }


    .svd-location {
        font-size: 10px;
    }


    .svd-quick-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .svd-quick-stats strong {
        font-size: 10px;
    }


    .svd-quick-stats small {
        font-size: 8px;
    }


    .svd-hero-description {
        font-size: 10px;
    }


    .svd-stepper-item {
        flex-direction: column;

        gap: 2px;
    }


    .svd-stepper-item strong {
        font-size: 8px;

        text-align: center;
    }


    .svd-panel-head > strong {
        display: none;
    }


    .svd-booking-heading h2 {
        font-size: 24px;
    }


    .svd-booking-heading p {
        font-size: 10px;
    }


    .svd-panel-head h3 {
        font-size: 21px;
    }


    .svd-panel-head p {
        font-size: 9px;
    }


    .svd-period-tabs button {
        min-height: 43px;
    }


    .svd-period-tabs button > span {
        font-size: 9px;
    }


    .svd-period-tabs button strong {
        font-size: 8px;
    }


    .svd-period-tabs button small {
        display: none;
    }


    .svd-time-slots {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        max-height: 138px;
    }


    .svd-time-slots button,
    .svd-time-slot {
        height: 28px;
        min-height: 28px;

        font-size: 8px;
    }


    .svd-services-head {
        align-items: flex-start;
    }


    .svd-services-head-actions {
        padding-top: 2px;
    }


    .svd-services-head-actions > span {
        font-size: 8px;
    }


    .svd-services-table-head,
    .svd-service-row {
        grid-template-columns:
            minmax(0, 1.55fr)
            0.65fr
            0.52fr
            0.52fr;
    }


    .svd-service-row {
        min-height: 49px;

        padding:
            6px;
    }


    .svd-service-icon {
        width: 24px;
        height: 24px;

        flex-basis: 24px;

        font-size: 10px;
    }


    .svd-service-copy h3 {
        font-size: 9px;
    }


    .svd-service-copy p {
        font-size: 7px;
    }


    .svd-service-duration {
        font-size: 8px;
    }


    .svd-service-price strong {
        font-size: 8px;
    }


    .svd-about-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .svd-about-stats > div {
        min-height: 55px;
    }


    .svd-about-stats small {
        font-size: 8px;
    }


    .svd-amenities {
        grid-template-columns:
            1fr
            1fr;
    }


    .svd-amenities strong {
        font-size: 9px;
    }


    .svd-why-grid > span {
        font-size: 9px;
    }


    .svd-guest-booking-flow {
        grid-template-columns:
            1fr;
    }


    .svd-guest-booking-flow article {
        min-height: 48px;
    }


    .svd-guest-booking-flow strong {
        font-size: 9px;
    }


    .svd-guest-booking-flow small {
        font-size: 8px;
    }


    .svd-success-details {
        grid-template-columns:
            1fr
            1fr;
    }


    .svd-success-payment {
        align-items: flex-start;
    }


    .svd-success-payment > b {
        font-size: 15px;
    }


    .svd-mobile-booking-bar {
        min-height: 55px;

        padding-left: 10px;
    }


    .svd-mobile-booking-bar button {
        min-width: 115px;
        min-height: 41px;

        font-size: 10px;
    }

}


/* ============================================================
   VERY SMALL DEVICES
============================================================ */

@media (max-width: 360px) {

    .svd-spa-title {
        font-size: 27px;
    }


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


    .svd-services-title h2 {
        font-size: 18px;
    }


    .svd-services-title small {
        font-size: 7px;
    }


    .svd-services-title p {
        font-size: 8px;
    }


    .svd-services-title-icon {
        display: none;
    }


    .svd-services-table-head,
    .svd-service-row {
        grid-template-columns:
            minmax(0, 1.45fr)
            0.62fr
            0.52fr
            0.52fr;

        gap: 2px;
    }


    .svd-service-icon {
        display: none;
    }


    .svd-services-table-head span {
        font-size: 7px;
    }


    .svd-service-copy h3 {
        font-size: 8px;
    }


    .svd-service-copy p {
        font-size: 7px;
    }


    .svd-service-duration {
        font-size: 7px;
    }


    .svd-service-price strong {
        font-size: 7px;
    }


    .svd-time-slots {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .svd-time-slots button,
    .svd-time-slot {
        font-size: 8px;
    }


    .svd-mobile-booking-bar small {
        font-size: 8px;
    }


    .svd-mobile-booking-bar strong {
        font-size: 13px;
    }


    .svd-mobile-booking-bar button {
        min-width: 105px;

        padding:
            0
            10px;

        font-size: 10px;
    }

}


/* ============================================================
   FINAL SAFETY
============================================================ */

.svd-side-card,
.svd-about-card,
.svd-amenities-card,
.svd-why-card {
    max-height: none;

    overflow: visible;
}


.svd-about-text,
.svd-amenities,
.svd-why-grid,
.svd-about-stats {
    max-height: none;

    overflow: visible;
}


.svd-services-list,
.svd-time-slots,
.svd-success-popup,
.svd-gallery-modal-thumbs {
    scrollbar-color:
        transparent
        transparent;
}


.svd-services-list::-webkit-scrollbar,
.svd-time-slots::-webkit-scrollbar,
.svd-success-popup::-webkit-scrollbar,
.svd-gallery-modal-thumbs::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;

    background:
        transparent !important;
}


.svd-services-list::-webkit-scrollbar-thumb,
.svd-time-slots::-webkit-scrollbar-thumb,
.svd-success-popup::-webkit-scrollbar-thumb,
.svd-gallery-modal-thumbs::-webkit-scrollbar-thumb {
    background:
        transparent !important;
}


/* ============================================================
   END - SPAVERSE SPA DETAILS
============================================================ */


/* ============================================================
   AVAILABLE TIME SLOTS - FINAL CLEAN DESIGN
   Replace old COMPACT TIME SLOTS section with this
============================================================ */

.svd-slot-head {
    display: flex;
    width: 100%;

    margin-top: 14px;
    margin-bottom: 9px;

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

    gap: 12px;
}


.svd-slot-head > strong {
    color: var(--svd-green-dark);

    font-size: 12px;
    font-weight: 900;

    line-height: 1.3;

    white-space: nowrap;
}


.svd-slot-legend {
    display: flex;

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

    flex-wrap: wrap;

    gap: 9px;
}


.svd-slot-legend span {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: var(--svd-muted);

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

    line-height: 1;
}


.svd-slot-legend i {
    display: block;

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;
}


.svd-slot-legend i.available {
    background: var(--svd-success);
}


.svd-slot-legend i.booked {
    background: var(--svd-danger);
}


.svd-slot-legend i.blocked {
    background: #a3aaa7;
}


/* ============================================================
   TIME SLOT CONTAINER
============================================================ */

.svd-time-slots {
    display: grid;

    /*
     * IMPORTANT:
     * 3 columns instead of 4.
     * This gives complete time ranges enough width.
     */
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 7px;

    width: 100%;
    min-width: 0;

    max-height: 155px;

    padding:
        2px
        1px
        2px
        0;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: none;

    -ms-overflow-style: none;
}


.svd-time-slots::-webkit-scrollbar {
    display: none;

    width: 0;
    height: 0;
}


/* ============================================================
   SINGLE TIME SLOT
============================================================ */

.svd-time-slots button,
.svd-time-slot {
    display: flex;

    width: 100%;
    min-width: 0;

    min-height: 36px;
    height: 36px;

    margin: 0;

    padding:
        0
        8px;

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

    border:
        1px solid
        rgba(46, 94, 78, 0.14);

    border-radius: 7px;

    outline: none;

    background: #ffffff;

    color: var(--svd-green-dark);

    font-size: 10px;
    font-weight: 800;

    line-height: 1;

    text-align: center;

    /*
     * Time range stays inside its own box.
     */
    white-space: nowrap;

    overflow: hidden;

    text-overflow: clip;

    cursor: pointer;

    box-shadow: none;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


/* ============================================================
   HOVER
============================================================ */

.svd-time-slots button:hover:not(:disabled),
.svd-time-slot:hover:not(:disabled) {
    border-color:
        rgba(46, 94, 78, 0.45);

    background:
        #f7fbf9;

    transform:
        translateY(-1px);

    box-shadow:
        0 4px 10px
        rgba(30, 67, 56, 0.06);
}


/* ============================================================
   AVAILABLE
============================================================ */

.svd-time-slots button.is-available,
.svd-time-slots button.available,
.svd-time-slot.is-available,
.svd-time-slot.available {
    border-color:
        rgba(43, 138, 89, 0.22);

    background:
        #f3faf6;

    color:
        #28784f;
}


/* ============================================================
   SELECTED
============================================================ */

.svd-time-slots button.is-selected,
.svd-time-slots button.selected,
.svd-time-slot.is-selected,
.svd-time-slot.selected,
.svd-time-slots button.is-available.is-selected,
.svd-time-slots button.available.selected,
.svd-time-slot.is-available.is-selected,
.svd-time-slot.available.selected {
    border-color:
        var(--svd-green);

    background:
        var(--svd-green);

    color:
        #ffffff;

    box-shadow:
        0 5px 12px
        rgba(46, 94, 78, 0.16);
}


/* ============================================================
   BOOKED
============================================================ */

.svd-time-slots button.is-booked,
.svd-time-slots button.booked,
.svd-time-slot.is-booked,
.svd-time-slot.booked,
.svd-time-slots button:disabled {
    border-color:
        rgba(198, 83, 83, 0.14);

    background:
        #fff5f5;

    color:
        #bd6565;

    opacity: 0.76;

    cursor: not-allowed;

    text-decoration: none;

    transform: none;

    box-shadow: none;
}


/* ============================================================
   BLOCKED
============================================================ */

.svd-time-slots button.is-blocked,
.svd-time-slots button.blocked,
.svd-time-slot.is-blocked,
.svd-time-slot.blocked {
    border-color:
        #e1e6e3;

    background:
        #f4f6f5;

    color:
        #919a96;

    opacity: 0.82;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ============================================================
   EMPTY SLOT MESSAGE
============================================================ */

.svd-empty-slots {
    grid-column:
        1 / -1;

    display: flex;

    width: 100%;

    min-height: 68px;

    padding: 12px;

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

    border:
        1px dashed
        var(--svd-border-strong);

    border-radius: 8px;

    background:
        #fbfcfb;

    color:
        var(--svd-muted);

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

    line-height: 1.45;

    text-align: center;
}


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

@media (max-width: 991px) {

    .svd-time-slots {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 6px;

        max-height: 150px;
    }


    .svd-time-slots button,
    .svd-time-slot {
        min-height: 35px;
        height: 35px;

        padding:
            0
            6px;

        font-size: 9.5px;
    }
}


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

@media (max-width: 767px) {

    .svd-slot-head {
        margin-top: 13px;
        margin-bottom: 8px;

        align-items: flex-start;

        flex-direction: column;

        gap: 6px;
    }


    .svd-slot-head > strong {
        font-size: 12px;
    }


    .svd-slot-legend {
        width: 100%;

        justify-content: flex-start;

        gap: 10px;
    }


    .svd-slot-legend span {
        font-size: 9px;
    }


    /*
     * Mobile = 2 slots per row.
     *
     * Full range like:
     * 09:00 PM - 10:00 PM
     *
     * gets enough space.
     */
    .svd-time-slots {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px;

        max-height: 160px;

        padding:
            1px
            0;
    }


    .svd-time-slots button,
    .svd-time-slot {
        min-height: 36px;
        height: 36px;

        padding:
            0
            7px;

        border-radius: 7px;

        font-size: 10px;

        letter-spacing: -0.1px;
    }


    .svd-empty-slots {
        min-height: 64px;

        font-size: 10px;
    }
}


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

@media (max-width: 420px) {

    .svd-time-slots {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 5px;
    }


    .svd-time-slots button,
    .svd-time-slot {
        min-height: 35px;
        height: 35px;

        padding:
            0
            5px;

        font-size: 9px;
    }
}

/* ============================================================
   SPAVERSE - SPA DETAILS
   MEMBERSHIP REQUIRED
============================================================ */

.svd-membership-required {
    position: relative;

    width: 100%;

    padding: 30px 30px 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(234, 215, 177, 0.22),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fdfcf9 54%,
            #f7f2e8 100%
        );

    border:
        1px solid
        rgba(46, 94, 78, 0.10);

    border-radius: 20px;

    box-shadow:
        0 18px 45px
        rgba(46, 94, 78, 0.08);
}


/* DECORATION */

.svd-membership-required::before {
    content: "";

    position: absolute;

    top: -90px;
    right: -90px;

    width: 220px;
    height: 220px;

    border:
        1px solid
        rgba(201, 166, 107, 0.16);

    border-radius: 50%;

    pointer-events: none;
}


/* ============================================================
   TOP
============================================================ */

.svd-membership-required-top {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: flex-start;

    gap: 18px;
}


/* ICON */

.svd-membership-required-mark {
    width: 58px;
    height: 58px;

    flex:
        0
        0
        58px;

    display: flex;

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

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #2e5e4e,
            #1e4338
        );

    border:
        5px solid
        rgba(234, 215, 177, 0.55);

    border-radius: 50%;

    box-shadow:
        0 10px 26px
        rgba(46, 94, 78, 0.18);
}

.svd-membership-required-mark span {
    font-size: 20px;

    line-height: 1;
}


/* ============================================================
   HEADING
============================================================ */

.svd-membership-required-heading {
    min-width: 0;

    flex: 1;
}

.svd-membership-required-heading > span {
    display: block;

    margin-bottom: 6px;

    color: #c9a66b;

    font-size: 9px;
    font-weight: 900;

    line-height: 1.4;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}

.svd-membership-required-heading h2 {
    margin: 0;

    color: #1e4338;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    line-height: 1.05;
}

.svd-membership-required-heading p {
    max-width: 590px;

    margin:
        9px
        0
        0;

    color: #6e7f79;

    font-size: 11.5px;

    line-height: 1.65;
}


/* ============================================================
   FLOW
============================================================ */

.svd-membership-required-flow {
    position: relative;

    z-index: 1;

    display: grid;

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

    margin-top: 25px;

    align-items: center;
}

.svd-membership-required-flow > i {
    width: 100%;
    height: 1px;

    display: block;

    background:
        rgba(46, 94, 78, 0.16);
}

.svd-membership-required-flow article {
    min-width: 0;
    min-height: 66px;

    padding:
        10px
        11px;

    display: flex;

    align-items: center;

    gap: 9px;

    background:
        rgba(255, 255, 255, 0.74);

    border:
        1px solid
        rgba(46, 94, 78, 0.09);

    border-radius: 12px;
}

.svd-membership-required-flow article > span {
    width: 27px;
    height: 27px;

    flex:
        0
        0
        27px;

    display: flex;

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

    color: #ffffff;

    background: #2e5e4e;

    border-radius: 50%;

    font-size: 8px;
    font-weight: 900;
}

.svd-membership-required-flow article > div {
    min-width: 0;
}

.svd-membership-required-flow strong,
.svd-membership-required-flow small {
    display: block;
}

.svd-membership-required-flow strong {
    color: #1e4338;

    font-size: 10px;

    font-weight: 900;

    line-height: 1.35;
}

.svd-membership-required-flow small {
    margin-top: 2px;

    color: #6e7f79;

    font-size: 8.5px;

    line-height: 1.45;
}


/* ============================================================
   BOTTOM
============================================================ */

.svd-membership-required-bottom {
    position: relative;

    z-index: 1;

    display: grid;

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

    margin-top: 20px;

    align-items: center;

    gap: 18px;
}


/* BENEFITS */

.svd-membership-required-benefits {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.svd-membership-required-benefits > span {
    min-height: 30px;

    padding:
        6px
        10px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #2e5e4e;

    background:
        rgba(46, 94, 78, 0.055);

    border:
        1px solid
        rgba(46, 94, 78, 0.08);

    border-radius: 20px;

    font-size: 9px;

    font-weight: 800;
}

.svd-membership-required-benefits i {
    width: 17px;
    height: 17px;

    display: inline-flex;

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

    color: #ffffff;

    background: #2e5e4e;

    border-radius: 50%;

    font-style: normal;

    font-size: 6px;

    font-weight: 900;
}


/* ============================================================
   BUTTON
============================================================ */

.svd-membership-required-button {
    min-height: 54px;

    padding:
        0
        12px
        0
        16px;

    display: flex;

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

    gap: 12px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #2e5e4e,
            #1e4338
        );

    border-radius: 12px;

    box-shadow:
        0 12px 26px
        rgba(46, 94, 78, 0.18);

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.svd-membership-required-button:hover {
    color: #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 30px
        rgba(46, 94, 78, 0.23);
}

.svd-membership-required-button > span {
    min-width: 0;
}

.svd-membership-required-button small,
.svd-membership-required-button strong {
    display: block;
}

.svd-membership-required-button small {
    color:
        rgba(255, 255, 255, 0.64);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.8px;
}

.svd-membership-required-button strong {
    margin-top: 2px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 900;
}

.svd-membership-required-button b {
    width: 30px;
    height: 30px;

    flex:
        0
        0
        30px;

    display: flex;

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

    color: #1e4338;

    background: #ead7b1;

    border-radius: 8px;

    font-size: 13px;

    transition:
        transform 0.2s ease;
}

.svd-membership-required-button:hover b {
    transform:
        translateX(2px);
}


/* ============================================================
   SECURITY NOTE
============================================================ */

.svd-membership-required-security {
    position: relative;

    z-index: 1;

    display: flex;

    margin-top: 17px;

    padding-top: 15px;

    align-items: center;

    gap: 7px;

    border-top:
        1px solid
        rgba(46, 94, 78, 0.08);
}

.svd-membership-required-security > span {
    color: #c9a66b;

    font-size: 15px;
}

.svd-membership-required-security p {
    margin: 0;

    color: #7f8e88;

    font-size: 8.5px;

    line-height: 1.45;
}


/* ============================================================
   MOBILE MEMBERSHIP BUTTON
============================================================ */

.svd-mobile-membership-button {
    min-height: 42px;

    padding:
        0
        15px;

    display: inline-flex;

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

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #2e5e4e,
            #1e4338
        );

    border-radius: 10px;

    font-size: 10px;

    font-weight: 900;

    text-decoration: none !important;
}


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

@media (max-width: 1000px) {

    .svd-membership-required {
        padding:
            27px
            24px
            22px;
    }

    .svd-membership-required-flow {
        grid-template-columns:
            1fr;

        gap: 7px;
    }

    .svd-membership-required-flow > i {
        display: none;
    }

    .svd-membership-required-flow article {
        min-height: 55px;
    }

    .svd-membership-required-bottom {
        grid-template-columns:
            1fr;

        gap: 13px;
    }

    .svd-membership-required-button {
        width: 100%;
    }
}


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

@media (max-width: 768px) {

    .svd-membership-required {
        padding:
            22px
            16px
            18px;

        border-radius: 16px;
    }

    .svd-membership-required-top {
        gap: 12px;
    }

    .svd-membership-required-mark {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        border-width: 4px;
    }

    .svd-membership-required-mark span {
        font-size: 17px;
    }

    .svd-membership-required-heading h2 {
        font-size: 25px;
    }

    .svd-membership-required-heading p {
        font-size: 10px;

        line-height: 1.6;
    }

    .svd-membership-required-flow {
        margin-top: 18px;
    }

    .svd-membership-required-flow article {
        min-height: 50px;

        padding:
            8px
            9px;
    }

    .svd-membership-required-bottom {
        margin-top: 15px;
    }

    .svd-membership-required-benefits {
        gap: 5px;
    }

    .svd-membership-required-benefits > span {
        min-height: 27px;

        padding:
            5px
            8px;

        font-size: 8px;
    }

    .svd-membership-required-button {
        min-height: 49px;
    }

    .svd-membership-required-security {
        margin-top: 13px;

        padding-top: 12px;
    }
}


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

@media (max-width: 430px) {

    .svd-membership-required-top {
        display: block;

        text-align: center;
    }

    .svd-membership-required-mark {
        margin:
            0
            auto
            13px;
    }

    .svd-membership-required-heading > span {
        margin-bottom: 5px;
    }

    .svd-membership-required-heading h2 {
        font-size: 27px;
    }

    .svd-membership-required-heading p {
        margin:
            9px
            auto
            0;
    }

    .svd-membership-required-benefits {
        justify-content: center;
    }

    .svd-membership-required-security {
        justify-content: center;

        text-align: left;
    }
}