﻿@layer modern {
    /* ==========================================================================
   SpeedyBook Modern Form & UI Controls Overrides
   ========================================================================== */

    /* Custom modern dropdown arrow for all Native Selects (excluding multiple and listboxes) */
    .sb-modern select:not([multiple]):not([size]):not(.select2-hidden-accessible),
    .sb-modern select[size="1"]:not([multiple]):not(.select2-hidden-accessible) {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: var(--sb-dropdown-arrow);
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 18px;
        padding-right: 40px;
        /* make room for the arrow */
        padding-left: 12px;
        cursor: pointer;
    }

    /* RTL Support for Native Selects */
    .sb-modern[dir="rtl"] select:not([multiple]):not([size]):not(.select2-hidden-accessible),
    .sb-modern[dir="rtl"] select[size="1"]:not([multiple]):not([size]).select2-hidden-accessible {
        background-position: left 14px center;
        padding-left: 40px;
        padding-right: 12px;
    }

    /* Force listboxes (size > 1) to drop native OS styling so they can accept border-radius and custom borders */
    .sb-modern select[size]:not([size="1"]) {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none;
        outline: none;
    }
    /* Focus State */
    .sb-modern input[type="text"]:focus,
    .sb-modern input[type="password"]:focus,
    .sb-modern input[type="email"]:focus,
    .sb-modern input[type="tel"]:focus,
    .sb-modern input[type="number"]:focus,
    .sb-modern textarea:focus,
    .sb-modern select:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
        background-color: #fff;
    }

    /* Modernize Primary Form Buttons Only */
    .sb-modern .submit-cell input[type="submit"],
    .sb-modern .submit-cell input[type="button"],
    .sb-modern .submit-cell button,
    .sb-modern .auth input[type="submit"],
    .sb-modern .auth button,
    .sb-modern form input[type="submit"] {
        background-color: #2563eb; /* Tailwind blue-600 */
        color: #ffffff;
        border: none;
        border-radius: 8px;
        padding: 12px 24px;
        font-weight: 600;
        font-size: 15px;
        font-family: inherit;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
        text-shadow: none;
        height: auto;
    }

    .sb-modern .submit-cell input[type="submit"]:hover,
    .sb-modern .submit-cell input[type="button"]:hover,
    .sb-modern .submit-cell button:hover,
    .sb-modern .auth input[type="submit"]:hover,
    .sb-modern .auth button:hover,
    .sb-modern form input[type="submit"]:hover {
        background-color: #1d4ed8; /* Tailwind blue-700 */
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
    }

    .sb-modern .submit-cell input[type="submit"]:active,
    .sb-modern .submit-cell input[type="button"]:active,
    .sb-modern .submit-cell button:active,
    .sb-modern .auth input[type="submit"]:active,
    .sb-modern form input[type="submit"]:active {
        transform: translateY(0);
    }

    /* Prevent checkboxes and radios from being stretched or styled like text inputs */
    .sb-modern input[type="checkbox"],
    .sb-modern input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: #2563eb;
        cursor: pointer;
        margin-right: 8px;
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    /* Fix inline form elements wrapping in legacy Flynax */
    .sb-modern .submit-cell .field {
        padding-bottom: 15px;
    }

    .sb-modern .submit-cell .name {
        font-weight: 500;
        color: #475569;
        margin-bottom: 6px;
        display: block;
    }

    /* Booking Rates Specific Width Fix */
    #fs_booking_rates .availability-field-container>div>div:not(:first-child),
    .availability-field-container>div>div:not(:first-child) {
        min-width: 140px;
        /* Force width so "Нет записи" fits horizontally without truncation */
    }

    /* Footer Newsletter Form Alignment Fix */
    .sb-modern .newsletter .subscribe {
        display: flex;
        align-items: stretch;
        gap: 0;
    }

    .sb-modern .newsletter .subscribe>div {
        margin: 0;
    }

    .sb-modern .newsletter input[type="text"],
    .sb-modern .newsletter input[type="button"],
    .sb-modern .newsletter button {
        height: 46px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        box-shadow: none;
    }

    /* Make Newsletter Input and Button flush */
    .sb-modern .newsletter input[type="text"] {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
    }

    .sb-modern .newsletter input[type="button"],
    .sb-modern .newsletter button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    /* -----------------------------------------
   MODERNIZE CHECKBOXES, RADIOS, AND TOOLTIPS
   ----------------------------------------- */

    /* Checkbox Base */
    .sb-modern input[type="checkbox"]:not(.default)+label>span {
        width: 22px;
        height: 22px;
        border: 2px solid #cbd5e1;
        border-radius: 6px;
        background-color: #ffffff;
        transition: all 0.2s ease;
    }

    .sb-modern input[type="checkbox"]:not(.default):hover+label>span {
        border-color: #94a3b8;
    }

    .sb-modern input[type="checkbox"]:not(.default):active+label>span,
    .sb-modern input[type="checkbox"]:not(.default):checked:active+label>span {
        border-color: #4f46e5;
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    }

    /* Checkbox Checked State */
    .sb-modern input[type="checkbox"]:not(.default):checked+label>span {
        background-color: #4f46e5;
        border-color: #4f46e5;
    }

    /* Clean SVG Checkmark (Replaces Flynax pixel-art shadow) */
    .sb-modern input[type="checkbox"]:not(.default):checked+label>span:before {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        background-color: transparent;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        box-shadow: none;
        left: 50%;
        top: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        margin: 0;
    }

    /* Radio Button Base */
    .sb-modern input[type="radio"]:not(.default)+label>span {
        width: 22px;
        height: 22px;
        border: 2px solid #cbd5e1;
        border-radius: 50%;
        background-color: #ffffff;
        transition: all 0.2s ease;
    }

    .sb-modern input[type="radio"]:not(.default):hover+label>span {
        border-color: #94a3b8;
    }

    .sb-modern input[type="radio"]:not(.default):active+label>span,
    .sb-modern input[type="radio"]:not(.default):checked:active+label>span {
        border-color: #4f46e5;
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    }

    /* Radio Button Checked State */
    .sb-modern input[type="radio"]:not(.default):checked+label>span {
        background-color: #ffffff;
        border-color: #4f46e5;
    }

    /* Clean Radio Dot */
    .sb-modern input[type="radio"]:not(.default):checked+label>span:before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background-color: #4f46e5;
        border-radius: 50%;
        margin: 0;
        left: 50%;
        top: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
    }

    .sb-modern img.qtip {
        width: 20px;
        height: 20px;
        background-color: #94a3b8;
        /* Soft gray default */
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3e%3c/path%3e%3cline x1='12' y1='17' x2='12.01' y2='17'%3e%3c/line%3e%3c/svg%3e");
        background-size: 14px 14px;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%;
        /* Perfect circle */
        margin: 0;
        transition: all 0.2s ease;
        opacity: 1;
        /* Remove Flynax 0.7 opacity default */
    }

    .sb-modern img.qtip:hover {
        background-color: var(--sb-primary, #2563eb);
        /* Green primary on hover */
        box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
        /* Subtle green glow */
        transform: translateY(-1px);
        cursor: help;
    }

    /* ==========================================================================
   FLYNAX CUSTOM CATEGORY DROPDOWN (.cd-extendable) PREMIUM MODERNIZATION
   ========================================================================== */

    /* Align heights, borders, and margins of all fields in the horizontal search bar */
    .sb-modern .horizontal-search input[type="text"],
    .sb-modern .horizontal-search input[type="submit"],
    .sb-modern .horizontal-search select,
    .sb-modern .cd-extendable,
    .sb-modern .cd-extendable>div.dropdown {
        height: 48px;
        line-height: 48px;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
        border-radius: 12px;
    }

    /* Perfect even spacing using Flexbox gap */
    .sb-modern .horizontal-search .cd-form {
        gap: 8px;
        width: 100%;
    }

    /* Remove all legacy uneven margins */
    .sb-modern .horizontal-search .cd-form>* {
        margin: 0;
    }

    .sb-modern .cd-extendable {
        width: 30%;
        max-width: 280px;
    }

    /* SIDEBAR FIX: Allow full width for category dropdowns inside sidebar blocks (like Map Search) */
    .sb-modern .side_block .cd-extendable {
        width: 100%;
        max-width: none;
    }

    /* Category dropdown input button */
    .sb-modern .cd-extendable>div.dropdown {
        border: 1px solid #e2e8f0;
        /* Matches modern input borders */
        border-radius: 12px;
        /* Matches 12px border radius */
        padding-right: 36px;
        /* Room for custom arrow */
        padding-left: 18px;
        background-color: #ffffff;
        color: #1e293b;
        font-size: 15px;
        font-family: inherit;
        box-shadow: none;
        /* Clean flat border */
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        cursor: pointer;

        /* Sleek modern drop arrow icon */
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") right 14px center/14px no-repeat #ffffff;
    }

    .sb-modern .cd-extendable>div.dropdown:hover {
        border-color: #cbd5e1;
    }

    .sb-modern .cd-extendable.opened>div.dropdown {
        border-color: #4f46e5;
        /* Active Indigo theme */
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    }

    /* Modernize the category popup box dropdown list */
    .sb-modern .cd-extendable>div.box {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
        margin-top: 6px;
        padding: 8px 0;
        z-index: 9999;
        width: 280px;
    }

    /* Allow the dropdown popup box to take full width of the sidebar */
    .sb-modern .side_block .cd-extendable>div.box {
        width: 100%;
    }

    /* Breadcrumbs (navigation path) */
    .sb-modern .cd-extendable>div.box>div.bc {
        position: relative;
        /* Establishes absolute context for the arrow */
        background-color: #f8fafc;
        /* soft background */
        border-bottom: 1px solid #f1f5f9;
        color: #64748b;
        font-size: 13px;
        font-weight: 600;
        padding: 10px 16px 10px 32px;
        /* Extra padding on left for the arrow */
        height: auto;
        display: block;
        /* Block layout for text-overflow to work */
        line-height: normal;
        cursor: pointer;
    }

    /* Breadcrumbs back icon arrow */
    .sb-modern .cd-extendable>div.box>div.bc:before {
        content: '';
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 6px;
        height: 6px;
        border-bottom: 2px solid #64748b;
        border-left: 2px solid #64748b;
        background: none;
        /* Hide old background sprite */
        margin: 0;
    }

    /* Dropdown list links */
    .sb-modern .cd-extendable>div.box ul>li>a {
        display: block;
        padding: 10px 36px 10px 16px;
        color: #334155;
        font-size: 14px;
        font-weight: 400;
        text-decoration: none;
        transition: all 0.15s ease;
        background: none;
        line-height: normal;
    }

    .sb-modern .cd-extendable>div.box ul>li>a:hover {
        background-color: #f1f5f9;
        color: #0f172a;
    }

    .sb-modern .cd-extendable>div.box ul>li.selected>a {
        background-color: #f8fafc;
        color: #4f46e5;
        font-weight: 600;
    }

    .sb-modern .cd-extendable>div.box ul>li.selected>a:before {
        display: none;
        /* Hide default Flynax background sprite */
    }

    /* Custom sleek arrow for subcategories list items */
    .sb-modern .cd-extendable>div.box ul>li>span {
        width: 32px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .sb-modern .cd-extendable>div.box ul>li>span:after {
        content: '';
        width: 6px;
        height: 6px;
        border-top: 2px solid #94a3b8;
        border-right: 2px solid #94a3b8;
        transform: rotate(45deg);
        background: none;
        display: block;
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }

    .sb-modern .cd-extendable>div.box ul>li>span:hover:after {
        opacity: 1;
        border-color: #4f46e5;
    }

    /* Mobile responsive styles for the category selector */
    @media (max-width: 767px) {
        .sb-modern .cd-extendable {
            width: 100%;
            max-width: none;
        }

        .sb-modern .cd-extendable>div.box {
            width: 100%;
        }
    }

    /* Collapse hidden parent category lists to prevent empty height stretching in subcategories */
    .sb-modern .cd-extendable>div.box>div.uls>ul:not(:last-child) {
        height: 0;
        overflow: hidden;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Consolidated modern dark newsletter input overrides with high specificity for name & email fields */
    .sb-modern input.newsletter_name,
    .sb-modern input.newsletter_name[type="text"],
    .sb-modern input.newsletter_email,
    .sb-modern input.newsletter_email[type="text"],
    .sb-modern .newsletter input[type="text"],
    .sb-modern .sb-footer-modern__newsletter-form input[type="text"],
    .sb-modern #nova-newsletter-cont input[type="text"] {
        background-color: #0f172a;
        /* Premium deep dark slate */
        color: #ffffff;
        /* Pure white text */
        border: 1px solid #334155;
        /* Slate-700 border matching dark footer */
        border-radius: 12px;
    }

    .sb-modern input.newsletter_name:focus,
    .sb-modern input.newsletter_name[type="text"]:focus,
    .sb-modern input.newsletter_email:focus,
    .sb-modern input.newsletter_email[type="text"]:focus,
    .sb-modern .newsletter input[type="text"]:focus,
    .sb-modern .sb-footer-modern__newsletter-form input[type="text"]:focus,
    .sb-modern #nova-newsletter-cont input[type="text"]:focus {
        background-color: #1e293b;
        /* Soft dark focus color */
        border-color: #475569;
        /* Slate-600 focus border */
        box-shadow: 0 0 0 4px rgba(71, 85, 105, 0.2);
    }

    .sb-modern input.newsletter_name::placeholder,
    .sb-modern input.newsletter_name[type="text"]::placeholder,
    .sb-modern input.newsletter_email::placeholder,
    .sb-modern input.newsletter_email[type="text"]::placeholder,
    .sb-modern .newsletter input[type="text"]::placeholder,
    .sb-modern .sb-footer-modern__newsletter-form input[type="text"]::placeholder,
    .sb-modern #nova-newsletter-cont input[type="text"]::placeholder {
        color: #94a3b8;
        /* Light slate placeholder text */
        opacity: 1;
    }

    .sb-modern input.newsletter_name::-webkit-input-placeholder,
    .sb-modern input.newsletter_name[type="text"]::-webkit-input-placeholder,
    .sb-modern input.newsletter_email::-webkit-input-placeholder,
    .sb-modern input.newsletter_email[type="text"]::-webkit-input-placeholder,
    .sb-modern .newsletter input[type="text"]::-webkit-input-placeholder,
    .sb-modern .sb-footer-modern__newsletter-form input[type="text"]::-webkit-input-placeholder,
    .sb-modern #nova-newsletter-cont input[type="text"]::-webkit-input-placeholder {
        color: #94a3b8;
    }

    /* ==========================================================================
   SIDEBAR COLLAPSIBLE BLOCKS (.sb-collapsible)
   ========================================================================== */

    .sb-modern .sb-block-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .sb-modern .sb-block-title.no-toggle {
        cursor: default;
    }

    .sb-modern .sb-block-toggle {
        background: none;
        border: none;
        color: #64748b;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.3s ease;
        box-shadow: none;
    }

    .sb-modern .sb-block-title:not(.no-toggle):hover .sb-block-toggle {
        color: #4f46e5;
    }

    .sb-modern .sb-collapsible.is-closed .sb-block-toggle {
        transform: rotate(180deg);
    }

    .sb-modern .sb-collapsible.is-closed .sb-block-content {
        display: none;
    }

    /* ==========================================================================
   BUTTON AND FIELD CUSTOMIZATIONS (SPEEDYBOOK THEME SPECIFIC)
   ========================================================================== */

    /* 1. Homepage "Browse Categories" button - Blue/Sky Blue */
    .sb-modern .btn-browse-categories {
        background-color: #2563eb;
        /* Tailwind blue-600 */
        color: #ffffff;
        border: none;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
    }

    .sb-modern .btn-browse-categories:hover {
        background-color: #1d4ed8;
        /* Tailwind blue-700 */
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
    }

    /* 2. Category selection "Next" button (old flow) - Blue/Sky Blue */
    .sb-modern .sb-category-step .sb-wiz-btn.sb-wiz-btn-next {
        background: #2563eb;
        color: #ffffff;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
    }

    .sb-modern .sb-category-step .sb-wiz-btn.sb-wiz-btn-next:hover {
        background: #1d4ed8;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
    }

    /* 3. Registration page "Continue" button - Blue/Sky Blue */
    .sb-modern.registration-page .submit-cell input[type="submit"],
    .sb-modern.registration-page input[type="submit"] {
        background-color: #2563eb;
        color: #ffffff;
        border: none;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
    }

    .sb-modern.registration-page .submit-cell input[type="submit"]:hover,
    .sb-modern.registration-page input[type="submit"]:hover {
        background-color: #1d4ed8;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
    }

    /* 4. Booking page "Delete" button - Red */
    .sb-modern .remove_request,
    .sb-modern .remove_request.button {
        background-color: #d63031;
        /* Premium Red */
        color: #ffffff;
        border: none;
        box-shadow: 0 2px 4px rgba(214, 48, 49, 0.1);
    }

    .sb-modern .remove_request:hover,
    .sb-modern .remove_request.button:hover {
        background-color: #b71c1c;
        box-shadow: 0 4px 8px rgba(214, 48, 49, 0.2);
    }

    /* 5. Booking-requests page actions */
    /* Reassign button - Blue */
    .sb-modern #change_period,
    .sb-modern #change_period.button {
        background-color: #2563eb;
        color: #ffffff;
        border: none;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
    }

    .sb-modern #change_period:hover,
    .sb-modern #change_period.button:hover {
        background-color: #1d4ed8;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
    }

    /* Accept button - stays green explicitly */
    .sb-modern #accept_btn,
    .sb-modern #accept_btn.button {
        background-color: #2563eb;
        color: #ffffff;
        border: none;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
    }

    .sb-modern #accept_btn:hover,
    .sb-modern #accept_btn.button:hover {
        background-color: #1d4ed8;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
    }

    /* Decline/Cancel button - Red */
    .sb-modern #refuse_btn,
    .sb-modern #refuse_btn.button,
    .sb-modern #refuse_btn.red {
        background-color: #d63031;
        color: #ffffff;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        padding: 0 20px;
        border-radius: var(--sb-radius, 12px);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 2px 4px rgba(214, 48, 49, 0.1);
    }

    .sb-modern #refuse_btn:hover,
    .sb-modern #refuse_btn.button:hover,
    .sb-modern #refuse_btn.red:hover {
        background-color: #b71c1c;
        box-shadow: 0 4px 8px rgba(214, 48, 49, 0.2);
        color: #ffffff;
    }

    /* 6. Non-footer Newsletter block styles */
    /* Fields background: standard white */
    .sb-modern .subscribe input.newsletter_name,
    .sb-modern .subscribe input.newsletter_email {
        background-color: #ffffff;
        border: 1px solid #dfe6e9;
        color: #1e293b;
        border-radius: var(--sb-radius, 12px);
        height: 42px;
        padding: 0 14px;
    }

    .sb-modern .subscribe input.newsletter_name:focus,
    .sb-modern .subscribe input.newsletter_email:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    }

    /* Subscribe button background: green */
    .sb-modern .subscribe input.subscribe_user {
        background-color: #2563eb;
        color: #ffffff;
        border: none;
        border-radius: var(--sb-radius, 12px);
        height: 42px;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
    }

    .sb-modern .subscribe input.subscribe_user:hover {
        background-color: #1d4ed8;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
    }

    /* 7. Revert footer newsletter styles to old design (blue button and dark inputs) */
    .sb-modern .sb-footer-modern .subscribe input.newsletter_email {
        background-color: #1e293b;
        border: 1px solid #475569;
        color: #ffffff;
        border-radius: 10px;
        height: 44px;
        padding: 0 14px;
    }

    .sb-modern .sb-footer-modern .subscribe input.newsletter_email:focus {
        border-color: #64748b;
        background-color: #0f172a;
    }

    .sb-modern .sb-footer-modern .subscribe input.subscribe_user {
        background-color: #0284c7;
        /* old blue color */
        color: #ffffff;
        border: none;
        border-radius: 10px;
        height: 44px;
        box-shadow: none;
    }

    .sb-modern .sb-footer-modern .subscribe input.subscribe_user:hover {
        background-color: #0369a1;
    }

    /* ==========================================================================
   Native Select Modernization for .no-select2 Elements
   Used in: booking-order (escort_rates, escort_duration, check_in/out)
            service areas (scope, country, region, city)
   These selects cannot use Select2 (JS detach/appendTo would break it),
   so we style them to visually match the Select2 theme exactly.
   ========================================================================== */

    /* Base: match Select2 selection box appearance */
    .sb-modern select.no-select2 {
        display: block;
        width: 100%;
        height: 42px;
        min-height: 42px;
        padding: 0 40px 0 14px;
        border: 1px solid var(--sb-border, #dfe6e9);
        border-radius: var(--sb-radius, 12px);
        background-color: var(--sb-white, #ffffff);
        background-image: var(--sb-dropdown-arrow);
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 16px;
        color: var(--sb-text-main, #2d3436);
        font-size: 15px;
        font-family: inherit;
        font-weight: 400;
        line-height: 42px;
        box-shadow: none;
        outline: none;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        box-sizing: border-box;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* RTL support */
    body[dir="rtl"] .sb-modern select.no-select2 {
        padding: 0 14px 0 40px;
        background-position: left 14px center;
    }

    /* Hover */
    .sb-modern select.no-select2:hover {
        border-color: var(--sb-border-hover, #cbd5e1);
    }

    /* Focus — matches Select2 focus ring (green for booking-order, indigo for general inputs) */
    .sb-modern select.no-select2:focus {
        border-color: var(--sb-primary, #2563eb);
        box-shadow: 0 0 0 4px var(--sb-primary-soft, rgba(37, 99, 235, 0.1));
        background-color: var(--sb-white, #ffffff);
        outline: none;
    }

    /* Disabled state */
    .sb-modern select.no-select2.disabled,
    .sb-modern select.no-select2[disabled],
    .sb-modern select.no-select2:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        background-color: var(--form-disabled-background-color, #f8fafc);
        color: #8a8a8a;
        border-color: var(--sb-border, #dfe6e9);
        box-shadow: none;
    }

    /* Ensure width fills the container when inside a .value wrapper (booking JS) */
    .sb-modern #area_booking .value select.no-select2,
    .sb-modern #booking_details .value select.no-select2,
    .sb-modern .popup .value select.no-select2 {
        width: 100%;
        margin: 0;
    }

    /* Service areas: ensure the grid cells get proper height */
    .sb-modern .service-area-field select.no-select2 {
        width: 100%;
    }

    /* ==========================================================================
   SIDEBAR BLOCKS MODERNIZATION (SpeedyBook Premium Aesthetics)
   ========================================================================== */

    /* Main Side Blocks and Search Block Containers */
    .sb-modern section.side_block:not(.no-style),
    .sb-modern section.side_block_search {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        border-radius: 16px;
        padding: 24px;
        margin-bottom: 24px;
        transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }

    /* Prevent double borders/paddings on nested blocks */
    .sb-modern section.side_block section.side_block_search,
    .sb-modern .side_block .side_block_search,
    .sb-modern .side_block_search form,
    .sb-modern .side_block_search .search-block-content,
    .sb-modern .side_block_search .scroller {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    /* Hover effect on the whole block to make it feel alive */
    .sb-modern section.side_block:not(.no-style):hover,
    .sb-modern section.side_block_search:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
        border-color: #cbd5e1;
    }

    /* Nested section hover reset */
    .sb-modern section.side_block section.side_block_search:hover,
    .sb-modern .side_block .side_block_search:hover {
        box-shadow: none;
        border: none;
    }

    /* Side Block Title Styling */
    .sb-modern .sb-block-title,
    .sb-modern section.side_block>h3,
    .sb-modern section.side_block_search>h3,
    .sb-modern section.side_block>div>h3,
    .sb-modern section.side_block_search>div>h3 {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #1e293b;
        /* Modern dark gray */
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 12px;
        margin-bottom: 18px;
        margin-top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    /* Categories List Styling */
    .sb-modern .categories ul {
        padding: 0;
        margin: 0;
    }

    .sb-modern .categories li {
        list-style: none;
        margin-bottom: 4px;
        position: relative;
    }

    /* Modern chevron or bullet point instead of legacy + */
    .sb-modern .categories li:before {
        display: none;
        /* Hide original Flynax + indicator */
    }

    .sb-modern .categories .parent-category {
        padding: 8px 12px;
        border-radius: 10px;
        transition: all 0.2s ease-in-out;
        display: flex;
        align-items: center;
        background: transparent;
        text-decoration: none;
    }

    /* Bullet icon prepended dynamically */
    .sb-modern .categories .parent-category::before {
        content: "•";
        color: var(--sb-primary, #2563eb);
        font-weight: 900;
        margin-right: 10px;
        font-size: 18px;
        line-height: 1;
        display: inline-block;
        transition: transform 0.2s ease;
    }

    /* Hover animations for category items */
    .sb-modern .categories .parent-category:hover {
        background-color: rgba(37, 99, 235, 0.06);
        padding-left: 16px;
        /* Elegant slide-in */
    }

    .sb-modern .categories .parent-category:hover::before {
        transform: scale(1.3);
    }

    .sb-modern .categories a.category {
        font-size: 14px;
        font-weight: 500;
        color: #475569;
        /* slate-600 */
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .sb-modern .categories .parent-category:hover a.category {
        color: var(--sb-primary, #2563eb);
    }

    /* Category counters badge style */
    .sb-modern .category-counter {
        margin-left: auto;
    }

    .sb-modern .category-counter span {
        background: #f1f5f9;
        color: #64748b;
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
    }

    .sb-modern .categories .parent-category:hover .category-counter span {
        background: var(--sb-primary-soft, rgba(37, 99, 235, 0.1));
        color: var(--sb-primary, #2563eb);
    }

    /* --------------------------------------------------------------------------
   Personal Account Navigation Menu - SCOPED ONLY to Sidebar Block
   -------------------------------------------------------------------------- */
    .sb-modern .side_block .account-menu-content {
        padding: 0;
        margin: 0;
        list-style: none;
        display: block;
        width: 100%;
    }

    .sb-modern .side_block .account-menu-content li {
        margin-bottom: 4px;
        display: block;
        position: relative;
    }

    .sb-modern .side_block .account-menu-content li a:not(.counter) {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 500;
        color: #475569;
        border-radius: 10px;
        transition: all 0.2s ease-in-out;
        text-decoration: none;
        width: 100%;
        background: transparent;
    }

    /* Bullet decoration for navigation links */
    .sb-modern .side_block .account-menu-content li a:not(.counter)::before {
        content: "•";
        color: #94a3b8;
        margin-right: 10px;
        font-size: 18px;
        line-height: 1;
        display: inline-block;
        transition: color 0.2s ease, transform 0.2s ease;
    }

    .sb-modern .side_block .account-menu-content li a:not(.counter):hover,
    .sb-modern .side_block .account-menu-content li a:not(.counter).active {
        background-color: rgba(37, 99, 235, 0.06);
        color: var(--sb-primary, #2563eb);
        padding-left: 18px;
        /* Slide animation */
        font-weight: 600;
    }

    .sb-modern .side_block .account-menu-content li a:not(.counter):hover::before,
    .sb-modern .side_block .account-menu-content li a:not(.counter).active::before {
        color: var(--sb-primary, #2563eb);
        transform: scale(1.3);
    }

    /* Logout Exit option */
    .sb-modern .side_block .account-menu-content li a:not(.counter).logout::before {
        color: #fca5a5;
    }

    .sb-modern .side_block .account-menu-content li a:not(.counter).logout:hover {
        background-color: rgba(214, 48, 49, 0.06);
        color: #d63031;
    }

    .sb-modern .side_block .account-menu-content li a:not(.counter).logout:hover::before {
        color: #d63031;
    }

    /* Red counter badge for sidebar navigation items (similar to header menu) */
    .sb-modern .side_block .account-menu-content a.counter {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background: var(--sb-danger, #d63031);
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
        pointer-events: none;
        z-index: 2;
        box-sizing: border-box;
        line-height: 1;
    }

    body[dir="rtl"] .sb-modern .side_block .account-menu-content a.counter {
        left: 14px;
        right: auto;
    }

    /* Explicitly restore and style modern header and mobile user dropdown menus */
    .sb-modern #user-navbar .account-menu-content,
    .sb-modern .sb-user-modern .account-menu-content {
        padding: 6px;
        margin: 0;
        box-shadow: none;
        border: none;
        background: transparent;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .sb-modern .sb-mobile-account-section__menu .account-menu-content,
    .sb-modern .sb-mobile-account-section .account-menu-content {
        padding: 8px 12px;
        margin: 0;
        box-shadow: none;
        border: none !important;
        background: transparent !important;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .sb-modern #user-navbar .account-menu-content li,
    .sb-modern .sb-user-modern .account-menu-content li,
    .sb-modern .sb-mobile-account-section__menu .account-menu-content li,
    .sb-modern .sb-mobile-account-section .account-menu-content li {
        margin-bottom: 0;
        padding: 0;
        border: none !important;
        border-top: none !important;
        background: transparent;
        display: block;
    }

    .sb-modern #user-navbar .account-menu-content li a:not(.counter),
    .sb-modern .sb-user-modern .account-menu-content li a:not(.counter) {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        color: #475569;
        background: transparent;
        border-radius: 8px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sb-modern .sb-mobile-account-section__menu .account-menu-content li a:not(.counter),
    .sb-modern .sb-mobile-account-section .account-menu-content li a:not(.counter) {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        font-size: 15px;
        font-weight: 500;
        color: #475569;
        background: transparent;
        border-radius: 10px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
    }

    .sb-modern #user-navbar .account-menu-content li a:not(.counter)::before,
    .sb-modern .sb-user-modern .account-menu-content li a:not(.counter)::before,
    .sb-modern .sb-mobile-account-section__menu .account-menu-content li a:not(.counter)::before,
    .sb-modern .sb-mobile-account-section .account-menu-content li a:not(.counter)::before {
        display: none !important;
        content: none !important;
    }

    /* Hover & Active states */
    .sb-modern #user-navbar .account-menu-content li a:not(.counter):hover,
    .sb-modern .sb-user-modern .account-menu-content li a:not(.counter):hover,
    .sb-modern #user-navbar .account-menu-content li a:not(.counter).active,
    .sb-modern .sb-user-modern .account-menu-content li a:not(.counter).active,
    .sb-modern .sb-mobile-account-section__menu .account-menu-content li a:not(.counter):hover,
    .sb-modern .sb-mobile-account-section .account-menu-content li a:not(.counter):hover,
    .sb-modern .sb-mobile-account-section__menu .account-menu-content li a:not(.counter).active,
    .sb-modern .sb-mobile-account-section .account-menu-content li a:not(.counter).active {
        background-color: rgba(37, 99, 235, 0.08) !important;
        color: var(--sb-primary, #2563eb) !important;
        font-weight: 600;
        padding-left: 20px;
    }

    /* Logout link text color in header and mobile dropdown menus */
    .sb-modern #user-navbar .account-menu-content li a.logout,
    .sb-modern .sb-user-modern .account-menu-content li a.logout,
    .sb-modern .sb-mobile-account-section__menu .account-menu-content li a.logout,
    .sb-modern .sb-mobile-account-section .account-menu-content li a.logout {
        color: var(--sb-danger, #d63031) !important;
        font-weight: 600;
    }

    /* Logout link hover style in header and mobile dropdown menus */
    .sb-modern #user-navbar .account-menu-content li a.logout:hover,
    .sb-modern .sb-user-modern .account-menu-content li a.logout:hover,
    .sb-modern .sb-mobile-account-section__menu .account-menu-content li a.logout:hover,
    .sb-modern .sb-mobile-account-section .account-menu-content li a.logout:hover {
        background-color: rgba(214, 48, 49, 0.08) !important;
        color: var(--sb-danger, #d63031) !important;
        padding-left: 20px;
    }


    /* --------------------------------------------------------------------------
   Search form inside Sidebar Search Block
   -------------------------------------------------------------------------- */
    .sb-modern .side_block_search input[type="text"],
    .sb-modern .side_block_search input[type="number"],
    .sb-modern .side_block_search select {
        background-color: #f8fafc;
        /* Light neutral input bg */
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        height: 42px;
        padding: 0 14px;
        color: #1e293b;
        font-size: 14px;
        transition: all 0.2s ease-in-out;
        box-shadow: none;
    }

    .sb-modern .side_block_search input[type="text"]:focus,
    .sb-modern .side_block_search input[type="number"]:focus,
    .sb-modern .side_block_search select:focus {
        background-color: #ffffff;
        border-color: var(--sb-primary, #2563eb);
        box-shadow: 0 0 0 4px var(--sb-primary-soft, rgba(37, 99, 235, 0.1));
    }

    /* Pricing inputs side-by-side positioning */
    .sb-modern .side_block_search div.field input[type="text"],
    .sb-modern .side_block_search div.field input[type="number"] {
        width: 100%;
    }

    /* Search Submit Button - Modern Green */
    .sb-modern .side_block_search input[type="submit"] {
        background-color: var(--sb-primary, #2563eb);
        color: #ffffff;
        border: none;
        border-radius: 12px;
        height: 42px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
        width: 100%;
        margin-top: 10px;
    }

    .sb-modern .side_block_search input[type="submit"]:hover {
        background-color: #1d4ed8;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
    }

    /* --------------------------------------------------------------------------
   Seller / User Profile Sidebar Card (Avatar block)
   -------------------------------------------------------------------------- */
    /* Seller / User Profile Sidebar Card (Avatar block)
    -------------------------------------------------------------------------- */
    .sb-modern .side_block .avatar,
    .sb-modern .side_block .profile-photo,
    .sb-modern .side_block img.avatar {
        border-radius: 50%;
        border: 3px solid #ffffff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        margin: 0 auto 16px auto;
        display: block;
        width: 90px;
        height: 90px;
        object-fit: cover;
    }

    /* User information fields styling */
    .sb-modern .side_block .user-info-text,
    .sb-modern .side_block .profile-details {
        text-align: center;
        color: #475569;
        font-size: 13px;
        margin-bottom: 12px;
    }

    /* Red Delete Account button - Soft outline friendly design */
    .sb-modern .side_block input[type="submit"].red,
    .sb-modern .side_block input[type="button"].red,
    .sb-modern .side_block button.red,
    .sb-modern .side_block a.button.red,
    .sb-modern .side_block .delete-account-btn {
        background-color: #fee2e2;
        color: #dc2626;
        border: 1px solid #fecaca;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.2s ease;
        padding: 8px 16px;
        display: block;
        width: 100%;
        text-align: center;
        box-shadow: none;
        margin-top: 16px;
    }

    .sb-modern .side_block input[type="submit"].red:hover,
    .sb-modern .side_block input[type="button"].red:hover,
    .sb-modern .side_block button.red:hover,
    .sb-modern .side_block a.button.red:hover {
        background-color: #dc2626;
        color: #ffffff;
        border-color: #dc2626;
    }

    /* Modernize Form Field Labels - Replace * with Required/Optional status badges inside the left column */
    .sb-modern div.submit-cell:has(input:not([type="submit"]):not([type="hidden"]), select, textarea)>div.name {
        display: block !important;
        font-size: 13px;
        font-weight: 700;
        color: #334155;
        margin-bottom: 6px;
    }

    /* Align help icon inline next to label text */
    .sb-modern div.submit-cell:has(input:not([type="submit"]):not([type="hidden"]), select, textarea)>div.name img.qtip {
        display: inline-block !important;
        vertical-align: middle;
        margin-left: 6px !important;
    }

    /* Hide original red asterisks */
    .sb-modern div.submit-cell .name span.red,
    .sb-modern div.submit-cell .name span.required {
        display: none;
    }

    /* Required field badge (Обязательно) */
    .sb-modern div.submit-cell:has(input:not([type="submit"]):not([type="hidden"]), select, textarea)>div.name:has(span.red, span.required)::after {
        content: "Обязательно";
        display: block !important;
        font-size: 11px;
        color: #94a3b8;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        margin-top: 4px;
    }

    /* Optional field badge (Необязательно) */
    .sb-modern div.submit-cell:has(input:not([type="submit"]):not([type="hidden"]), select, textarea)>div.name:not(:has(span.red, span.required)):not(:empty)::after {
        content: "Необязательно";
        display: block !important;
        font-size: 11px;
        color: #94a3b8;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        margin-top: 4px;
    }

    /* Modern, Airy Floating Help Tooltips (qTip overrides) */
    body.sb-modern div.qtip {
        background-color: #1e293b !important; /* Dark slate premium background */
        border: 1px solid #334155 !important;
        border-radius: 12px !important; /* Extra rounded */
        box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.4) !important; /* Floating shadow */
        padding: 12px 16px !important;
        max-width: 280px !important;
        box-sizing: border-box !important;
    }

    body.sb-modern div.qtip,
    body.sb-modern div.qtip .qtip-content,
    body.sb-modern div.qtip-content * {
        color: #f8fafc !important; /* Soft white text */
        font-size: 13px !important;
        line-height: 1.5 !important;
        font-weight: 500 !important;
        font-family: 'Outfit', 'Inter', 'Roboto', sans-serif !important;
        text-shadow: none !important;
        text-align: left !important;
    }

    /* Reset default qTip wrapper/content/borders background and borders */
    body.sb-modern div.qtip-wrapper,
    body.sb-modern div.qtip-wrapper *,
    body.sb-modern div.qtip-content {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-width: 0 !important;
        box-shadow: none !important;
    }

    /* Hide the vintage canvas pointing arrow to match modern card aesthetics */
    body.sb-modern div.qtip canvas,
    body.sb-modern div.qtip .qtip-tip {
        display: none !important;
    }

}