@import 'default-style.css';

@import 'dashboard-style.css';

/* Prevent inherited browser/theme colors from reducing form contrast on light surfaces. */
#vaghta-auth input:not([type="radio"]):not([type="checkbox"]),
#vaghta-auth select,
#vaghta-booking-modal input,
#vaghta-booking-modal select,
#vaghta-booking-modal textarea {
    background-color: #fff;
    color: #0f172a;
    caret-color: #0f766e;
}

#vaghta-auth input::placeholder,
#vaghta-booking-modal input::placeholder,
#vaghta-booking-modal textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}

#vaghta-auth button,
#vaghta-booking-modal button,
#vaghta-booking-success button,
#vaghta-booking-success a {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

#vaghta-auth button[type="submit"]:hover,
#vaghta-booking-modal button[type="submit"]:hover,
#vaghta-booking-success a:hover {
    background-color: #115e59;
    color: #fff;
}





/* ---------------- */


.tab-active span {
    display: block !important;
}

/* Apply the shared minimal organic visual language to public page sections. */
main>section {
    position: relative;
    isolation: isolate;
}

main>section>.container {
    position: relative;
    z-index: 2;
}

/* Keep Swiper width calculations inside the section container on every public page. */
main>section>.container,
main>section>.container>.row,
main>section>.container>.row>* {
    min-width: 0;
    /* max-width: 100%; */
}

/* Clip translated slides while allowing shadows and controls to remain inside the container. */
main .swiper,
main .vaghta-swiper,
main .vaghta-ad-slider,
main .vaghta-membership-plans {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Give each dashboard membership tier a complete, recognizable premium palette. */
.vaghta-membership-card {
    --membership-accent: #a65a32;
    --membership-accent-dark: #7c3f24;
    --membership-soft: #fff1e8;
    --membership-soft-strong: #f6d7c4;
    --membership-border: rgb(166 90 50 / 28%);
    --membership-glow: rgb(166 90 50 / 18%);
    --membership-surface: rgb(255 255 255 / 82%);
    --membership-overlay-start: rgb(255 241 232 / 60%);
    --membership-overlay-end: rgb(246 215 196 / 48%);
    isolation: isolate;
    border-color: var(--membership-border);
    background-color: #fffaf7;
    background-image: radial-gradient(circle at 8% 3%, var(--membership-glow) 0%, transparent 30%), linear-gradient(145deg, var(--membership-overlay-start) 0%, rgb(255 255 255 / 45%) 48%, var(--membership-overlay-end) 140%), url("img/membership-plan-texture.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 12px 32px -22px var(--membership-accent);
}

.vaghta-membership-card:hover {
    border-color: var(--membership-accent);
    box-shadow: 0 20px 44px -24px var(--membership-accent);
}

.vaghta-membership-card--bronze {
    --membership-accent: #a65a32;
    --membership-accent-dark: #7c3f24;
    --membership-soft: #fff1e8;
    --membership-soft-strong: #efc6ae;
    --membership-border: rgb(166 90 50 / 32%);
    --membership-glow: rgb(191 104 58 / 24%);
    --membership-overlay-start: rgb(255 241 232 / 62%);
    --membership-overlay-end: rgb(239 198 174 / 52%);
}

.vaghta-membership-card--silver {
    --membership-accent: #456783;
    --membership-accent-dark: #27445e;
    --membership-soft: #edf7fd;
    --membership-soft-strong: #c7ddec;
    --membership-border: rgb(69 103 131 / 42%);
    --membership-glow: rgb(112 170 207 / 34%);
    --membership-overlay-start: rgb(237 247 253 / 66%);
    --membership-overlay-end: rgb(174 205 225 / 56%);
    box-shadow: 0 16px 38px -22px rgb(39 68 94 / 58%);
}

/* Use an icy steel sheen so silver reads as premium and active, not disabled. */
.vaghta-membership-card--silver:hover {
    box-shadow: 0 24px 48px -22px rgb(39 68 94 / 72%);
}

.vaghta-membership-card--silver .vaghta-membership-card__accent,
.vaghta-membership-card--silver .vaghta-membership-card__duration,
.vaghta-membership-card--silver .vaghta-membership-card__button {
    background-image: linear-gradient(135deg, #2f506c 0%, #7596b1 52%, #365c78 100%);
}

.vaghta-membership-card--silver .vaghta-membership-card__icon,
.vaghta-membership-card--silver .vaghta-membership-card__tier,
.vaghta-membership-card--silver .vaghta-membership-card__monthly {
    background-image: linear-gradient(135deg, rgb(255 255 255 / 92%), rgb(190 216 234 / 92%));
}

.vaghta-membership-card--silver .vaghta-membership-card__button:hover {
    background-image: linear-gradient(135deg, #203b52 0%, #52738f 52%, #27465e 100%);
}

.vaghta-membership-card--gold {
    --membership-accent: #a16207;
    --membership-accent-dark: #854d0e;
    --membership-soft: #fff9db;
    --membership-soft-strong: #f9d96a;
    --membership-border: rgb(213 150 18 / 34%);
    --membership-glow: rgb(245 190 45 / 30%);
    --membership-overlay-start: rgb(255 249 219 / 62%);
    --membership-overlay-end: rgb(249 217 106 / 50%);
    border-width: 2px;
    box-shadow: 0 20px 44px -22px rgb(161 98 7 / 55%);
}

/* Make the gold option read as the featured choice without changing slider geometry. */
.vaghta-membership-slide--featured {
    position: relative;
    z-index: 2;
}

.vaghta-membership-card--gold:hover {
    box-shadow: 0 26px 54px -22px rgb(161 98 7 / 70%);
}

.vaghta-membership-card__popular {
    color: #713f12;
    background: linear-gradient(135deg, #fef3c7, #facc15);
    box-shadow: 0 7px 18px -10px rgb(161 98 7 / 80%);
    white-space: nowrap;
}

/* Reuse each tier's palette across the card accents, prices, and actions. */
.vaghta-membership-card__accent,
.vaghta-membership-card__duration,
.vaghta-membership-card__button {
    background-color: var(--membership-accent);
}

.vaghta-membership-card__icon,
.vaghta-membership-card__tier,
.vaghta-membership-card__monthly {
    color: var(--membership-accent-dark);
    background-color: var(--membership-soft-strong);
}

.vaghta-membership-card__icon {
    box-shadow: inset 0 0 0 1px var(--membership-border), 0 8px 20px -12px var(--membership-accent);
}

.vaghta-membership-card__duration {
    min-width: 6.75rem;
    justify-content: center;
}

/* Present plan features as compact glass rows with clear availability states. */
.vaghta-membership-card__features {
    display: grid;
    gap: .5rem;
}

.vaghta-membership-card__feature {
    min-height: 2.5rem;
    padding: .5rem .625rem;
    line-height: 1.75;
    border: 1px solid rgb(255 255 255 / 76%);
    border-radius: .75rem;
    background-color: rgb(255 255 255 / 58%);
    box-shadow: 0 5px 16px -15px var(--membership-accent-dark);
    backdrop-filter: blur(4px);
}

.vaghta-membership-card__feature--disabled {
    border-color: rgb(226 232 240 / 76%);
    background-color: rgb(248 250 252 / 62%);
    box-shadow: none;
}

.vaghta-membership-card__price-box {
    border-color: var(--membership-border);
    background-color: var(--membership-surface);
    backdrop-filter: blur(5px);
}

.vaghta-membership-card__price {
    color: var(--membership-accent-dark);
}

.vaghta-membership-card__feature-icon {
    color: var(--membership-accent);
    background-color: var(--membership-soft-strong);
    box-shadow: inset 0 0 0 1px var(--membership-border);
}

.vaghta-membership-card__feature-icon--disabled {
    color: #e11d48;
    background-color: #fff1f2;
    box-shadow: inset 0 0 0 1px rgb(225 29 72 / 18%);
}

.vaghta-membership-card__button {
    box-shadow: 0 10px 22px -14px var(--membership-accent-dark);
}

.vaghta-membership-card__button:hover {
    background-color: var(--membership-accent-dark);
}

.vaghta-membership-card__button:focus-visible {
    outline: 3px solid var(--membership-soft-strong);
    outline-offset: 3px;
}

/* Prevent long card content from forcing an individual slide wider than Swiper calculated. */
main .swiper-wrapper,
main .swiper-slide {
    min-width: 0;
    max-width: 100%;
}

/* Replace the membership slider with a stable three-column card grid on desktop. */
@media (min-width: 1024px) {
    main .vaghta-membership-plans {
        overflow: visible;
    }

    main .vaghta-membership-plans:not(.swiper-initialized)>.swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        transform: none !important;
    }

    main .vaghta-membership-plans:not(.swiper-initialized)>.swiper-wrapper>[data-duration] {
        width: auto !important;
        margin: 0 !important;
    }
}

/* Sweep one restrained highlight back and forth across every shared advertisement creative. */
.vaghta-ad-creative {
    isolation: isolate;
}

.vaghta-ad-creative::after {
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: -55%;
    z-index: 3;
    width: 45%;
    pointer-events: none;
    content: "";
    background: linear-gradient(105deg, transparent 8%, rgba(255, 255, 255, .08) 35%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .08) 65%, transparent 92%);
    filter: blur(2px);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translate3d(-120%, 0, 0) skewX(-16deg);
    animation: vaghta-ad-shine 4.8s cubic-bezier(.45, 0, .55, 1) infinite alternate;
    will-change: transform, opacity;
}

@keyframes vaghta-ad-shine {

    0%,
    8% {
        opacity: 0;
        transform: translate3d(-120%, 0, 0) skewX(-16deg);
    }

    18%,
    82% {
        opacity: .72;
    }

    92%,
    100% {
        opacity: 0;
        transform: translate3d(470%, 0, 0) skewX(-16deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vaghta-ad-creative::after {
        animation: none;
        opacity: 0;
    }
}

/* Use restrained alternating ambient color so long pages remain calm and consistent. */
main>section:nth-of-type(4n + 1):not(#home-hero):not(#customer-stories):not(.vaghta-organic-surface)::before,
main>section:nth-of-type(4n + 3):not(#home-hero):not(#customer-stories):not(.vaghta-organic-surface)::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: .62;
}

main>section:nth-of-type(4n + 1):not(#home-hero):not(#customer-stories):not(.vaghta-organic-surface)::before {
    background:
        radial-gradient(circle at 6% 18%, rgba(191, 232, 223, .32), transparent 22%),
        radial-gradient(circle at 96% 78%, rgba(254, 227, 178, .24), transparent 20%);
}

main>section:nth-of-type(4n + 3):not(#home-hero):not(#customer-stories):not(.vaghta-organic-surface)::before {
    background:
        radial-gradient(circle at 94% 82%, rgba(254, 227, 178, .3), transparent 24%),
        radial-gradient(circle at 4% 25%, rgba(191, 232, 223, .24), transparent 19%);
}

/* Use one balanced botanical system across every visible homepage section. */
body.home main>section.vaghta-has-botanical::after,
body.front-page main>section.vaghta-has-botanical::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    content: "";
    background-image:
        url("img/decor-botanical-teal.svg"),
        url("img/decor-botanical-warm.svg"),
        url("img/decor-botanical-teal.svg"),
        url("img/decor-botanical-warm.svg");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left 24% top 12%, right 28% bottom 15%, left 58% bottom 8%, right 70% top 45%;
    background-size: 108px auto, 138px auto, 58px auto, 72px auto;
    opacity: .173;
}

/* Shift the accents per section so the long page does not feel patterned. */
body.home main>section.vaghta-has-botanical:nth-of-type(4n + 2)::after,
body.front-page main>section.vaghta-has-botanical:nth-of-type(4n + 2)::after {
    background-position: left 36% top 38%, right 54% bottom 32%, left 68% bottom 4%, right 23% top 8%;
}

body.home main>section.vaghta-has-botanical:nth-of-type(4n + 3)::after,
body.front-page main>section.vaghta-has-botanical:nth-of-type(4n + 3)::after {
    background-position: left 26% top 65%, right 72% bottom 58%, left 47% bottom 12%, right 58% top 22%;
}

body.home main>section.vaghta-has-botanical:nth-of-type(4n)::after,
body.front-page main>section.vaghta-has-botanical:nth-of-type(4n)::after {
    background-position: left 65% top 18%, right 28% bottom 14%, left 38% bottom 45%, right 71% top 55%;
}

/* Use the same complete SVG set on both sides with mirrored placement. */
.vaghta-organic-right-accent,
.vaghta-organic-left-accent {
    position: absolute;
    top: 8%;
    z-index: 1;
    display: block;
    width: 155px;
    height: 82%;
    min-height: 240px;
    max-height: 520px;
    pointer-events: none;
    background-image:
        url("img/decor-botanical-warm.svg"),
        url("img/decor-botanical-teal.svg"),
        radial-gradient(circle at 80% 30%, rgba(253, 227, 181, .32), transparent 38%);
    background-repeat: no-repeat;
    background-position: right top, right 24px bottom, center;
    background-size: 132px auto, 72px auto, 100% 100%;
    opacity: .294;
}

.vaghta-organic-right-accent {
    top: 14%;
    height: 70%;
    right: 10px;
}

.vaghta-organic-left-accent {
    top: 32%;
    height: 60%;
    left: 10px;
}

/* Scatter the independent layer vertically instead of repeating one fixed placement. */
body.home main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-right-accent,
body.home main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-left-accent,
body.front-page main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-right-accent,
body.front-page main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-left-accent {
    top: 20%;
    height: 68%;
    background-position: right center, right 35px top, center;
}

body.home main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-right-accent,
body.home main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-left-accent,
body.front-page main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-right-accent,
body.front-page main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-left-accent {
    top: auto;
    bottom: 2%;
    height: 72%;
    background-position: right bottom, right 20px top 18%, center;
}

/* Offset the two sides independently so botanical accents never mirror each other. */
body.home main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-right-accent,
body.front-page main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-right-accent {
    top: 6%;
    bottom: auto;
    height: 66%;
}

body.home main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-left-accent,
body.front-page main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-left-accent {
    top: auto;
    bottom: 8%;
    height: 56%;
}

body.home main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-right-accent,
body.front-page main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-right-accent {
    top: auto;
    bottom: 4%;
    height: 58%;
}

body.home main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-left-accent,
body.front-page main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-left-accent {
    top: 18%;
    bottom: auto;
    height: 70%;
}

@media (min-width: 1024px) {

    .vaghta-organic-right-accent,
    .vaghta-organic-left-accent {
        width: 235px;
        min-height: 330px;
        background-position: right top, right 58px bottom, center;
        background-size: 195px auto, 100px auto, 100% 100%;
        opacity: .32;
    }

    .vaghta-organic-right-accent {
        right: 18px;
    }

    .vaghta-organic-left-accent {
        left: 18px;
    }

    body.home main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-right-accent,
    body.home main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-left-accent,
    body.front-page main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-right-accent,
    body.front-page main>section.vaghta-has-botanical:nth-of-type(3n + 2)>.vaghta-organic-left-accent {
        background-position: right center, right 76px top, center;
    }

    body.home main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-right-accent,
    body.home main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-left-accent,
    body.front-page main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-right-accent,
    body.front-page main>section.vaghta-has-botanical:nth-of-type(3n)>.vaghta-organic-left-accent {
        background-position: right bottom, right 54px top 18%, center;
    }

}

/* Keep long-form WordPress content readable while allowing editor-authored blocks to flow naturally. */
.vaghta-article-content {
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    line-height: 2.25;
    overflow-wrap: anywhere;
}

.vaghta-article-content>*:first-child {
    margin-top: 0;
}

.vaghta-article-content>*:last-child {
    margin-bottom: 0;
}

.vaghta-article-content p,
.vaghta-article-content ul,
.vaghta-article-content ol,
.vaghta-article-content blockquote,
.vaghta-article-content figure,
.vaghta-article-content table,
.vaghta-article-content pre {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.vaghta-article-content h2,
.vaghta-article-content h3,
.vaghta-article-content h4 {
    scroll-margin-top: 7rem;
    color: #111827;
    font-weight: 900;
    line-height: 1.8;
}

.vaghta-article-content h2 {
    margin-top: 2.75rem;
    margin-bottom: 1rem;
    padding-right: 1rem;
    border-right: 4px solid #f59e0b;
    font-size: 22px;
}

.vaghta-article-content h3 {
    margin-top: 2.25rem;
    margin-bottom: .75rem;
    font-size: 18px;
}

.vaghta-article-content h4 {
    margin-top: 2rem;
    margin-bottom: .75rem;
    font-size: 16px;
}

.vaghta-article-content a:not(.vaghta-provider-mention__link) {
    color: #0f766e;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: rgba(15, 118, 110, .3);
    text-underline-offset: 4px;
    transition: color .2s ease, text-decoration-color .2s ease;
}

.vaghta-article-content a:not(.vaghta-provider-mention__link):hover {
    color: #b45309;
    text-decoration-color: currentColor;
}

.vaghta-article-content ul,
.vaghta-article-content ol {
    padding-right: 1.4rem;
}

.vaghta-article-content ul {
    list-style: disc;
}

.vaghta-article-content ol {
    list-style: decimal;
}

.vaghta-article-content li {
    margin: .45rem 0;
    padding-right: .35rem;
}

.vaghta-article-content li::marker {
    color: #f59e0b;
    font-weight: 900;
}

.vaghta-article-content blockquote {
    position: relative;
    padding: 1.4rem 1.5rem 1.4rem 1.25rem;
    border: 1px solid #99f6e4;
    border-right: 5px solid #0f766e;
    border-radius: 18px;
    background: #f0fdfa;
    color: #134e4a;
    font-size: 15px;
    font-weight: 800;
}

.vaghta-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
}

.vaghta-article-content figcaption {
    margin-top: .65rem;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
}

.vaghta-article-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    border-radius: 16px;
}

.vaghta-article-content th,
.vaghta-article-content td {
    min-width: 130px;
    padding: .8rem 1rem;
    border: 1px solid #e2e8f0;
    text-align: right;
}

.vaghta-article-content th {
    background: #f0fdfa;
    color: #115e59;
    font-weight: 900;
}

.vaghta-article-content pre {
    direction: ltr;
    overflow-x: auto;
    padding: 1.25rem;
    border-radius: 16px;
    background: #111827;
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.8;
    text-align: left;
}

/* Present provider mentions as editorial recommendations instead of generic marketplace cards. */
.vaghta-provider-mention {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 0;
    margin: 2.25rem 0;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 22px;
    background: linear-gradient(135deg, #fff 55%, #f0fdfa);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

.vaghta-provider-mention__media {
    position: relative;
    min-height: 190px;
    background: #ccfbf1;
}

.vaghta-provider-mention__image {
    width: 100%;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover;
}

.vaghta-provider-mention__type {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .45rem .6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    color: #0f766e;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
}

.vaghta-provider-mention__type .material-symbols-outlined {
    font-size: 15px;
}

.vaghta-provider-mention__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.4rem;
}

.vaghta-provider-mention__eyebrow {
    margin: 0 !important;
    color: #b45309;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.5;
}

.vaghta-provider-mention__title {
    margin: .4rem 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}

.vaghta-provider-mention__title a {
    color: #111827 !important;
    text-decoration: none !important;
}

.vaghta-provider-mention__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-top: .45rem;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.5;
}

.vaghta-provider-mention__meta span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.vaghta-provider-mention__meta .material-symbols-outlined {
    color: #f59e0b;
    font-size: 15px;
}

.vaghta-provider-mention__services {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .8rem;
}

.vaghta-provider-mention__services span {
    padding: .3rem .55rem;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 8px;
    font-weight: 900;
    line-height: 1.5;
}

.vaghta-provider-mention__link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .35rem;
    margin-top: .9rem;
    padding: .65rem .9rem;
    border-radius: 10px;
    background: #0f766e;
    color: #fff !important;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.5;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(15, 118, 110, .18);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.vaghta-provider-mention__link:hover {
    transform: translateY(-1px);
    background: #115e59;
    box-shadow: 0 14px 28px rgba(15, 118, 110, .24);
}

.vaghta-provider-mention__link .material-symbols-outlined {
    font-size: 15px;
}

/* Style the native WordPress comment form and nested discussion consistently. */
#blog-comment-list,
#blog-comment-list .children {
    list-style: none;
    padding: 0;
}

#blog-comment-list .children {
    margin-top: 1rem;
    margin-right: 1.25rem;
}

#blog-comment-list .comment-reply-link,
#blog-comment-list .comment-edit-link {
    color: #0f766e;
    text-decoration: none;
    transition: color .2s ease;
}

#blog-comment-list .comment-reply-link:hover,
#blog-comment-list .comment-edit-link:hover {
    color: #b45309;
}

#blog-comment-form .comment-form-author,
#blog-comment-form .comment-form-email,
#blog-comment-form .comment-form-comment {
    margin-top: 1rem;
}

#blog-comment-form .comment-form-author,
#blog-comment-form .comment-form-email {
    display: inline-block;
    width: calc(50% - .4rem);
    vertical-align: top;
}

#blog-comment-form .comment-form-author {
    margin-left: .5rem;
}

#blog-comment-form label {
    display: block;
    margin-bottom: .45rem;
    color: #334155;
    font-size: 10px;
    font-weight: 900;
}

#blog-comment-form input[type='text'],
#blog-comment-form input[type='email'],
#blog-comment-form textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#blog-comment-form input[type='text'],
#blog-comment-form input[type='email'] {
    min-height: 46px;
    padding: .7rem .9rem;
}

#blog-comment-form textarea {
    min-height: 150px;
    resize: vertical;
    padding: .9rem;
    line-height: 2;
}

#blog-comment-form input:focus,
#blog-comment-form textarea:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .12);
}

#blog-comment-form .form-submit {
    margin-top: 1rem;
}

.vaghta-comment-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

#single-blog-toc a {
    display: block;
    padding: .45rem 0;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.8;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

#single-blog-toc a:hover,
#single-blog-toc a.is-active {
    transform: translateX(-2px);
    color: #0f766e;
}

#single-blog-toc a[data-level='3'] {
    padding-right: .75rem;
    font-size: 8px;
}

/* Keep sidebar jump-link destinations visible below the sticky site header. */
#single-blog-related,
#single-blog-comments {
    scroll-margin-top: 7rem;
}

@media (min-width: 1024px) {
    .vaghta-article-content {
        font-size: 15px;
        line-height: 2.35;
    }
}

@media (max-width: 639px) {
    .vaghta-provider-mention {
        grid-template-columns: 105px minmax(0, 1fr);
        border-radius: 18px;
    }

    .vaghta-provider-mention__media {
        min-height: 210px;
    }

    .vaghta-provider-mention__content {
        padding: 1rem;
    }

    .vaghta-provider-mention__title {
        font-size: 15px !important;
    }

    .vaghta-provider-mention__services span:nth-child(n+3) {
        display: none;
    }

    #blog-comment-list .children {
        margin-right: .65rem;
    }

    #blog-comment-form .comment-form-author,
    #blog-comment-form .comment-form-email {
        display: block;
        width: 100%;
        margin-left: 0;
    }
}

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

    .vaghta-provider-mention__link,
    #single-blog-toc a {
        transition: none;
    }
}

/* Position the randomized service links around the homepage hero portrait. */
.hero-floating-services {
    pointer-events: none;
}

.hero-floating-service {
    position: absolute;
    display: flex;
    width: 5rem;
    height: 5rem;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    overflow: hidden;
    border: 1px solid rgba(126, 156, 148, .2);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 30px rgba(77, 112, 104, .11);
    text-decoration: none;
    pointer-events: auto;
    backdrop-filter: blur(8px);
    animation: vaghta-hero-float 4.5s ease-in-out infinite;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.hero-floating-service:hover,
.hero-floating-service:focus-visible {
    border-color: rgba(116, 166, 153, .5);
    box-shadow: 0 16px 34px rgba(77, 112, 104, .15);
    color: #355d54;
}

.hero-floating-service img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: contain;
    filter: none !important;
    transition: transform .3s ease;
}

.hero-floating-service:hover img,
.hero-floating-service:focus-visible img {
    transform: scale(1.06);
}

/* Give each service link a separate orbit point and timing. */
.hero-floating-service:nth-child(1) {
    top: 4%;
    right: 2%;
}

.hero-floating-service:nth-child(2) {
    top: 39%;
    left: 0;
    animation-delay: -.9s;
}

.hero-floating-service:nth-child(3) {
    right: 2%;
    bottom: 3%;
    animation-delay: -1.8s;
}

.hero-floating-service:nth-child(4) {
    display: none;
    animation-delay: -2.7s;
}

@keyframes vaghta-hero-float {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -10px;
    }
}

@media (min-width: 1024px) {
    .hero-floating-service {
        width: 6.25rem;
        height: 6.25rem;
    }

    .hero-floating-service:nth-child(1) {
        top: 6%;
        right: 7%;
    }

    .hero-floating-service:nth-child(2) {
        top: 34%;
        left: -5%;
    }

    .hero-floating-service:nth-child(3) {
        right: -4%;
        bottom: 8%;
    }

    .hero-floating-service:nth-child(4) {
        bottom: 1%;
        left: 11%;
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-floating-service {
        animation: none;
    }
}

/* Decorative section modifier used on key editorial areas across the theme. */
/* Keep the provider selector visually stable while only its results change. */
.vaghta-provider-tabs {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: calc(100% - 32px);
    max-width: 560px;
    margin: -160px auto 49px;
    padding: 6px;
    border: 1px solid #dbe7e4;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: 0 -10px 30px rgba(15, 118, 110, .06);
}

/* Turn the neighborhood tabs into a dock that grows out of the results section. */
#neighborhood-providers,
#category-providers {
    position: relative;
    overflow: visible;
    border-top-color: transparent;
    padding-top: 100px;
}

#neighborhood-providers .vaghta-provider-tabs,
#category-providers .vaghta-provider-tabs {
    isolation: isolate;
    border-color: #d6e5e1;
    border-bottom: 0;
    background: transparent;
    box-shadow: 0 -12px 32px rgba(15, 118, 110, .07);
}

/* Leave the lower edge open so the section's own animated background continues through it. */
#neighborhood-providers .vaghta-provider-tabs::after,
#category-providers .vaghta-provider-tabs::after {
    content: none;
}

#neighborhood-providers .vaghta-provider-tab,
#category-providers .vaghta-provider-tab {
    z-index: 1;
}

#neighborhood-providers .vaghta-provider-tab.is-active,
#category-providers .vaghta-provider-tab.is-active {
    transform: none;
}

.vaghta-provider-tab {
    position: relative;
    min-height: 50px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.vaghta-provider-tab:hover {
    color: #0f766e;
    background: #f0fdfa;
}

/* Use a strong selected state without changing the surrounding section surface. */
.vaghta-provider-tab.is-active {
    border-color: #0f766e;
    border-radius: 16px;
    background: #0f766e;
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 118, 110, .2);
    transform: translateY(-1px);
}

/* Gently pulse only the inactive tab so the alternative remains discoverable. */
.vaghta-provider-tab-attention {
    border-color: #99d5ca;
    color: #0f766e;
    animation: vaghta-provider-tab-pulse 2.4s ease-in-out infinite;
}

@keyframes vaghta-provider-tab-pulse {

    0%,
    100% {
        background-color: #fff;
        box-shadow: 0 0 0 0 rgba(15, 118, 110, 0);
    }

    50% {
        background-color: #dff8f2;
        box-shadow: 0 0 0 4px rgba(15, 118, 110, .08);
    }
}

/* Make a tab change feel responsive without shifting or recoloring the section. */
.vaghta-provider-panel-active {
    animation: vaghta-provider-panel-in .28s ease-out both;
}

@keyframes vaghta-provider-panel-in {
    from {
        opacity: .35;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 1024px) {
    .vaghta-provider-tabs {
        width: 560px;
        margin: -175px auto 49px;
    }

    #neighborhood-providers,
    #category-providers {
        padding-top: 116px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vaghta-provider-tab {
        transition: none;
    }

    .vaghta-provider-tab-attention {
        animation: none;
    }

    .vaghta-provider-panel-active {
        animation: none;
    }
}

.vaghta-organic-surface {
    overflow: hidden;
    background-color: #fffdfa;
    background-image:
        radial-gradient(circle at 0 20%, rgba(193, 232, 223, .36), transparent 25%),
        radial-gradient(circle at 100% 75%, rgba(253, 227, 181, .34), transparent 28%);
}

/* Match Swiper pagination to the organic teal visual system. */
#vaghta-customer-stories-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 3px;
    background: #9ddbd0;
    opacity: .55;
}

#vaghta-customer-stories-pagination .swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;
    background: #0f766e;
    opacity: 1;
}

/* Animate selected content blocks instead of moving entire homepage sections. */
main>section.vaghta-scroll-ready .vaghta-reveal-item {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
    transition-delay: 0s;
    will-change: opacity, transform;
}

main>section.vaghta-scroll-ready.is-in-view .vaghta-reveal-item {
    opacity: 1;
    transform: none;
    transition-delay: var(--vaghta-reveal-delay, 0s);
    will-change: auto;
}

/* Respect system motion preferences and keep all content immediately available. */
@media (prefers-reduced-motion: reduce) {
    main>section.vaghta-scroll-ready .vaghta-reveal-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* Keep botanical artwork subtle and spacious on desktop layouts. */
@media (min-width: 1024px) {

    /* Increase visibility uniformly without restoring heavy lower-section artwork. */
    body.home main>section.vaghta-has-botanical::after,
    body.front-page main>section.vaghta-has-botanical::after {
        background-size: 155px auto, 145px auto, 78px auto, 72px auto;
        opacity: .2;
    }
}