/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/




}

/* Post Content Link Color - SCOPED TO SINGLE POSTS */
.single-post .post-content-area a {
    color: #FE4F70;
    text-decoration: none;
    position: relative;
    top: 0;
    transition: all 0.2s;
}

.single-post .post-content-area a:hover {
    color: #d23e5a;
    text-decoration: none;
    top: -2px;
}

/* SOCIAL SHARE BUTTONS */
.ntm-share-box {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.ntm-share-label {
    font-weight: 700;
    font-size: 16px;
    color: #333;
}

.ntm-share-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ntm-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Center icon */
    width: 40px;
    /* Fixed width */
    height: 40px;
    /* Fixed height */
    padding: 0;
    /* Reset padding */
    border-radius: 6px;
    font-size: 18px;
    /* Larger icon */
    text-decoration: none !important;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    color: #fff !important;
    line-height: 1;
    position: relative;
    /* For tooltip */
}

/* Tooltip Styles */
.ntm-share-btn[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    /* End position */
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    animation: ntm-tooltip-fade 0.2s forwards;
    pointer-events: none;
    z-index: 101;
    /* Text above arrow */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.ntm-share-btn[data-tooltip]:hover::after {
    content: '';
    position: absolute;
    bottom: 115%;
    /* End position (below box) */
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
    opacity: 0;
    animation: ntm-tooltip-fade 0.2s forwards;
    pointer-events: none;
    z-index: 100;
}

@keyframes ntm-tooltip-fade {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.ntm-share-btn img,
.ntm-share-btn svg {
    width: 20px;
    height: auto;
    display: block;
    fill: none;
    stroke: currentColor;
}

.ntm-share-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.share-fb {
    background: #1877f2;
}

.share-zalo {
    background: #0068ff;
}

.share-x {
    background: #000;
}

.share-copy {
    background: #6c757d;
    color: #fff;
}

.share-copy.copied {
    background: #28a745;
}

/* LIKE BUTTON STYLES */
.ntm-reaction-buttons button {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 10px 25px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    color: #555;
    outline: none;
}

.ntm-reaction-buttons button:hover {
    background: #f5f5f5;
    transform: translateY(-2px);
    border-color: #bbb;
}

.ntm-reaction-buttons button.active {
    background: #d26e4b;
    /* Primary Color */
    color: #fff;
    border-color: #d26e4b;
}

.ntm-reaction-buttons button.active .icon {
    animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ntm-reaction-buttons button .count {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
}

.ntm-reaction-buttons button.active .count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* ============================================================================
   CUSTOM CODE BLOCK STYLING (DARK THEME + COPY BUTTON)
   ============================================================================ */
/* ============================================================================
   CUSTOM CODE BLOCK STYLING (DARK THEME + COPY BUTTON + HIGHLIGHT.JS)
   ============================================================================ */
pre {
    background: #282c34 !important;
    /* Force Atom One Dark bg */
    color: #abb2bf;
    padding: 20px;
    padding-top: 45px;
    /* Space for "header" */
    border-radius: 8px;
    position: relative;
    overflow-x: auto;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.6;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
}

/* Ensure inner code block is transparent and respects padding */
pre code.hljs,
pre code {
    background: transparent !important;
    padding: 0 !important;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* MacOS Window Dots (Red, Yellow, Green) */
pre::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff5f56;
    /* Red */
    box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
    /* Yellow, Green via shadow */
    z-index: 10;
}

/* Scrollbar Styling for Code Blocks */
pre::-webkit-scrollbar {
    height: 8px;
    background: #282c34;
}

pre::-webkit-scrollbar-thumb {
    background: #4b5263;
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
    background: #5c6370;
}

/* Copy Button */
.ntm-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #dcdcdc;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 1;
    /* Always visible */
    z-index: 20;
}

.ntm-copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ntm-copy-btn.copied {
    background: #28a745;
    color: #fff;
}

/* ============================================================================
   HIGHLIGHT.JS ATOM ONE DARK THEME (LOCAL FALLBACK)
   ============================================================================ */
pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

code.hljs {
    padding: 3px 5px
}

.hljs {
    color: #abb2bf;
    background: #282c34
}

.hljs-comment,
.hljs-quote {
    color: #5c6370;
    font-style: italic
}

.hljs-doctag,
.hljs-formula,
.hljs-keyword {
    color: #c678dd
}

.hljs-deletion,
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
    color: #e06c75
}

.hljs-literal {
    color: #56b6c2
}

.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
    color: #98c379
}

.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
    color: #d19a66
}

.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
    color: #61aeee
}

.hljs-built_in,
.hljs-class .hljs-title,
.hljs-title.class_ {
    color: #e6c07b
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: 700
}

.hljs-link {
    text-decoration: underline
}

/* Related Posts Title Fix */
.nguyenthaimmo-post-title {
    font-size: 15px;
    line-height: 1.4;
    max-height: 5.5em;
    /* 3 lines * 1.4em */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin-top: 10px;
}

div#comments {
    background: #fff;
    border-radius: 12px;
}

div#wpdcom {
    padding: 15px;
}

/* =====================================================
   ANIMATED SVG LOGIN FORM
===================================================== */

/* SVG Container */
.svgContainer {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 1em;
    border-radius: 50%;
    background: none;
    border: solid 2.5px #3A5E77;
    overflow: hidden;
    pointer-events: none;
}

.svgContainer div {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
}

.svgContainer .mySVG {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible !important;
}

/* Make arms visible by removing clip-path */
.svgContainer .arms {
    clip-path: none !important;
}

/* Ensure arm groups are visible */
.svgContainer .armL,
.svgContainer .armR {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Input Styling for Animation */
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
    position: relative;
    margin-bottom: 1.5em;
}

.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register input[type="email"] {
    display: block;
    width: 100%;
    height: 50px !important;
    padding: 12px 1em 0;
    background-color: #f3fafd !important;
    border: solid 2px #217093 !important;
    border-radius: 4px !important;
    font-size: 1.1em !important;
    color: #353538 !important;
    font-weight: 600 !important;
    transition: box-shadow 0.2s linear, border-color 0.25s ease-out !important;
    box-sizing: border-box;
}

.woocommerce-form-login input[type="text"]:focus,
.woocommerce-form-login input[type="password"]:focus,
.woocommerce-form-login input[type="email"]:focus,
.woocommerce-form-register input[type="text"]:focus,
.woocommerce-form-register input[type="password"]:focus,
.woocommerce-form-register input[type="email"]:focus {
    outline: none !important;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) !important;
    border: solid 2px #4eb8dd !important;
}

/* Label Styling */
.woocommerce-form-login label,
.woocommerce-form-register label {
    display: block;
    margin-bottom: 12px;
    font-size: 1.1em;
    color: #217093;
    font-weight: 700;
}

/* Helper Text Animation */
.form-row .helper {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    transform: translate(1.4em, 2.6em) scale(1);
    transform-origin: 0 0;
    color: #217093;
    font-size: 1em;
    font-weight: 400;
    opacity: 0.65;
    pointer-events: none;
    transition: transform 0.2s ease-out, opacity 0.2s linear;
}

.form-row.focusWithText .helper {
    transform: translate(1.4em, 1.8em) scale(0.65);
    opacity: 1;
}

/* Button Styling */
.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"] {
    display: block;
    width: 100%;
    height: 50px !important;
    background-color: #4eb8dd !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 1.3em !important;
    color: #FFF !important;
    font-weight: 600 !important;
    text-align: center !important;
    transition: background-color 0.2s ease-out !important;
    cursor: pointer;
}

.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register button[type="submit"]:hover {
    background-color: #0bdada !important;
}

/* Center login/register titles */
.account-login-inner h3,
.account-register-inner h3 {
    text-align: center;
    margin-bottom: 1em;
    color: #0bdada;
}

.dark,
.dark p,
.dark td {
    color: #0bdada;
}

.woocommerce-privacy-policy-text {
    color: #0bdada;
}

/* Force arms to be visible */
.svgContainer .arms,
.svgContainer .armL,
.svgContainer .armR {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .svgContainer {
        width: 150px;
        height: 150px;
    }

    .woocommerce-form-login input,
    .woocommerce-form-register input,
    .woocommerce-form-login button,
    .woocommerce-form-register button {
        height: 55px !important;
        font-size: 1.1em !important;
    }
}

/* Hide tongue (red dot) in resting state */
.svgContainer .tongue {
    display: none;
}

/* Login Form Helper Styling */
.woocommerce-form-row {
    position: relative;
}

/* Hide default labels */
.woocommerce-form-row label {
    display: none;
}

.ntm-helper {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #999;
    transition: all 0.3s ease;
    padding: 0 5px;
    background-color: transparent;
    z-index: 10;
}

/* User requested styling: Background #0bdada, Border Radius 8px */
/* Move up on focus or if valid */
.woocommerce-Input:focus+.ntm-helper,
.woocommerce-Input:valid+.ntm-helper,
.focusWithText .ntm-helper {
    top: -12px;
    /* Sitting on the border */
    transform: translateY(0);
    font-size: 14px;
    background-color: #0bdada;
    color: #fff;
    border-radius: 5px;
    padding: 2px 8px;
}

/* Ensure helper is over input border */
.woocommerce-Input {
    background: transparent !important;
    z-index: 1;
    position: relative;
}

/* =====================================================
   SLIDING LOGIN / REGISTER FORM - REFINED
===================================================== */

/* Main Container */
.ntm-login-wrapper {
    /* background-color: #fff; */
    background: transparent;
    /* Transparent to let theme dark bg show */
    border-radius: 10px;
    /* box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); */
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-height: 750px;
    /* Increased height */
    display: flex;
    /* For mobile flow */
    flex-direction: column;
}

.account-container.lightbox-inner {
    padding: 0 !important;
    /* Reset padding for lightbox */
    overflow: hidden;
    /* Contain sliding elements */
    border-radius: 10px;
}

/* Form Containers */
.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
    background-color: transparent;
    /* Transparent to show theme bg */
    width: 100%;
    /* Default for mobile/fallback */
}

/* Sign In (Login) - Default visible on left (Desktop: Z-index 2) */
.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

/* Sign Up (Register) - Default hidden/under on left (Desktop) */
.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

/* Active State: Move Sign In out, Bring Sign Up in */
.ntm-login-wrapper.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.ntm-login-wrapper.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {

    0%,
    49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%,
    100% {
        opacity: 1;
        z-index: 5;
    }
}

/* Overlay Container (The colored slider) */
.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.ntm-login-wrapper.right-panel-active .overlay-container {
    transform: translateX(-100%);
}

/* Overlay Gradient & Panels */
.overlay {
    background: #020d18;
    /* Dark background matching theme */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    /* Double width to hold both panels */
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.ntm-login-wrapper.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-panel h1 {
    color: #fff;
    margin-bottom: 0;
    font-weight: bold;
}

.overlay-panel p {
    font-size: 14px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}

/* Buttons in Overlay */
button.ghost {
    background-color: transparent;
    border-color: #4eb8dd;
    /* Match site primary color */
    border: 2px solid #4eb8dd;
    border-radius: 4px;
    /* Standard radius */
    padding: 12px 45px;
    color: #4eb8dd;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.2s ease-in;
    cursor: pointer;
}

button.ghost:active {
    transform: scale(0.95);
}

button.ghost:hover {
    background-color: #4eb8dd;
    color: #fff;
}

.overlay-left {
    transform: translateX(-20%);
}

.ntm-login-wrapper.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.ntm-login-wrapper.right-panel-active .overlay-right {
    transform: translateX(20%);
}

/* Inner Content Styling */
.account-login-inner,
.account-register-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    /* More padding for centered look */
    /* Remove justify-content: center to let spacing dictate naturally */
}

/* Scrollable content */
.is-scrollable {
    overflow-y: auto;
    max-height: 100%;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.is-scrollable::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

/* =====================================================
   MOBILE RESPONSIVENESS (< 768px)
===================================================== */
@media (max-width: 768px) {

    /* Disable sliding mechanics */
    .ntm-login-wrapper {
        min-height: auto;
        display: block;
        /* Standard block */
        border-radius: 0;
    }

    .form-container {
        position: relative;
        /* Stack them or hide them */
        width: 100%;
        height: auto;
        top: auto;
        left: auto;
        transform: none !important;
        opacity: 1 !important;
        z-index: 1 !important;
        display: none;
        /* Hide both by default, JS will toggle */
        padding: 30px 15px;
    }

    /* By default show Sign In */
    .sign-in-container {
        display: block;
    }

    /* JavaScript will toggle 'active-form' class or direct display */
    .ntm-login-wrapper.mobile-show-register .sign-in-container {
        display: none;
    }

    .ntm-login-wrapper.mobile-show-register .sign-up-container {
        display: block;
    }

    /* Hide Overlay on Mobile */
    .overlay-container {
        display: none;
    }

    /* Adjust Padding */
    .account-login-inner,
    .account-register-inner {
        padding: 0;
    }

    /* Mobile Toggle Link Styling */
    .mobile-toggle-link {
        text-align: center;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

    .mobile-toggle-link a {
        font-weight: bold;
        color: #217093;
        text-decoration: underline;
    }
}

/* Utility to hide elements on small screens (flatsome helper usually present, but defining to be safe) */
.show-for-small {
    display: none;
}

@media (max-width: 768px) {
    .show-for-small {
        display: block;
    }

    .hide-for-small {
        display: none !important;
    }
}

/* ==========================================
   CUSTOM AUTH FORMS - SLIDING PANEL STYLE (Ported from Mende)
   ========================================== */

/* Container */
.custom-auth-wrapper {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 50px;
}

.auth-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
    width: 960px;
    max-width: 100%;
    min-height: 800px;
    /* Increased height for character */
}

/* Form Containers */
.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
    background-color: #fff;
    padding: 20px;
    display: flex;
    /* Flex to center content vertically/horizontally */
    flex-direction: column;
    width: 50%;
    overflow-y: auto;
    /* Allow scroll if content is too long */
}

/* Ensure inner content takes width */
.auth-container .account-login-inner,
.auth-container .account-register-inner {
    width: 100%;
    margin: auto;
    /* Center vertically */
    max-width: 400px;
    /* Limit width of form inside */
}


.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.auth-container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.auth-container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {

    0%,
    49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%,
    100% {
        opacity: 1;
        z-index: 5;
    }
}

/* Overlay Container */
.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
    pointer-events: none;
    /* Let clicks pass through if needed, but buttons handle pointer-events */
}

.overlay-container * {
    pointer-events: auto;
}

.auth-container.right-panel-active .overlay-container {
    transform: translateX(-100%);
}

/* Overlay */
.overlay {
    background: #7c3aed;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.auth-container.right-panel-active .overlay {
    transform: translateX(50%);
}

/* Overlay Panels */
.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-panel h1 {
    color: #fff;
    margin-bottom: 0.5em;
}

.overlay-panel p {
    color: #fff;
    margin-bottom: 2em;
}

.overlay-panel button.ghost {
    border-radius: 20px;
    border: 1px solid #FFFFFF;
    background-color: transparent;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
    cursor: pointer;
}

.overlay-panel button.ghost:hover {
    background: #fff;
    color: #333;
}

.overlay-left {
    transform: translateX(-20%);
}

.auth-container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.auth-container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

/* Mobile Toggle Link */
.mobile-toggle-link {
    display: none;
    font-size: 14px;
    color: #666;
    margin: 10px 0;
    text-align: center;
}

.mobile-toggle-link a {
    color: #7c3aed;
    font-weight: 600;
    text-decoration: none;
    margin-left: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .auth-container {
        min-height: 800px;
        box-shadow: none;
        border-radius: 0;
    }

    .form-container {
        width: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0.4s ease-in-out, visibility 0.4s;
        transform: none !important;
        /* Disable sliding on mobile */
    }

    /* Sign In - Default Visible */
    .sign-in-container {
        width: 100% !important;
        z-index: 10;
        opacity: 1;
        visibility: visible;
    }

    /* Active: Hide Sign In */
    .auth-container.right-panel-active .sign-in-container {
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: -1 !important;
        transform: none !important;
    }

    /* Sign Up - Default Hidden */
    .sign-up-container {
        width: 100% !important;
        z-index: -1;
        opacity: 0;
        visibility: hidden;
    }

    /* Active: Show Sign Up */
    .auth-container.right-panel-active .sign-up-container {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10 !important;
        transform: none !important;
    }

    .overlay-container {
        display: none !important;
    }

    /* Show mobile toggle link */
    .mobile-toggle-link {
        display: block;
    }
}


/* Mobile styling adjustments for black text and layout */
@media (max-width: 768px) {

    /* Ensure form text is black */
    .auth-container form h3,
    .auth-container form p,
    .auth-container form label,
    .auth-container form a {
        color: #000;
    }

    /* Ensure container takes full width on mobile */
    .auth-container {
        width: 100%;
        margin-top: 20px;
        min-height: 850px;
        /* Ensure enough height for absolute children */
        height: auto;
        padding-bottom: 20px;
    }

    /* Keep forms absolute for toggling effect */
    .form-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: auto;
    }

    /* Toggle Link styling */
    .mobile-toggle-link {
        color: #333;
        margin-bottom: 15px;
    }

    .mobile-toggle-link a {
        color: #0bdada;
        /* Use brand color */
        font-weight: bold;
    }

    .mobile-toggle-link a:hover {
        color: #000 !important;
    }
}


/* User requested text colors */
.auth-container form h3,
.woocommerce-privacy-policy-text {
    color: #0bdada !important;
}

.woocommerce-privacy-policy-text a {
    color: #0bdada !important;
    text-decoration: underline;
}

/* Toast Notification Style for WooCommerce Messages */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 99999 !important;
    background-color: #fff !important;
    /* White background for clean look */
    color: #333 !important;
    padding: 25px 35px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    text-align: center !important;
    max-width: 90% !important;
    width: auto !important;
    min-width: 300px;
    border: none !important;
    border-top: 5px solid #0bdada !important;
    /* Brand color top border */
    animation: toastPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    /* Reset margins */
}

/* Specific styling for error to be red */
.woocommerce-error {
    border-top-color: #e74c3c !important;
}

/* Remove default list styles inside */
.woocommerce-error li {
    list-style: none !important;
    margin: 0 !important;
    font-size: 16px;
    font-weight: 600;
}

.woocommerce-message li,
.woocommerce-info li {
    list-style: none !important;
}

/* Add a pseudo-element for an icon if desired, or just keep distinct borders */

@keyframes toastPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -40%) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Ensure backdrop blur or dim if possible (optional, but adds to the model feel) */
/* We can't easily add a backdrop div without JS modification of HTML, but box-shadow helps pop it out. */