/* =========================================
   STRANNOST - GLASSMORPHISM SYSTEM
   ========================================= */

/* Bars (Solid Black with White Glass Overlay) */
.glass-bar-dark {
    background: var(--bar-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-white);
}

.glass-bar-bottom {
    background: var(--bar-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-top: 1px solid var(--glass-border);
    color: var(--text-white);
}

/* Golden Buttons on White Glass */
.glass-btn-white {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--accent-gold);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.glass-btn-white:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.25);
}

/* 🌑 DARK MODAL COMPONENTS */
.glass-card-dark {
    background: rgba(20, 20, 20, 0.95) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    color: #FFFFFF !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
}

.glass-input-dark {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    color: #FFFFFF !important;
    padding: 14px 18px !important;
    outline: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 100% !important;
    font-size: 15px !important;
    display: block !important;
}

.glass-input-dark:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #D4AF37 !important;
    box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.1) !important;
}

.glass-label-dark {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #D4AF37 !important;
    margin-bottom: 8px !important;
    display: block !important;
    margin-left: 2px !important;
    background: transparent !important;
}

/* 🧼 AGGRESSIVE AUTOFILL RESET (Force Dark) */
input.glass-input-dark:-webkit-autofill,
input.glass-input-dark:-webkit-autofill:hover,
input.glass-input-dark:-webkit-autofill:focus,
input.glass-input-dark:-internal-autofill-selected,
textarea.glass-input-dark:-webkit-autofill,
textarea.glass-input-dark:-webkit-autofill:hover,
textarea.glass-input-dark:-webkit-autofill:focus {
    -webkit-text-fill-color: #FFFFFF !important;
    background-color: #1a1a1a !important;
    color: #FFF !important;
    -webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset !important;
    caret-color: white !important;
    border: 1px solid #D4AF37 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Ensure type="tel" and others are also caught */
input[type="tel"].glass-input-dark,
input[type="text"].glass-input-dark,
textarea.glass-input-dark {
    background: rgba(255, 255, 255, 0.05) !important;
    color: white !important;
}

.glass-input-dark::placeholder {
    color: rgba(255, 255, 255, 0.2) !important;
}

/* Circular Button (Gold on White Glass) */
.glass-circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.2s;
}

.glass-circle-btn:active {
    transform: scale(0.9);
}