/* =========================================================================
   Frontend Common Stylesheet
   EzeeCut Web Portal
   ========================================================================= */

/* Anti-Flicker Loader Guard & Alpine Cloak */
[x-cloak] {
    display: none !important;
}

.hide-salon-loader #salonLoader,
.hide-salon-loader .salon-loader {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =========================================================================
   Uiverse.io Business Offer Button Component (by dexter-st)
   Responsive Implementation for Ezeecut Navbar
   ========================================================================= */
.uiverse-biz-container {
    --btn-color: #d8ff7c;
    --corner-color: #00000022;
    --corner-dist: 15px;
    --corner-multiplier: 1.45;
    --timing-function: cubic-bezier(0, 0, 0, 2.5);
    --duration: 250ms;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    vertical-align: middle;
}

.uiverse-biz-btn {
    position: relative;
    min-width: 126px;
    min-height: calc(var(--corner-dist) * 2);
    border-radius: 12px;
    border: none;
    padding: 0.25em 0.85em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    background: linear-gradient(#ffffff33, #00000018), var(--btn-color);
    box-shadow:
        1px 1px 2px -1px #fff inset,
        0 2px 1px #00000010,
        0 4px 2px #00000010,
        0 8px 4px #00000010,
        0 16px 8px #00000010;

    transition:
        transform var(--duration) var(--timing-function),
        filter var(--duration) var(--timing-function);
    -webkit-transition:
        transform var(--duration) var(--timing-function),
        -webkit-filter var(--duration) var(--timing-function);

    cursor: pointer;
    z-index: 2;
}

.uiverse-biz-drawer {
    position: absolute;
    display: flex;
    justify-content: center;
    white-space: nowrap;

    min-height: 22px;
    border-radius: 10px;
    border: none;
    padding: 0.15em 0.75em;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: inherit;
    color: #1e293b;

    background: linear-gradient(#ffffff33, #00000015), var(--btn-color);
    background-color: #fbff13;
    opacity: 0;
    pointer-events: none;
    z-index: 1;

    transition:
        transform calc(0.5 * var(--duration)) ease,
        filter var(--duration) var(--timing-function),
        opacity calc(0.5 * var(--duration)) ease;
    -webkit-transition:
        transform calc(0.5 * var(--duration)) ease,
        -webkit-filter var(--duration) var(--timing-function),
        opacity calc(0.5 * var(--duration)) ease;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

.uiverse-biz-transition-top {
    top: 0;
    left: 0;
    border-radius: 8px 8px 0 0;
    align-items: start;
}
.uiverse-biz-transition-bottom {
    bottom: 0;
    right: 0;
    border-radius: 0 0 8px 8px;
    align-items: end;
}

.uiverse-biz-btn-text {
    display: inline-block;

    font-size: 0.72rem;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1e293b;

    background-image: linear-gradient(#1e293b, #0f172a);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #1e293b;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
    -webkit-filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));

    transition:
        transform var(--duration) var(--timing-function),
        filter var(--duration) var(--timing-function),
        color var(--duration) var(--timing-function);
    -webkit-transition:
        transform var(--duration) var(--timing-function),
        -webkit-filter var(--duration) var(--timing-function),
        color var(--duration) var(--timing-function);
}

.uiverse-biz-corner {
    position: absolute;
    width: 18px;
    pointer-events: none;
    z-index: 0;

    fill: none;
    stroke: var(--corner-color);

    transition:
        transform var(--duration) var(--timing-function),
        filter var(--duration) var(--timing-function);
    -webkit-transition:
        transform var(--duration) var(--timing-function),
        -webkit-filter var(--duration) var(--timing-function);
}

.uiverse-biz-corner:nth-of-type(1) {
    top: 0;
    left: 0;
    transform: translate(calc(-1 * var(--corner-dist)), calc(-1 * var(--corner-dist))) rotate(90deg);
}
.uiverse-biz-corner:nth-of-type(2) {
    top: 0;
    right: 0;
    transform: translate(var(--corner-dist), calc(-1 * var(--corner-dist))) rotate(180deg);
}
.uiverse-biz-corner:nth-of-type(3) {
    bottom: 0;
    right: 0;
    transform: translate(var(--corner-dist), var(--corner-dist)) rotate(-90deg);
}
.uiverse-biz-corner:nth-of-type(4) {
    bottom: 0;
    left: 0;
    transform: translate(calc(-1 * var(--corner-dist)), var(--corner-dist)) rotate(0deg);
}

/* Hover & Focus Interactions */
.uiverse-biz-container:hover,
.uiverse-biz-container:has(.uiverse-biz-btn:hover),
.uiverse-biz-container:has(.uiverse-biz-btn:focus-visible),
.uiverse-biz-container:focus-within {
    --corner-color: #00000044;
}

.uiverse-biz-container:hover .uiverse-biz-btn,
.uiverse-biz-container:has(.uiverse-biz-btn:hover) .uiverse-biz-btn,
.uiverse-biz-container:has(.uiverse-biz-btn:focus-visible) .uiverse-biz-btn,
.uiverse-biz-container:focus-within .uiverse-biz-btn {
    transform: scale(1.05);
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.12));
    -webkit-filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.12));
}

.uiverse-biz-container:hover .uiverse-biz-transition-top,
.uiverse-biz-container:has(.uiverse-biz-btn:hover) .uiverse-biz-transition-top,
.uiverse-biz-container:has(.uiverse-biz-btn:focus-visible) .uiverse-biz-transition-top,
.uiverse-biz-container:focus-within .uiverse-biz-transition-top {
    transform: translateY(-19px) rotateZ(3deg);
    filter: blur(0px);
    -webkit-filter: blur(0px);
    animation: uiverse-hue-anim 3s infinite linear;
    -webkit-animation: uiverse-hue-anim 3s infinite linear;
    opacity: 1;
}

.uiverse-biz-container:hover .uiverse-biz-transition-bottom,
.uiverse-biz-container:has(.uiverse-biz-btn:hover) .uiverse-biz-transition-bottom,
.uiverse-biz-container:has(.uiverse-biz-btn:focus-visible) .uiverse-biz-transition-bottom,
.uiverse-biz-container:focus-within .uiverse-biz-transition-bottom {
    transform: translateY(19px) rotateZ(3deg);
    filter: blur(0px);
    -webkit-filter: blur(0px);
    animation: uiverse-hue-anim 3s infinite linear;
    -webkit-animation: uiverse-hue-anim 3s infinite linear;
    opacity: 1;
}

.uiverse-biz-container:hover .uiverse-biz-btn-text,
.uiverse-biz-container:has(.uiverse-biz-btn:hover) .uiverse-biz-btn-text,
.uiverse-biz-container:has(.uiverse-biz-btn:focus-visible) .uiverse-biz-btn-text,
.uiverse-biz-container:focus-within .uiverse-biz-btn-text {
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6)) drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.15));
    -webkit-filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6)) drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.15));
    transform: scale(1.03);
    color: #0f172a;
}

.uiverse-biz-container:hover .uiverse-biz-corner:nth-of-type(1),
.uiverse-biz-container:has(.uiverse-biz-btn:hover) .uiverse-biz-corner:nth-of-type(1),
.uiverse-biz-container:has(.uiverse-biz-btn:focus-visible) .uiverse-biz-corner:nth-of-type(1) {
    transform: translate(calc(-1 * var(--corner-multiplier) * var(--corner-dist)), calc(-1 * var(--corner-multiplier) * var(--corner-dist))) rotate(90deg);
    filter: drop-shadow(-6px 6px 1px var(--corner-color)) drop-shadow(-12px 12px 2px var(--corner-color));
}

.uiverse-biz-container:hover .uiverse-biz-corner:nth-of-type(2),
.uiverse-biz-container:has(.uiverse-biz-btn:hover) .uiverse-biz-corner:nth-of-type(2),
.uiverse-biz-container:has(.uiverse-biz-btn:focus-visible) .uiverse-biz-corner:nth-of-type(2) {
    transform: translate(calc(var(--corner-multiplier) * var(--corner-dist)), calc(-1 * var(--corner-multiplier) * var(--corner-dist))) rotate(180deg);
    filter: drop-shadow(-6px 6px 1px var(--corner-color)) drop-shadow(-12px 12px 2px var(--corner-color));
}

.uiverse-biz-container:hover .uiverse-biz-corner:nth-of-type(3),
.uiverse-biz-container:has(.uiverse-biz-btn:hover) .uiverse-biz-corner:nth-of-type(3),
.uiverse-biz-container:has(.uiverse-biz-btn:focus-visible) .uiverse-biz-corner:nth-of-type(3) {
    transform: translate(calc(var(--corner-multiplier) * var(--corner-dist)), calc(var(--corner-multiplier) * var(--corner-dist))) rotate(-90deg);
    filter: drop-shadow(-6px 6px 1px var(--corner-color)) drop-shadow(-12px 12px 2px var(--corner-color));
}

.uiverse-biz-container:hover .uiverse-biz-corner:nth-of-type(4),
.uiverse-biz-container:has(.uiverse-biz-btn:hover) .uiverse-biz-corner:nth-of-type(4),
.uiverse-biz-container:has(.uiverse-biz-btn:focus-visible) .uiverse-biz-corner:nth-of-type(4) {
    transform: translate(calc(-1 * var(--corner-multiplier) * var(--corner-dist)), calc(var(--corner-multiplier) * var(--corner-dist))) rotate(0deg);
    filter: drop-shadow(-6px 6px 1px var(--corner-color)) drop-shadow(-12px 12px 2px var(--corner-color));
}

/* Active Pressed States */
.uiverse-biz-container:has(.uiverse-biz-btn:active) .uiverse-biz-btn {
    transform: scale(0.95);
    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.1));
}
.uiverse-biz-container:has(.uiverse-biz-btn:active) .uiverse-biz-transition-top,
.uiverse-biz-container:has(.uiverse-biz-btn:active) .uiverse-biz-transition-bottom {
    transform: translateY(0px) scale(0.6);
}

@keyframes uiverse-hue-anim {
    0%, 100% { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(-60deg); -webkit-filter: hue-rotate(-60deg); }
}
@-webkit-keyframes uiverse-hue-anim {
    0%, 100% { -webkit-filter: hue-rotate(0deg); }
    50% { -webkit-filter: hue-rotate(-60deg); }
}

/* Promo Popup Scrolling Area */
.popup-scroll-area {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(13, 122, 111, 0.3) transparent;
}
.popup-scroll-area::-webkit-scrollbar {
    width: 5px;
}
.popup-scroll-area::-webkit-scrollbar-thumb {
    background-color: rgba(13, 122, 111, 0.3);
    border-radius: 9999px;
}

/* Anti-Spam Honeypot Field */
.honeypot-field {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =========================================================================
   Responsive Header Account Dropdowns (Mobile, Tablet & Desktop)
   Guaranteed Cross-Device Viewport Fit (Realme, Pixel, iPhone, Samsung)
   ========================================================================= */

/* Mobile Backdrop: Dim and blur the background when dropdown is open */
.header-dropdown-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background-color: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 998 !important;
}

@media (min-width: 640px) {
    .header-dropdown-backdrop {
        display: none !important;
    }
}

/* Mobile-First Floating Dropdown Card: Pinned safely within viewport */
.header-dropdown-menu {
    position: fixed !important;
    top: 4.25rem !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    max-width: 23rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-height: calc(100dvh - 5.25rem) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    z-index: 999 !important;
    box-sizing: border-box !important;
}

/* Desktop & Tablet View (>= 640px): Standard right-aligned dropdown flyout */
@media (min-width: 640px) {
    .header-dropdown-menu {
        position: absolute !important;
        top: calc(100% + 0.5rem) !important;
        right: 0 !important;
        left: auto !important;
        width: 20rem !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-height: calc(100vh - 5rem) !important;
        z-index: 50 !important;
    }
}

/* =========================================================================
   Mobile Bottom Navigation Bar (Ultra-Responsive & Safe-Area Aware)
   Native App Feel for Home, Explore, Quick Book, Bookings, Account
   ========================================================================= */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
    padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
    padding-top: 0.25rem;
}

@media (min-width: 768px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.2rem 0.15rem;
    min-height: 48px;
    width: 100%;
    position: relative;
    text-decoration: none;
    transition: transform 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav-item:active {
    transform: scale(0.92);
}

.mobile-bottom-nav-item .nav-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 28px;
    border-radius: 9999px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-bottom-nav-item.is-active .nav-icon-wrapper {
    background-color: rgba(13, 122, 111, 0.12);
    color: #0d7a6f;
}

.mobile-bottom-nav-item.is-active .nav-label {
    color: #0d7a6f;
    font-weight: 700;
}

.mobile-bottom-nav-item:not(.is-active) {
    color: #64748b;
}

.mobile-bottom-nav-item:not(.is-active) .nav-label {
    color: #64748b;
    font-weight: 500;
}

.mobile-bottom-nav-item:not(.is-active):hover {
    color: #0f172a;
}

.mobile-bottom-nav-item .nav-label {
    font-size: 10px;
    letter-spacing: -0.01em;
    margin-top: 2px;
    line-height: 1;
    transition: color 0.15s ease, font-weight 0.15s ease;
}

.mobile-bottom-fab {
    position: relative;
    margin-top: -1.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-fab-button {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #09544d 0%, #0d7a6f 55%, #14b8a6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px -2px rgba(13, 122, 111, 0.45), 0 4px 8px -2px rgba(13, 122, 111, 0.25);
    border: 3.5px solid #ffffff;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.mobile-bottom-fab:hover .mobile-bottom-fab-button {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 24px -2px rgba(13, 122, 111, 0.55);
}

.mobile-bottom-fab:active .mobile-bottom-fab-button {
    transform: scale(0.92);
}