/* ==========================================================================
   Virasat Design System — token-based skin layer
   Source: Figma "Virasat Design System" (node 54:61)
   https://www.figma.com/design/xWpHAcjUfuhMtFMoaGrffr/Hamari-Virasat

   This file is purely additive: it re-themes colors, typography, buttons,
   cards and badges by overriding the classes the theme already uses
   sitewide. No PHP/Vue/JS logic is touched, so functionality is unaffected.

   Enqueued last (see inc/design-system.php, priority 10000 on
   wp_enqueue_scripts) so it wins the cascade without having to hand-edit
   the compiled app.min.css / old-app.css / colors/*.css files.
   ========================================================================== */

/* Values that exist in the Figma design system point at its tokens (virasat-tokens.css, loaded
   first); the fallbacks are the same values. Values with no Figma equivalent, or that still differ
   from it (text-primary / secondary, radius md / lg), keep their original numbers: see
   plans/design-system.md before changing them, they affect every WilCity page. */
:root {
    --vr-color-bg-page: var(--vh-cream, #fbf6ec);                 /* cream/50 */
    --vr-color-surface-subtle: #f1e6d4;
    --vr-color-surface-elevated: var(--vh-white, #ffffff);        /* text/white */
    --vr-color-text-primary: #241b16;                             /* Figma text/heading is #212322 */
    --vr-color-text-secondary: #766757;                           /* Figma text/body is #5c5953 */
    --vr-color-text-inverse: var(--vh-white, #ffffff);            /* text/white */
    --vr-color-border-subtle: #d9c2a0;
    --vr-color-border-accent: var(--vh-gold-500, #c8953c);        /* color/gold-500 */
    --vr-color-action-primary: var(--vh-gold-500, #c8953c);       /* color/gold-500 */
    --vr-color-action-hover: #a8732b;
    --vr-color-action-on-primary: var(--vh-white, #ffffff);       /* text/white */
    --vr-color-brand-deep: #651816;

    --vr-radius-sm: var(--vh-radius-sm, 8px);                     /* radius/sm */
    --vr-radius-md: 12px;                                         /* Figma radius/md is 16px */
    --vr-radius-lg: 18px;                                         /* Figma radius/lg is 24px */
    --vr-radius-xl: var(--vh-radius-lg, 24px);                    /* radius/lg */
    --vr-radius-pill: var(--vh-radius-pill, 999px);

    --vr-shadow-sm: 0 2px 4px -2px rgba(0, 0, 0, .1);
    --vr-shadow-lg: 0 8px 22px 0 rgba(0, 0, 0, .08);

    --vr-font-devanagari: 'Noto Sans Devanagari', 'Inter', sans-serif;
    --vr-font-latin: 'Inter', sans-serif;
    --vr-font-accent: 'Cormorant Garamond', serif;
}

/* -- Typography ------------------------------------------------------------
   Scoped to `body` (inherited default) and to components that set their own
   explicit font-family, so icon fonts (Line Awesome / FontAwesome, which set
   font-family on their own classes) are never affected by inheritance. */

body {
    font-family: var(--vr-font-devanagari) !important;
}

.wil-btn {
    font-family: var(--vr-font-latin) !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
}


/* -- Sitewide accent color -------------------------------------------------
   Mirrors every selector in assets/production/css/colors/default.css (the
   theme's own primary-color mechanism, see admin/public/class.WilokeFrontPage.php)
   with the primary hex swapped for the Virasat accent. Same selectors, same
   !important usage as the original — only the color changes. */

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight,
.swiper-button-prev-custom:hover i,.swiper-button-next-custom:hover i,.widget-post-item__meta i,.color-primary-meta i{
    color:#c8953c;
}
@media (min-width:993px){
    a:hover{
        color:#c8953c;
    }
}
.color-primary{
    color:#c8953c !important;
}
@media (min-width:993px){
    .color-primary--hover:hover i,.color-primary--hover:hover{
        color:#c8953c !important;
    }
}
@media (min-width:993px){
    .bg-color-primary-span--hover.active span,.bg-color-primary-span--hover:hover span{
        background:#c8953c !important;
    }
}
.select2-selection--multiple:after,.select2-selection--single:after,.select2-container--default .select2-results__option--highlighted[aria-selected],.bg-color-primary,.bg-color-primary--hover:hover,input:checked ~ .bg-color-primary--checked-after:after,input:checked ~ .bg-color-primary--checked,input:checked ~ .bg-color-primary--checked-after .checkbox-iconBg,.checkbox-border,.bg-color-primary--after:after{
    background-color:#c8953c !important;
}
.bd-color-primary,.bd-color-primary--hover:hover,input:checked ~ .bd-color-primary--checked{
    border-color:#c8953c !important;
}
.nav-active > a{
    border-bottom-color:#c8953c !important;
}
.bg-gradient-3{
    background-image:linear-gradient(90deg,#c8953c 0%,#f9785f 100%);
}
mark,.mark{
    background-color:#c8953c;
}
.checkbox_icon__28tFk:before{
    background-color:#c8953c;
}
.checkbox_text__3Go1u a{
    color:#c8953c;
}
.field_style2__2Znhe .select2-selection--multiple:after,.field_style3__3qkPx .select2-selection--multiple:after,.field_style2__2Znhe .select2-selection--single:after,.field_style3__3qkPx .select2-selection--single:after{
    background-color:#c8953c;
}
.js-slider.ui-slider .ui-slider-range-min{
    background-color:#c8953c;
}
.js-slider.ui-slider .ui-slider-handle{
    background-color:#c8953c;
}
.js-slider.ui-slider .ui-state-default,.js-slider.ui-slider .ui-widget-content .ui-state-default,.js-slider.ui-slider .ui-widget-header .ui-state-default,.js-slider.ui-slider .ui-button,.js-slider.ui-slider html .ui-button.ui-state-disabled:hover,.js-slider.ui-slider html .ui-button.ui-state-disabled:active{
    background-color:#c8953c;
    border-color:#c8953c;
}
.rating-02_primary__2C54h{
    color:#c8953c;
}
.rating-02_bgPrimary__2iYge{
    background-color:#c8953c;
}
.swiper-pagination-bullet-active{
    background-color:#c8953c;
}
.form-submit button[type="submit"]{
    background-color:#c8953c;
}
.form-submit button[type="submit"]:hover{
    color:#c8953c;
}
.utility-meta_primary__2xTvX{
    border-color:#c8953c;
    color:#c8953c;
}
.utility-meta_primary__2xTvX:focus{
    border-color:#c8953c;
    color:#c8953c;
}
.alert_content__1ntU3 a{
    color:#c8953c;
}
@media (min-width:993px){
    .dropdown_threeDots__3fa2o:hover .dropdown_dot__3I1Rn{
        background-color:#c8953c;
    }
}
.dropdown_threeDots__3fa2o.active .dropdown_dot__3I1Rn{
    background-color:#c8953c;
}
.heading_light__3ftVg .heading_title__1bzno{
    color:#c8953c;
}
.icon-box-3_module__Z77Cu{
    background-color:#c8953c;
}
.nav-tab--detailTop li.active a,.nav-tab--detailTop li:hover a{
    color:#c8953c;
}
.nav-tab--detailTop li.active a:after,.nav-tab--detailTop li:hover a:after{
    background-color:#c8953c;
}
.pagination_pageItem__3SatM.current .pagination_pageLink__2UQhK{
    color:#c8953c;
}
.post_module__3uT9W.sticky:before{
    color:#c8953c;
}
.social-icon_item__3SLnb:hover [class*="link"]{
    color:#c8953c;
}
.social-icon_style-2__17BFy .social-icon_item__3SLnb:hover [class*="link"]{
    background-color:#c8953c;
}
.utility-box-1_arrowRight__uwhMc .utility-box-1_content__3jEL7{
    background-color:#c8953c;
}
.utility-box-1_arrowRight__uwhMc .utility-box-1_content__3jEL7:before{
    border-left-color:#c8953c;
}
.wilTab_nav__1_kwb .line{
    background-color:#c8953c;
}
.wilTab_nav__1_kwb i{
    color:#c8953c;
}
.wilTab_nav__1_kwb .active{
    color:#c8953c;
}
.dashboard-nav_item__2798B.active .dashboard-nav_link__2BmK9{
    color:#c8953c;
}
.image-radio-checkbox_icon__1LtKv i{
    background-color:#c8953c;
}
.list-utility_message__JT9x8 .list-utility_list__1DzGk.active .list-utility_link__3BRZx{
    border-left-color:#c8953c;
}
.list_item__3YghP.active .list_link__2rDA1{
    color:#c8953c;
}
.list_horizontal__7fIr5 .list_item__3YghP.active .list_link__2rDA1{
    border-bottom-color:#c8953c;
}
.list_social__31Q0V .list_icon__2YpTp [class*="link"]{
    color:#c8953c;
}
.line-loading_loader__FjIcM{
    background-color:#c8953c;
}
.product_label__3bekf span{
    background-color:#c8953c;
}
.sort-box_item__1156W.ui-sortable-helper{
    border-left:2px solid #c8953c;
}
.sort-box_item__1156W.sortable-chosen{
    border-left:2px solid #c8953c;
}
.header_loginHead__3HoVP.active{
    color:#c8953c;
}
.wil-nav .nav-menu li:hover > a,.wil-nav .nav-menu li.current-menu-item > a,.wil-nav .nav-menu li.current-menu-parent > a{
    color:#c8953c;
}
.hero_highlightItem__DZRDM i{
    color:#c8953c;
}
.listing-detail_rightItem__2CjTS .wil-btn.active{
    color:#c8953c;
    border-color:#c8953c;
}
#wilcity-map-auto-refresh-checkbox:checked ~ .wrapper-small:after{
    background-color:#c8953c;
    border-color:#c8953c;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active{
    border-color:#c8953c !important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active i{
    color:#c8953c;
}
.ui-tabs .ui-tabs-nav li:before{
    background-color:#c8953c;
}
.owl-theme .owl-controls .owl-buttons div:hover:before{
    color:#c8953c;
}
.owl-theme .owl-controls .owl-page span{
    background-color:#c8953c;
}
.ui-widget-header{
    background-color:#c8953c;
    border-color:#c8953c;
}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus{
    color:#c8953c;
}
.ui-state-highlight,.ui-widget-header .ui-state-highlight{
    color:#c8953c;
}
.wil-btn--primary{
    background-color:#c8953c;
}
.wil-btn--primary:hover{
    color:#fff;
}
.wil-btn--primary:focus{
    background-color:#c8953c;
}
.wil-btn--primary2,.wil-btn--secondary,.wil-btn--facebook,.wil-btn--twitter,.wil-btn--google{
    background-color:#c8953c;
}
.wil-btn--primary2:hover,.wil-btn--secondary:hover,.wil-btn--facebook:hover,.wil-btn--twitter:hover,.wil-btn--google:hover{
    background-color:#c8953c;
}
.wil-btn--primary2:focus,.wil-btn--secondary:focus,.wil-btn--facebook:focus,.wil-btn--twitter:focus,.wil-btn--google:focus{
    background-color:#c8953c;
}
.wil-btn--light:hover{
    color:#c8953c;
}
.wil-btn--border:hover{
    color:#c8953c;
    border-color:#c8953c;
}
.wpcf7-form input[type="submit"]{
    background-color:#c8953c;
}
.wpcf7-form input[type="submit"]:hover{
    color:#c8953c;
}
.comment-form p:not(.comment-subscription-form):after,.comment-form p:not(.comment-form-cookies-consent):after{
    background-color:#c8953c;
}
.comment-form .comment-subscription-form input:checked ~ label:before,.comment-form .comment-form-cookies-consent input:checked ~ label:before{
    background-color:#c8953c;
    border-color:#c8953c;
}
ul.page-numbers .current{
    color:#c8953c;
}
.post-password-form input[type='submit']{
    background-color:#c8953c;
}
.post-password-form input[type='submit']:hover{
    color:#c8953c;
}
.wil-404-content .search-form.active label:after,.widget_search .search-form.active label:after{
    color:#c8953c;
}
.widget_rss li .rsswidget:hover{
    color:#c8953c;
}
[class*="footer_widgets"] .widget_rss li .rsswidget:hover{
    color:#c8953c;
}
.wilcity-link-pages > span:hover,.wilcity-link-pages a:hover{
    background-color:#c8953c;
}
.wilcity-link-pages > span{
    background-color:#c8953c;
}

/*Dokan color*/
.dokan-dashboard .ui-datepicker .ui-datepicker-header {
    background-color: #c8953c;
}
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover a,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active a {
    color: #c8953c;
}
.dokan-dashboard .dokan-dashboard-content article.dashboard-content-area .dashboard-widget.products .pull-right a {
    color: #c8953c;
}
.dokan-product-edit header.dokan-dashboard-header h1.entry-title a.view-product,
.form-submit input[type="submit"].submit,
.dokan-form-group .btn.btn-primary,
.dokan-form-inline input[type="submit"].add_note.btn,
input[type="submit"].dokan-btn-theme, a.dokan-btn-theme, .dokan-btn-theme {
    background-color: #c8953c !important;
    border-color: #c8953c;
}
.form-submit input[type="submit"].submit:hover,
.form-submit input[type="submit"].submit:focus,
.form-submit input[type="submit"].submit:active,
.dokan-form-group .btn.btn-primary:hover,
.dokan-form-group .btn.btn-primary:focus,
.dokan-form-group .btn.btn-primary:active,
.dokan-form-inline input[type="submit"].add_note.btn:hover,
.dokan-form-inline input[type="submit"].add_note.btn:focus,
.dokan-form-inline input[type="submit"].add_note.btn:active,
input[type="submit"].dokan-btn-theme:hover,
a.dokan-btn-theme:hover, .dokan-btn-theme:hover,
input[type="submit"].dokan-btn-theme:focus,
a.dokan-btn-theme:focus, .dokan-btn-theme:focus,
input[type="submit"].dokan-btn-theme:active,
a.dokan-btn-theme:active, .dokan-btn-theme:active,
input[type="submit"].dokan-btn-theme.active,
a.dokan-btn-theme.active, .dokan-btn-theme.active,
.open .dropdown-toggleinput[type="submit"].dokan-btn-theme,
.open .dropdown-togglea.dokan-btn-theme,
.open .dropdown-toggle.dokan-btn-theme,
input[type="submit"].dokan-btn-theme:hover,
a.dokan-btn-theme:hover, .dokan-btn-theme:hover {
    color: #c8953c;
}
.dokan-orders-content .dokan-orders-area ul.order-statuses-filter li.active a,
ul.subsubsub li.active a {
    color: #c8953c;
}
.dokan-orders-area > .dokan-btn {
    background-color: #c8953c;
}
.woocommerce-breadcrumb a {
    color: #c8953c;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background-color: #c8953c;
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
    color: #c8953c;
}
.woocommerce .woocommerce-breadcrumb a {
    color: #c8953c;
}
.woocommerce ul.products li.product .button:before {
    color: #c8953c;
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title {
    color: #c8953c;
}
.woocommerce nav.woocommerce-pagination ul li span {
    color: #c8953c;
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    color: #c8953c;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 2px solid #c8953c;
    color: #c8953c;
}
.yith-wcwl-wishlistaddedbrowse a:hover,
.yith-wcwl-wishlistexistsbrowse a:hover,
.yith-wcwl-add-button a.add_to_wishlist:hover {
    color: #c8953c;
}
.slick-prev:hover:before,
.slick-next:hover:before {
    color: #c8953c;
}
#yith-wcwl-popup-message {
    background-color: #c8953c;
}

/*booking*/
.wc-bookings-date-picker .ui-datepicker-header {
    background-color: #c8953c;
    border-color: #c8953c;
}
.wc-bookings-date-picker .ui-state-highlight,
.wc-bookings-date-picker .ui-widget-content .ui-state-highlight,
.wc-bookings-date-picker .ui-widget-header .ui-state-highlight {
    color: #c8953c !important;
}
.wc-bookings-date-picker .ui-datepicker td.bookable.ui-datepicker-today a {
    color: #c8953c !important;
}
.wc-bookings-date-picker .ui-datepicker td.ui-datepicker-today .ui-state-default {
    color: #c8953c !important;
}
.content-box_body__3tSRB .woocommerce-Price-amount.amount,
.wc-bookings-booking-cost .woocommerce-Price-amount.amount {
    color: #c8953c;
}
.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled:hover,
.woocommerce #respond input#submit.alt:disabled[disabled],
.woocommerce #respond input#submit.alt:disabled[disabled]:hover,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce a.button.alt:disabled,
.woocommerce a.button.alt:disabled:hover,
.woocommerce a.button.alt:disabled[disabled],
.woocommerce a.button.alt:disabled[disabled]:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled:hover,
.woocommerce input.button.alt:disabled[disabled],
.woocommerce input.button.alt:disabled[disabled]:hover {
    background-color: #c8953c;
}

/*cart*/
.mini_cart_item .quantity .woocommerce-Price-amount.amount {
    color: #c8953c !important;
}
.woocommerce-mini-cart__buttons.buttons .button.checkout.wc-forward {
    background-color: #c8953c !important;
}
.woocommerce-mini-cart__buttons.buttons .button.checkout.wc-forward:hover {
    color: #c8953c !important;
}

/*Heading Style3*/
.heading_style3__1gEsd .heading_mask__pcO5T {
    color: #c8953c;
}

.heading_style3__1gEsd .heading_mask__pcO5T:after {
    border-bottom-color: #c8953c;
}

/*Heading Ribbon*/
.heading_ribbon__2Jt9F .heading_mask__pcO5T {
    background-color: #c8953c;
}

.heading_ribbon__2Jt9F .heading_mask__pcO5T:after {
    border-color: #c8953c transparent #c8953c #c8953c;
}

.heading_ribbon__2Jt9F .heading_mask__pcO5T span:before {
    border-color: #c8953c #c8953c #c8953c transparent;
}

.wilcity-view-all {
    border-color: #c8953c;
    color: #c8953c;
}

.wilcity-view-all:hover {
    background-color: #c8953c;
}

.log-reg-template_bg__7KwPs {
    background-color: #c8953c;
}

.rtl .list-utility_message__bTp6V .list-utility_list__3LMUC.active .list-utility_link__1Hkuu {
    border-right-color: #c8953c;
}

.filter_button__lo852.active {
    background-color: #c8953c;
    border-color: #c8953c;
}

.filterType3_item__2FH4G [class*='inputcheck']:checked ~ [class*='text']:after {
    border-color: #c8953c;
}

.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab.vc_active>a {
    border-bottom-color: #c8953c !important;
    color: #c8953c !important;
}

.wpb-js-composer .vc_tta.vc_tta-spacing-1 .vc_tta-panel.vc_active .vc_tta-panel-heading {
    border-bottom-color: #c8953c !important;
}

.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel.vc_active .vc_tta-panel-title>a {
    color: #c8953c !important;
}

.woocommerce-MyAccount-navigation li.is-active a {
    color: #c8953c;
}
.term-grid-title a {
    background-color: #c8953c;
}
.wil-view-all,
.wilcity-view-all {
    border-color: #c8953c;
    color: #c8953c;
}
.wil-view-all:hover, .wilcity-view-all:hover {
    background-color: #c8953c;
}
.vue-treeselect.vue-treeselect--open.vue-treeselect--open-below .vue-treeselect__control {
    border-bottom-color: #c8953c !important;
}
.vue-treeselect__option .vue-treeselect__label-container:hover .vue-treeselect__checkbox--unchecked {
    border-color: #c8953c !important;
}
.vue-treeselect__checkbox-container .vue-treeselect__checkbox--checked {
    border-color: #c8953c !important;
    background: #c8953c !important;
}
.mx-table-date .today {
    color: #c8953c !important;
}
.mx-calendar-content .cell.active {
    background-color: #c8953c !important;
}
.mx-btn:hover {
    border-color: #c8953c !important;
    color: #c8953c !important;
}
.filter_button__lo852.wil-btn--primary:hover,
.filter_button__lo852.wil-btn--primary:focus {
    background-color: #c8953c;
}
.vue-js-switch.toggled .v-switch-core {
    background-color: #c8953c !important;
}
.searchbox_wrap__37JXq .autosuggest__results,
.searchbox_searchInput__2p4ds div[class*=wrap] {
    border-color: #c8953c;
}
.searchbox_searchButton__1c9iK .wil-btn--primary {
    background-color: #c8953c;
    color: #fff;
}
.searchbox_searchButton__1c9iK .wil-btn--primary:after {
    border-left-color: #c8953c;
}
.searchbox_searchButton__1c9iK .wil-btn--primary:focus, .searchbox_searchButton__1c9iK .wil-btn--primary:hover {
    background-color: #c8953c;
    color: #fff;
}

.vue-treeselect__checkbox-container .vue-treeselect__checkbox-container .vue-treeselect__checkbox--checked {
    border-color: #c8953c !important;
    background-color: #c8953c !important;
}


/* -- Buttons: pill shape + Virasat palette ---------------------------------
   `.wil-btn--round` is the modifier most CTAs across the theme already use
   (header, search, forms, single listing) — switching its radius to a pill
   restyles those buttons sitewide without touching any template markup. */

.wil-btn--round,
.wil-btn--pill {
    border-radius: var(--vr-radius-pill) !important;
}

.wil-btn--primary,
.wil-btn--primary2 {
    background-color: var(--vr-color-action-primary) !important;
    border-color: var(--vr-color-action-primary) !important;
    color: var(--vr-color-action-on-primary) !important;
}

.wil-btn--primary:hover,
.wil-btn--primary:focus,
.wil-btn--primary2:hover,
.wil-btn--primary2:focus {
    background-color: var(--vr-color-action-hover) !important;
    border-color: var(--vr-color-action-hover) !important;
    color: var(--vr-color-action-on-primary) !important;
}

.wil-btn--secondary {
    background-color: var(--vr-color-surface-elevated) !important;
    border: 1px solid var(--vr-color-border-accent) !important;
    color: var(--vr-color-text-primary) !important;
}

.wil-btn--secondary:hover,
.wil-btn--secondary:focus {
    background-color: var(--vr-color-surface-subtle) !important;
    color: var(--vr-color-text-primary) !important;
}

.wil-btn--light {
    background-color: var(--vr-color-bg-page) !important;
    color: var(--vr-color-brand-deep) !important;
}

.wil-btn--light:hover {
    background-color: var(--vr-color-surface-subtle) !important;
    color: var(--vr-color-brand-deep) !important;
}

.wil-btn--border {
    border-color: var(--vr-color-border-accent) !important;
    color: var(--vr-color-text-primary) !important;
}

.wil-btn--border:hover,
.wil-btn--border:focus {
    background-color: var(--vr-color-surface-subtle) !important;
    border-color: var(--vr-color-brand-deep) !important;
    color: var(--vr-color-brand-deep) !important;
}

/* -- Cards: warm elevation + rounded corners --------------------------- */

.wilcity-listing-slider,
[class*="listing_module__"] {
    border-radius: var(--vr-radius-lg) !important;
    box-shadow: var(--vr-shadow-sm) !important;
}

.wil-shadow {
    box-shadow: var(--vr-shadow-sm) !important;
}

/* -- Badges --------------------------------------------------------------
   Trust/verification semantics (blue) are kept intentionally distinct from
   the brand accent — only the corner radius is unified with the rest of
   the pill-shaped interaction language. */

.wil-verified {
    border-radius: var(--vr-radius-pill) !important;
}


/* -- Hero section ------------------------------------------------------
   inc/front-hero.php renders markup styled by these rules, which already
   exist in assets/production/css/app.css (lines 21623-22018) but were never
   carried over into app.min.css, the file actually wp_enqueue_style'd (see
   configs/config.frontend.php). Re-declared here so they actually apply. */

.wilcity-figma-hero {
    position: relative;
    overflow: hidden;
    background-color: #fbf6ec;
}

.wilcity-figma-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: sepia(.35) saturate(1.3) brightness(.95) hue-rotate(-8deg);
}

.wilcity-figma-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #fbf6ec 0%, #fbf6ec 42%, rgba(251, 246, 236, .85) 52%, rgba(251, 246, 236, 0) 65%);
}

.wilcity-figma-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 80px;
    min-height: 660px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wilcity-figma-hero__content {
    /* Wide enough for the search bar's 3 elements to sit on one line; the
       headline (manually line-broken) and .wilcity-figma-hero__desc (its
       own 440px cap) don't stretch to fill this, so they stay readable. */
    max-width: 660px;
}

.wilcity-figma-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c8953c;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.wilcity-figma-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #c8953c;
    display: inline-block;
    flex-shrink: 0;
}

.wilcity-figma-hero__title {
    color: #1a0800;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
    margin: 8px 0 16px;
}

.wilcity-figma-hero__desc {
    color: #3e2a1a;
    font-size: 16px;
    line-height: 1.7;
    max-width: 440px;
    margin: 0 0 24px;
}

.wilcity-figma-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.wilcity-figma-hero__cta-primary {
    background-color: #651816;
    color: #fff;
    padding: 13px 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 3px rgba(0, 0, 0, .1), 0 2px 2px rgba(0, 0, 0, .1);
}

.wilcity-figma-hero__cta-primary:hover,
.wilcity-figma-hero__cta-primary:focus {
    color: #fff;
    opacity: .92;
}

.wilcity-figma-hero__cta-secondary {
    background-color: rgba(255, 255, 255, .7);
    border: 1px solid rgba(200, 149, 60, .6);
    color: #4a2c1d;
    padding: 12px 25px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.wilcity-figma-hero__cta-secondary:hover,
.wilcity-figma-hero__cta-secondary:focus {
    color: #4a2c1d;
    background-color: rgba(255, 255, 255, .9);
}

/* ============================================================================
   Hero search panel — rebuilt as a spacious card instead of a single cramped
   pill. The widget itself (tabs, fields, Region dropdown, button) is a
   compiled Vue app mounted by wilcity_sc_render_hero_search_form() — its
   internal markup/behavior is untouched, only its presentation is restyled.
   Giving it real room fixes label clipping and dropdown sizing at the root,
   instead of the earlier flex-ratio/font-size fixes that fought a too-small
   pill (removed below in favor of this layout). ========================= */

.wilcity-figma-hero__search {
    max-width: 100%;
    margin-bottom: 20px;
    background-color: var(--vr-color-surface-elevated);
    border: 1px solid var(--vr-color-border-subtle);
    border-radius: var(--vr-radius-xl);
    box-shadow: var(--vr-shadow-lg);
    padding: 18px 20px 20px;
}

/* Without this, `flex-basis` on the field boxes below refers to their
   content box only — their own padding/border then add on top of it,
   silently blowing the row's width budget and forcing an unwanted wrap
   (the bug that made the two fields stack with the button orphaned next
   to just the bottom one). */
.wilcity-figma-hero__search,
.wilcity-figma-hero__search *,
.wilcity-figma-hero__search *::before,
.wilcity-figma-hero__search *::after {
    box-sizing: border-box;
}

.wilcity-figma-hero__search .wil-hero-form-wrapper {
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.wilcity-figma-hero__search .wil-tab__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    gap: 4px;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--vr-color-border-subtle);
}

.wilcity-figma-hero__search .wil-tab__nav li {
    list-style: none;
}

.wilcity-figma-hero__search .wil-tab__nav a {
    display: block;
    padding: 9px 18px;
    font-size: 13px;
    border-radius: var(--vr-radius-pill);
    color: var(--vr-color-text-secondary);
    white-space: nowrap;
    text-decoration: none;
}

.wilcity-figma-hero__search .wil-tab__nav a.active {
    background-color: var(--vr-color-surface-subtle);
    color: var(--vr-color-brand-deep);
    font-weight: 700;
}

.wilcity-figma-hero__search .wil-tab__content,
.wilcity-figma-hero__search .hero_form__1ewus {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* All 3 elements (title search, region, button) sit on one line. The
   hero content column was widened (see .wilcity-figma-hero__content)
   specifically to give this room — with box-sizing: border-box (above)
   the flex math is now exact, not marginal, so this doesn't regress back
   to the earlier wrap bug. The title field gets a larger flex share since
   its label ("Search By Listing Title?") is longer than "Region". */

.wilcity-figma-hero__search .hero_form__1ewus .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.wilcity-figma-hero__search .hero_form__1ewus [class*="col-"] {
    padding: 0;
}

.wilcity-figma-hero__search .hero_form__1ewus .col-md-9 {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.wilcity-figma-hero__search .hero_form__1ewus .col-md-9 > .row {
    flex: 1;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
    width: 100%;
    min-width: 0;
}

.wilcity-figma-hero__search .hero_form__1ewus .col-md-6 {
    min-width: 0;
    background-color: var(--vr-color-bg-page);
    border: 1px solid var(--vr-color-border-subtle);
    border-radius: var(--vr-radius-md);
    padding: 8px 14px;
}

.wilcity-figma-hero__search .hero_form__1ewus .col-md-6:first-child {
    flex: 1.6 1 0;
}

.wilcity-figma-hero__search .hero_form__1ewus .col-md-6:last-child {
    flex: 1 1 0;
}

.wilcity-figma-hero__search .hero_form__1ewus .col-md-3 {
    flex: 0 0 auto;
    display: flex;
}

.wilcity-figma-hero__search .hero_form__1ewus .col-md-3 .wil-btn {
    width: 56px;
    height: 56px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    background-color: var(--vr-color-action-primary) !important;
    border-color: var(--vr-color-action-primary) !important;
    color: var(--vr-color-action-on-primary);
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.wilcity-figma-hero__search .hero_form__1ewus .col-md-3 .wil-btn:hover {
    background-color: var(--vr-color-action-hover) !important;
    border-color: var(--vr-color-action-hover) !important;
}

.wilcity-figma-hero__search .hero_form__1ewus .col-md-3 .wil-btn i {
    font-size: 18px;
}

.wilcity-figma-hero__search .field_module__1H6kT {
    background: transparent;
}

.wilcity-figma-hero__search .field_module__1H6kT input,
.wilcity-figma-hero__search .field_field__3U_Rt {
    border: none !important;
    background: transparent !important;
    padding: 18px 0 2px !important;
    height: auto !important;
    font-size: 14px;
    color: var(--vr-color-text-primary);
    width: 100%;
}

.wilcity-figma-hero__search .field_label__2eCP7 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--vr-color-text-secondary);
    font-weight: 700;
    /* Latin-only caption; Inter reads crisper than the sitewide
       Devanagari-first stack at this size. */
    font-family: var(--vr-font-latin);
}

.wilcity-figma-hero__search .vue-treeselect__control {
    border: none !important;
    background: transparent !important;
    min-height: auto !important;
    box-shadow: none !important;
    padding-top: 16px !important;
}

/* Region dropdown menu: force legible text (the library's default muted
   gray-blue reads fine elsewhere on the site against a scoped rule that
   doesn't reach this reused-as-is widget) and keep it above the card. */
.wilcity-figma-hero__search .vue-treeselect__menu-container {
    z-index: 20;
    min-width: 220px;
}

.wilcity-figma-hero__search .vue-treeselect__menu {
    min-width: 220px;
    text-align: left;
}

.wilcity-figma-hero__search .vue-treeselect__label,
.wilcity-figma-hero__search .vue-treeselect__label-container,
.wilcity-figma-hero__search .vue-treeselect__option {
    color: var(--vr-color-text-primary) !important;
}

@media (max-width: 700px) {
    /* Below this the card no longer has room for 3 elements on one line
       (see .wilcity-figma-hero__content's width) — stack instead of
       squeezing. */
    .wilcity-figma-hero__search .hero_form__1ewus .row {
        flex-wrap: wrap;
    }

    .wilcity-figma-hero__search .hero_form__1ewus .col-md-9 {
        flex: 1 1 100%;
    }

    .wilcity-figma-hero__search .hero_form__1ewus .col-md-9 > .row {
        flex-wrap: wrap;
    }

    .wilcity-figma-hero__search .hero_form__1ewus .col-md-6:first-child,
    .wilcity-figma-hero__search .hero_form__1ewus .col-md-6:last-child {
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .wilcity-figma-hero__search .hero_form__1ewus .col-md-3 .wil-btn {
        width: 100%;
        height: 48px;
        border-radius: var(--vr-radius-pill);
    }
}

.wilcity-figma-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.wilcity-figma-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4a2c1d;
    font-size: 12px;
    text-decoration: none;
}

.wilcity-figma-hero__tag-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(200, 149, 60, .45);
    display: inline-block;
    flex-shrink: 0;
}

.wilcity-figma-hero__tag:hover,
.wilcity-figma-hero__tag:focus {
    color: #a8732b;
}

.wilcity-hero-stats {
    position: absolute;
    right: 80px;
    bottom: 40px;
    z-index: 3;
    display: flex;
    gap: 12px;
}

.wilcity-hero-stat {
    background-color: rgba(251, 246, 236, .96);
    border: 1px solid rgba(217, 194, 160, .6);
    border-radius: 16px;
    box-shadow: 0 6px 24px 0 rgba(0, 0, 0, .14);
    padding: 17px 21px;
    min-width: 110px;
    text-align: center;
}

.wilcity-hero-stat__number {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #651816;
}

.wilcity-hero-stat__label {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: #4a2c1d;
}

.wilcity-hero-stat__sub {
    margin: 2px 0 0;
    font-size: 10px;
    color: #a89070;
}

.wilcity-figma-hero-strip {
    background-color: #fbf6ec;
    border-top: 1px solid rgba(217, 194, 160, .45);
    border-bottom: 1px solid rgba(217, 194, 160, .45);
    padding: 13px 80px;
}

.wilcity-figma-hero-strip__inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
}

.wilcity-figma-hero-strip__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #241b16;
    font-size: 14px;
}

.wilcity-figma-hero-strip__item i {
    color: #c8953c;
}

@media (max-width: 991px) {
    .wilcity-figma-hero__inner {
        padding: 48px 40px;
    }

    .wilcity-hero-stats {
        position: static;
        margin-top: 28px;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .wilcity-figma-hero__inner {
        padding: 40px 20px 32px;
        min-height: auto;
    }

    .wilcity-figma-hero__content {
        max-width: 100%;
    }

    .wilcity-figma-hero__title {
        font-size: 30px;
    }

    .wilcity-figma-hero__overlay {
        background-image: linear-gradient(180deg, rgba(251, 246, 236, .93) 45%, rgba(251, 246, 236, .8) 100%);
    }

    .wilcity-figma-hero__search .wil-tab__nav a {
        padding: 8px 7px;
        font-size: 10px;
    }

    .wilcity-figma-hero-strip {
        padding: 13px 20px;
    }
}

/* Superseded by the rebuilt hero search panel above, which gives every
   field enough native width that these narrow-pill patches are no longer
   needed. */