/* Griglia destinazioni (Content Block "top-destinations", migrato da Mask 2026-07-25): sostituisce
   il calcolo manuale di riga/altezza con aritmetica Fluid dell'originale ("{total - 2}",
   "{count} % 3") - lo stesso genere di espressione gia' rivelatosi inaffidabile altrove in questo
   progetto. Il browser gestisce da solo l'interruzione di riga.
   Masonry (2026-08-07, richiesto esplicitamente): CSS Grid (usato prima) forza tutte le colonne
   di una stessa riga alla stessa altezza - con "imageHeight" per card (per "rompere la simmetria")
   una card piu' alta allungava l'intera riga, lasciando spazio vuoto sotto le card piu' basse
   accanto, l'opposto di un effetto masonry. "columns" (multi-colonna CSS) impila invece ogni card
   nella colonna piu' corta disponibile, senza calcolo manuale di posizione - stesso principio
   "lascia fare al browser" del resto di questo file. "break-inside: avoid" evita che una card
   venga spezzata a meta' fra una colonna e la successiva. */
.ywh-destinations-grid {
    columns: 3;
    column-gap: 10px;
}
.ywh-destinations-grid-item {
    margin: 0 0 10px;
    break-inside: avoid;
}
@media (max-width: 991.98px) {
    .ywh-destinations-grid {
        columns: 2;
    }
}
@media (max-width: 575.98px) {
    .ywh-destinations-grid {
        columns: 1;
    }
}

/* Bug reale corretto (2026-08-07): il tema imposta ".destinations_content_inner" (style.css) come
   "position: absolute; z-index: 99" SOPRA la foto - pensato per centrare il titolo sull'immagine,
   ma essendo un elemento posizionato con z-index intercetta i click anche dove non c'e' testo
   visibile, coprendo di fatto il link sulla foto sottostante (confermato: HTML corretto, "<a>"
   presente, ma non cliccabile - nessun overlay visibile perche' lo sfondo e' trasparente). Fix
   standard per "div di overlay sopra un'immagine cliccabile, ma con un suo link interno da
   mantenere cliccabile" (es. il titolo): pointer-events:none sul contenitore, riattivato solo sui
   link veri e propri al suo interno. */
.destinations_content_inner {
    pointer-events: none;
}
.destinations_content_inner a {
    pointer-events: auto;
}

/* Bug reale corretto (2026-08-07, secondo giro - il fix sopra non bastava): ".img_animation::after"
   (style.css) e' l'overlay colorato che appare in hover ("visibility:hidden" a riposo, "visible" in
   hover) - MA senza pointer-events:none resta comunque un elemento hit-testabile largo quanto
   l'intera immagine (width/height:100%) proprio nel momento in cui serve cliccare: un click parte
   sempre da un hover, quindi nell'istante del click l'overlay e' gia' "visible" e intercetta
   l'evento al posto del link sottostante. Nessun rischio scoping globale (non per-content-block):
   ".img_animation" e' condivisa anche da "three-cta", che pero' non avvolge l'immagine in un link
   (solo un bottone CTA separato) - pointer-events:none su un overlay puramente decorativo e'
   corretto ovunque sia usato. */
.img_animation::after {
    pointer-events: none;
}

/* Barra di ricerca home con autocomplete (2026-07-26). */
.ywh-search-box {
    position: relative;
    z-index: 20;
    margin-top: -60px;
    padding: 1.5rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}
.ywh-search-box label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.ywh-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0.25rem 0 0;
    padding: 0.5rem 0;
    list-style: none;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    max-height: 320px;
    overflow-y: auto;
}
.ywh-search-suggestion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.ywh-search-suggestion:hover,
.ywh-search-suggestion:focus {
    background-color: #eef1f5;
}
.ywh-search-suggestion-location i {
    color: #f5a623;
}
.ywh-search-suggestion-hotel i {
    color: #1c2733;
}
.ywh-search-suggestion-name {
    font-weight: 600;
}
.ywh-search-suggestion-meta {
    color: #9aa5b1;
    font-size: 0.8rem;
    margin-left: auto;
}

.map_area {
    position: relative;
    width: 100%;
}

.map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.NOstriped-background {
    position: relative;
    background: linear-gradient(135deg, #fff 25%, #eef 0, #eef 50%, #fff 0, #fff 75%, #eef 0, #eef);
    background-size: 56.57px 56.57px; /* Regola le dimensioni delle strisce */
}

.NOstriped-background::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #fff 25%, #eef 0, #eef 50%, #fff 0, #fff 75%, #eef 0, #eef);
    background-size: 56.57px 56.57px; /* Regola le dimensioni delle strisce */
}

.main-responsive-nav .mean-container .mean-bar {
    z-index:9999;
    width: 75%;
    right: 0;
}

/* Pannello mobile: overlay fisso con scroll proprio SOLO da aperto (2026-08-07, richiesto
   esplicitamente: "se scrollo in basso si muove la pagina e non vedo le voci sotto") - di base
   ".mean-nav" (meanmenu.css, libreria vendor) e' "float:left" dentro ".mean-bar"
   (position:absolute, SOLO 55px di altezza dichiarata) - funzionava per un elenco corto (solo
   pagine, il caso originale), ma con le nostre sezioni aggiunte il contenuto puo' superare
   l'altezza dello schermo: senza una propria "position:fixed" + scroll, il pannello scorre via
   insieme al resto della pagina invece di restare raggiungibile. Gating su
   ".meanmenu-reveal.meanclose" (stesso segnale gia' usato altrove per le nostre sezioni,
   sincronizzato con lo stato reale che meanmenu si tiene per se stesso) cosi' da NON rendere
   ".mean-nav" fisso anche da chiuso (bloccherebbe altrimenti i click sulla pagina sottostante,
   anche a contenuto nascosto un elemento fixed intercetta comunque i click). width/right coerenti
   con ".mean-bar" sopra (stesso pannello a scomparsa da destra, solo ora scrollabile in altezza). */
.meanmenu-reveal.meanclose ~ .mean-nav {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    width: 75%;
    max-width: 320px;
    margin-top: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
}
/* Blocca lo scroll della pagina sotto il pannello aperto (vedi custom.js per il toggle di questa
   classe, agganciato al click sull'hamburger). */
.ywh-mobile-menu-open-lock {
    overflow: hidden;
}

.imagination_boxed:before {
    transform: translate(0%, 0%);
}
.destinations_content_inner h3 a,
.imagination_boxed h3 a {
    font-weight: 500;
}

.flight_Search_boxed {
    background: white;
    border: 2px solid #85C2FF;
}
.flight_Search_boxed p {
    color: #2D2D34;
}
.hidden-mobile {
    display: none;
}

@media (min-width: 992px) {
    .hidden-mobile {
        display: block !important;
    }
}
.hotdeals-cityROBY{
    display: block;
    background: #666666;
    width: 100%;
    padding-left: 20px;
    left: 0;
    opacity: 0.5;
}

@media (max-width: 1200px) {
    .navbar-area .main-responsive-nav .logo img,
    .navbar-area .main-navbar a img {
        /* +40% (2026-08-20, richiesto esplicitamente, coerente con l'ingrandimento desktop
           120px->168px in Header.html): prima 80px. */
        width: 112px;
        height: auto;
    }

    .navbar-area .main-navbar,
    .navbar-area .main-responsive-nav {
        padding: 10px 0;
    }

    .navbar-area .main-responsive-menu {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .navbar-area .main-responsive-menu .logo {
        flex: 1;
    }

    .navbar-area .main-responsive-menu .mean-bar {
        flex: 1;
    }

    .navbar-area .others-option-for-responsive .dot-menu .inner {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .tour_details_top_bottom {
        display: flex;
        flex-wrap: wrap;
    }
    .toru_details_top_bottom_item {
        flex-basis: 50%;
    }
    .toru_details_top_bottom_item:nth-child(odd) {
        justify-self: start;
        justify-content: start;
    }
    .toru_details_top_bottom_item:nth-child(even) {
        justify-self: start;
        justify-content: start;
    }
}

.navbar-area .logo a {
    /*filter: brightness(0) invert(1);*/
}
.flight_Search_boxed input.daterange {
    width: 100%;
}

.darkText.main_header_arae {
    position: initial;
}
/* Regola piu' specifica (7 classi) della "voci di menu... navy" generica sotto (4 classi, riga
   ~530) - su pagina dettaglio hotel (".darkText") vinceva sempre lei, testo ancora nero anche
   dopo il cambio colore globale (2026-08-20, causa reale del bug segnalato). Nata per un header
   trasparente su sfondo chiaro (mai piu' il caso: navbar sempre gialla, vedi sopra), colore
   allineato allo stesso navy del resto del sito. */
.darkText .navbar-area:not(.is-sticky) .main-navbar .navbar .navbar-nav .nav-item a,
.darkText .topbar-others-options li .language-option button,
.darkText .topbar-list li a {
    color: var(--header-text-color);
}
.darkText .navbar-area:not(.is-sticky) .logo a {
    filter: initial;
}
.darkText .topbar-others-options li .language-option .language-dropdown-menu {
    background: #eee;
}
.darkText .topbar-area {
    border-bottom: 1px solid #eee;
}

.pagination_area .pagination .current .page-link{
    z-index: 2;
    color: var(--white-color);
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.mapFullPage {
    height: calc(100vh - 40px);
    width: calc(100vw - 60px);
    margin: 20px;
}
@media (max-width: 768px) {
    .mapFullPage {
        height: calc(100vh - 20px);
        width: calc(100vw - 20px);
        margin: 10px;
    }
}
@media (max-width: 480px) {
    .mapFullPage {
        height: calc(100vh - 16px);
        width: calc(100vw - 16px);
        margin: 8px;
    }
}
.go-top.active {
    z-index: 99999;
}

@media (max-width: 768px) {
    .news_details_content_tops {
        margin-top: -20px;
    }
    .container-space {
        margin-top: 20px;
    }
}
.slick-slide img {
    padding: 5px;
}

.theme_search_form_area {
    box-shadow: 4px 14px 22px rgba(0, 0.4, 0.4, 0.4);
}
.cruise_search_item {
    box-shadow: 8px 8px 10px rgba(0, 0.4, 0.4, 0.4);
}
.search-results {
    list-style: none;
    padding: 0;
    margin-top: 5px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.search-results li {
    padding: 8px;
    cursor: pointer;
}

.search-results li:hover {
    background-color: #f0f0f0;
}

.frame-space-before-medium {
    padding-top: 50px;
}

.btn_navber {
    border: 1px solid var(--header-text-color);
    color: var(--header-text-color);
    margin-left: 5px;
}
.is-sticky .btn_navber {
    display: none;
}
.dropdown.language-option {
    z-index: 1000000;
}
.tour_details_top_bottom_icon {
    width: 2em;
}
.room_booking_right_side {
    width:75%;
}
textarea.form-control {
    min-height: calc(2.5em + (.75rem + 120px));
    margin-bottom:10px;
}
.input.checkbox {
    margin-top: 15px;
}
svg.leaflet-attribution-flag {
    display: none !important;
}

.custom-cluster .cluster-circle {
    width:18px;
    height:18px;
    border-radius:50%;
    background:#2F7FC4;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    color:white;
    position:relative;
    transition:all .2s ease;
}
/* hide number */
.custom-cluster .cluster-circle::after {
    content:"";
}
/* show number on hover */
.custom-cluster .cluster-circle:hover::after {
    content: attr(data-count);
}
.custom-cluster .cluster-circle:hover {
    transform:scale(1.15);
    box-shadow:0 0 0 4px rgba(133,194,255,0.3);
}

/* Bandiera nel selettore lingua (MenuLanguage.html): f:be.icon renderizza l'icona "flags-xx" in
   uno <span class="icon ...">, serve solo lo spazio verso il testo/le altre voci. */
.language-option .dropdown-toggle .lang-name .icon,
.language-dropdown-menu .dropdown-item .icon {
    margin-right: 6px;
    vertical-align: middle;
}

/* Header sempre giallo (2026-08-02), non piu' trasparente in cima e giallo solo dopo lo scroll:
   di base .navbar-area non ha background (trasparente), solo .is-sticky (aggiunta via JS su
   scroll, vedi custom.js) impostava var(--main-color) - qui lo si rende incondizionato. */
.navbar-area {
    background: var(--main-color);
}

/* Header non piu' "position:absolute" (2026-08-20, richiesto esplicitamente: la fascia navy va
   sotto l'header, non ci deve finire dietro/sotto). Base "navber.css" mette ".main_header_arae"
   in absolute perche' nasceva per galleggiare TRASPARENTE sopra un'immagine hero a piena altezza
   (vedi il vecchio "#common_banner" con "padding: 200px 0..." che compensava lo spazio, rimosso da
   Normalpage.html) - ora che l'header e' sempre giallo pieno e sotto c'e' un blocco navy opaco,
   niente piu' deve stare "sotto" l'header: lo si rimette nel normale flusso di pagina, come gia'
   faceva SOLO ".darkText" (dettaglio hotel, vedi regola sotto) e SOLO sotto un certo breakpoint
   (responsive.css) - qui diventa il comportamento di base per ogni tipo di pagina. */
.main_header_arae {
    position: initial;
}

/* Barra mobile sempre visibile con lingua + "Apply for new affiliation" (2026-08-20, vedi
   Header.html) - impilata in colonna, lingua sopra il bottone. Stile del pulsante lingua
   ricalcato dal vecchio ".topbar-others-options" (rimosso insieme a "topbar-area"), qui e' un
   contesto nuovo senza nessuna regola preesistente in navber.css da cui ereditare. */
.ywh-mobile-quickbar {
    row-gap: 10px;
}
.ywh-mobile-quickbar .language-option {
    padding: 0;
    position: relative;
}
.ywh-mobile-quickbar .language-option button {
    padding: 0 18px 0 0;
    background-color: transparent;
    border: none;
    color: var(--header-text-color);
    font-size: 14px;
    font-weight: 500;
}
.ywh-mobile-quickbar .language-option button::after {
    display: none;
}
.ywh-mobile-quickbar .language-option button::before {
    font-family: "Font Awesome 5 Free";
    content: "\f107";
    font-weight: 900;
    font-size: 13px;
    display: block;
    position: absolute;
    top: 2px;
    right: 0;
}
.ywh-mobile-quickbar .language-option .dropdown-menu[data-bs-popper] {
    right: 0 !important;
    left: auto !important;
}

/* Fascia titolo pagina (2026-08-20, richiesto esplicitamente, vedi Common/PageTitleBand.html) -
   sostituisce il vecchio banner con immagine di sfondo. Stile ul/li/a del breadcrumb ricalcato
   1:1 da ".common_bannner_text" (style.css) - stessa struttura Fluid (MenuBreadcrumbs.html),
   nessuna modifica li', solo il contenitore attorno e' cambiato. Padding base = pagine interne
   (top e bottom uguali); homepage cambia solo il bottom, vedi ".ywh-page-title-band--home" sotto. */
.ywh-page-title-band {
    background-color: #1a2c4e;
    padding: 80px 0;
    text-align: center;
}
.ywh-page-title-band--home {
    padding-bottom: 150px;
}
.ywh-page-title-band-title {
    color: var(--white-color);
    font-weight: 400;
    margin: 0;
}
.ywh-page-title-band ul {
    padding-top: 20px;
    margin: 0;
}
.ywh-page-title-band ul li {
    display: inline-block;
    color: var(--white-color);
    padding-left: 7px;
}
.ywh-page-title-band ul li:first-child {
    padding-left: 0;
}
.ywh-page-title-band ul li span {
    padding-right: 5px;
}
.ywh-page-title-band ul li span i {
    color: var(--white-color);
    font-size: 7px;
    position: relative;
    top: -2px;
    left: -3px;
}
.ywh-page-title-band ul li a {
    color: #ffffff91;
}
.ywh-page-title-band ul li a:hover {
    color: var(--main-color);
}

/* Voci del menu principale: colore/peso fissi richiesti (2026-08-02), non piu' bianco/300 pensato
   per un header trasparente su hero image. Colore aggiornato a "--header-text-color" (2026-08-20,
   richiesto esplicitamente: logo/voci di menu/scritte header tutte dello stesso navy). */
.main-navbar .navbar .navbar-nav .nav-item a {
    color: var(--header-text-color);
    font-weight: bold;
}

/* Pulsante lingua (testo iniettato da custom.js copiando l'<a> attivo, vedi commento li'):
   stesso colore del resto del menu. ".topbar-others-options" non piu' in pagina (topbar-area
   rimossa, 2026-08-20) - selettore lasciato qui comunque, innocuo, il selettore del nuovo punto
   in cui il selettore lingua vive ora (dentro ".others-options" di MenuPrimary.html) e' gia'
   coperto da ".main-navbar .navbar .others-options ..." sotto. */
.topbar-others-options li .language-option button,
.main-navbar .navbar .others-options .option-item .language-option button,
.others-option-for-responsive .option-inner .others-options .option-item .language-option button {
    color: var(--header-text-color);
}

/* Freccia mancante nel selettore lingua (2026-08-20, segnalato: "non si vede freccia di
   apertura sottovoci") - "navber.css" disegna la freccia di questo contesto con
   "font-family: remixicon" (content "\ea4e"), ma il font remixicon non risulta caricato da
   nessuna parte nel tema (nessun @font-face/link trovato) - probabilmente non ha MAI funzionato
   qui, solo mai notato perche' prima di ora nessun selettore lingua veniva renderizzato in questo
   punto del markup (era nella vecchia "topbar-area", che invece usa Font Awesome, gia' caricato
   e funzionante ovunque nel sito). Si riusa qui lo stesso approccio Font Awesome, solo
   "content"/"font-family"/"font-weight" sovrascritti - "display"/"position"/"top"/"right" restano
   quelli gia' impostati da navber.css sullo stesso selettore. */
.main-navbar .navbar .others-options .option-item .language-option button::before,
.others-option-for-responsive .option-inner .others-options .option-item .language-option button::before {
    font-family: "Font Awesome 5 Free";
    content: "\f107";
    font-weight: 900;
}

/* Content block "featured-hotels" (2026-08-05): il tema di base ha solo "width:100%" sull'
   immagine della card ("theme_two_box_img img" in style.css), nessuna altezza fissa - ogni foto
   con proporzioni diverse produceva card di altezza diversa, richiesto uniformarle con un crop.
   Scoped su ".ywh-featured-hotel-img" (non su ".theme_two_box_img" da solo, classe generica del
   tema che potrebbe tornare utile altrove senza questo vincolo). */
.ywh-featured-hotel-img {
    height: 240px;
}
.ywh-featured-hotel-img img,
.ywh-featured-hotel-img .ywh-image-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ywh-featured-hotel-img .ywh-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eef1f5;
    color: #9aa5b1;
}
.ywh-featured-hotel-img .ywh-image-placeholder i {
    font-size: 2.5rem;
}

/* Content block "browse-by-theme" (2026-08-10): tile autogenerate da THEME_DEFINITIONS, nessuna
   immagine curata dall'editor (a differenza di featured-hotels/top-destinations) - icona +
   etichetta su sfondo neutro, stessa palette (--main-color) del resto del tema.
   "auto-fit, minmax(180px, 1fr)" invece di un numero fisso di colonne: se in futuro si aggiunge un
   tema a THEME_DEFINITIONS (ywh_catalog), la tile compare qui senza dover toccare questo CSS. */
.ywh-theme-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.ywh-theme-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    background-color: #eef1f5;
    border-radius: 8px;
    text-align: center;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease;
}
.ywh-theme-tile:hover,
.ywh-theme-tile:focus {
    background-color: #e2e7ee;
    color: inherit;
}
.ywh-theme-tile i {
    font-size: 2rem;
    color: var(--main-color, #ffb900);
}

/* Content Block "pricing-plans" (2026-08-14) - sostituisce l'elemento CType "html" con
   markup/CSS/JS incollato a mano (pagina "Contact us (Accomodation)", frame "c78" in
   produzione): stessa griglia di box (auto-fit, minsize 280px) e stessa evidenziazione del
   piano selezionato (classe "is-active", vedi custom.js), solo rinominata con prefisso "ywh-"
   per coerenza con le altre classi custom del tema invece delle classi generiche originali
   (".plan", ".plan-title", ecc.) che rischiavano di collidere con altro CSS del progetto. */
.ywh-pricing-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.ywh-pricing-plan {
    position: relative;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.25s ease, color 0.25s ease;
}
.ywh-pricing-plan:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
/* Piano evidenziato ("highlighted", 2026-08-14, richiesto esplicitamente: dare una gerarchia
   visiva ai box, prima identici finche' non se ne cliccava uno) - bordo/rilievo permanenti,
   indipendenti dallo stato "is-active" (click) sotto, che resta lo stesso per qualunque box. */
.ywh-pricing-plan-highlighted {
    border-color: var(--main-color, #ffb900);
    border-width: 2px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.ywh-pricing-plan-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--main-color, #ffb900);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.ywh-pricing-plan-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--main-color, #ffb900);
}
.ywh-pricing-plan-price {
    font-size: 32px;
    color: #333;
    margin-bottom: 20px;
}
.ywh-pricing-plan-price-old {
    text-decoration: line-through;
    margin-bottom: 0;
}
.ywh-pricing-plan-price .small {
    font-size: 14px;
}
.ywh-pricing-plan-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}
.ywh-pricing-plan-features li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}
.ywh-pricing-plan-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--main-color, #ffb900);
    font-weight: bold;
}
.ywh-pricing-plan-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background-color: var(--main-color, #ffb900);
    color: #fff;
    border: none;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.ywh-pricing-plan.is-active {
    background-color: #0d6efd;
    color: #ffffff;
}
.ywh-pricing-plan.is-active .ywh-pricing-plan-title,
.ywh-pricing-plan.is-active .ywh-pricing-plan-price,
.ywh-pricing-plan.is-active .ywh-pricing-plan-features li {
    color: #ffffff;
}
.ywh-pricing-plan.is-active .ywh-pricing-plan-button {
    background-color: #ffffff;
    color: #0d6efd;
    font-weight: bold;
}