/**
 * ARIMA FASHIONS — Unified Luxury WordPress Login Branding
 * 
 * Palette:
 * - Champagne Gold: #B99A62 / rgba(185, 154, 98, ...)
 * - Luxury Burgundy: #6F2034 / #521525
 * - Charcoal Noir: #211D1D / #1B1818
 * - Cream Silk / Ivory: #FAF6EE / #F3EBDD / #EDE4D8
 * - Prismatic Glass: rgba(255, 255, 255, 0.72 - 0.88)
 */

/* ==========================================================================
   1. RESET & ROOT VARIABLES
   ========================================================================== */
:root {
    --arima-gold: #B99A62;
    --arima-gold-light: #D4AF37;
    --arima-gold-muted: rgba(185, 154, 98, 0.45);
    --arima-burgundy: #6F2034;
    --arima-burgundy-hover: #561626;
    --arima-charcoal: #211D1D;
    --arima-charcoal-muted: #555555;
    --arima-cream: #FAF6EE;
    --arima-cream-dark: #ECE4D8;
    --arima-font-luxury: 'Bodoni Moda', Georgia, serif;
    --arima-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html {
    min-height: 100vh !important;
    height: 100% !important;
}

body.login {
    min-height: 100vh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #FAF7F2 !important;
    background: linear-gradient(135deg, #FAF7F2 0%, #F6ECE0 35%, #F0E5D7 70%, #EBE0D8 100%) !important;
    font-family: var(--arima-font-body) !important;
    color: var(--arima-charcoal) !important;
    overflow-x: hidden !important;
    position: relative !important;
}

/* Visually hidden screen reader elements */
.login h1.screen-reader-text,
.login .screen-reader-text {
    position: absolute !important;
    margin: -1px !important;
    padding: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
}

/* ==========================================================================
   2. CONTINUOUS FULL-VIEWPORT AMBIENT LIGHTING (NO SEAMS)
   ========================================================================== */

.arima-ambient-canvas {
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.arima-ambient-gold {
    position: absolute !important;
    width: 780px !important;
    height: 780px !important;
    top: -160px !important;
    left: -160px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(185, 154, 98, 0.20) 0%, rgba(185, 154, 98, 0.05) 55%, transparent 72%) !important;
    filter: blur(80px) !important;
}

.arima-ambient-burgundy {
    position: absolute !important;
    width: 720px !important;
    height: 720px !important;
    bottom: -120px !important;
    right: -100px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(111, 32, 52, 0.12) 0%, rgba(111, 32, 52, 0.03) 55%, transparent 72%) !important;
    filter: blur(85px) !important;
}

.arima-ambient-mesh {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.12 !important;
    background-image: radial-gradient(rgba(185, 154, 98, 0.3) 1px, transparent 1px),
                      radial-gradient(rgba(111, 32, 52, 0.15) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    background-position: 0 0, 14px 14px !important;
    mask-image: radial-gradient(circle at center, black 50%, transparent 90%) !important;
    -webkit-mask-image: radial-gradient(circle at center, black 50%, transparent 90%) !important;
}

/* ==========================================================================
   3. UNIFIED TWO-COLUMN LAYOUT (DESKTOP)
   ========================================================================== */

.arima-unified-layout {
    display: grid !important;
    grid-template-columns: 52% 48% !important;
    align-items: center !important;
    max-width: 1120px !important;
    width: 100% !important;
    margin: auto !important;
    padding: 36px 40px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
    flex: 1 0 auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Both columns sit over the continuous background without borders or seams */
.arima-brand-column,
.arima-login-column {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   4. LEFT BRAND COLUMN (ELEGANT, MINIMAL & LEFT-ALIGNED)
   ========================================================================== */

.arima-brand-column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-right: 50px !important;
    padding-left: 10px !important;
}

.arima-brand-inner {
    max-width: 440px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.arima-brand-logo-link {
    display: inline-block !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    transition: transform 0.25s ease !important;
}

.arima-brand-logo-link:hover {
    transform: scale(1.02) !important;
}

.arima-brand-logo {
    max-height: 84px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 12px rgba(185, 154, 98, 0.22)) !important;
}

.arima-brand-title {
    font-family: var(--arima-font-luxury) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: var(--arima-burgundy) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.arima-brand-gold-line {
    width: 56px !important;
    height: 2px !important;
    background: linear-gradient(90deg, #B99A62 0%, rgba(185, 154, 98, 0.25) 100%) !important;
    border-radius: 2px !important;
    margin: 0 0 18px 0 !important;
}

.arima-brand-headline {
    font-family: var(--arima-font-luxury) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    font-style: italic !important;
    color: var(--arima-charcoal) !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em !important;
}

.arima-brand-subtext {
    font-family: var(--arima-font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #5C5552 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    max-width: 380px !important;
}

/* ==========================================================================
   5. RIGHT LOGIN COLUMN (FROSTED GLASS CARD ACCESS)
   ========================================================================== */

.arima-login-column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-left: 20px !important;
}

#login {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Hide WordPress default logo container inside #login (prominent logo in left column) */
#login h1 {
    display: none !important;
}

/* Welcome Back Heading */
.arima-login-heading {
    text-align: left !important;
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
    border: none !important;
}

.arima-login-title {
    font-family: var(--arima-font-luxury) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--arima-burgundy) !important;
    letter-spacing: 0.04em !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.arima-login-subtitle {
    font-family: var(--arima-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6A605B !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Frosted Glass Login Card */
.login form {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 20px !important;
    padding: 26px 28px 24px !important;
    box-shadow: 
        0 20px 40px -10px rgba(70, 30, 45, 0.07),
        0 8px 16px -4px rgba(185, 154, 98, 0.08),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 1px rgba(185, 154, 98, 0.18) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* Specular Gloss Reflection */
.login form::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 45% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0) 100%) !important;
    pointer-events: none !important;
    border-radius: 20px 20px 70% 20px !important;
    z-index: 1 !important;
}

/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .login form {
        background: rgba(250, 247, 241, 0.96) !important;
    }
}

/* Form Controls & Labels */
.login form > p,
.login .user-pass-wrap,
.login .forgetmenot,
.login .submit {
    position: relative !important;
    z-index: 2 !important;
}

.login label {
    font-family: var(--arima-font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--arima-charcoal) !important;
    margin-bottom: 6px !important;
    display: block !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.login input[type="text"],
.login input[type="email"] {
    font-family: var(--arima-font-body) !important;
    font-size: 14px !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 14px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(185, 154, 98, 0.38) !important;
    border-radius: 10px !important;
    color: var(--arima-charcoal) !important;
    box-shadow: 
        inset 0 1.5px 3px rgba(0, 0, 0, 0.03),
        0 2px 6px rgba(185, 154, 98, 0.05) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin-bottom: 14px !important;
}

.login input[type="password"] {
    font-family: var(--arima-font-body) !important;
    font-size: 14px !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 44px 0 14px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(185, 154, 98, 0.38) !important;
    border-radius: 10px !important;
    color: var(--arima-charcoal) !important;
    box-shadow: 
        inset 0 1.5px 3px rgba(0, 0, 0, 0.03),
        0 2px 6px rgba(185, 154, 98, 0.05) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin-bottom: 0 !important; /* Zero margin ensures .wp-pwd height matches input height for 0.00px eye alignment */
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: var(--arima-burgundy) !important;
    box-shadow: 
        0 0 0 3px rgba(111, 32, 52, 0.14),
        0 4px 12px rgba(185, 154, 98, 0.15),
        inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    background: #FFFFFF !important;
    outline: none !important;
}

/* Password Toggle Eye Button (0.00px Centering) */
.login .user-pass-wrap {
    margin-bottom: 14px !important;
    position: relative !important;
}

.login .wp-pwd {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.login .button.wp-hide-pw {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--arima-burgundy) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    border-radius: 6px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.login .button.wp-hide-pw .dashicons {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    color: var(--arima-burgundy) !important;
    display: block !important;
    margin: 0 !important;
}

.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus {
    color: var(--arima-burgundy-hover) !important;
    background: rgba(111, 32, 52, 0.08) !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remember Me Checkbox */
.login .forgetmenot {
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
}

.login .forgetmenot label {
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--arima-charcoal) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
}

.login .forgetmenot input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    border: 1px solid rgba(185, 154, 98, 0.5) !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.login .forgetmenot input[type="checkbox"]:checked {
    background: var(--arima-burgundy) !important;
    border-color: var(--arima-burgundy) !important;
}

/* Primary "Sign In" Button */
.login .button-primary {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    line-height: 42px !important;
    text-align: center !important;
    background: linear-gradient(135deg, #6F2034 0%, #521525 100%) !important;
    border: 1px solid rgba(185, 154, 98, 0.45) !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    font-family: var(--arima-font-body) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    box-shadow: 
        0 8px 20px -4px rgba(111, 32, 52, 0.35),
        0 2px 6px rgba(185, 154, 98, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease !important;
    float: none !important;
    margin-top: 6px !important;
}

.login .button-primary:hover,
.login .button-primary:focus {
    background: linear-gradient(135deg, #7F263D 0%, #5E192B 100%) !important;
    border-color: var(--arima-gold) !important;
    box-shadow: 
        0 12px 24px -4px rgba(111, 32, 52, 0.45),
        0 4px 10px rgba(185, 154, 98, 0.3) !important;
    transform: translateY(-1px) !important;
    color: #FFFFFF !important;
    outline: none !important;
}

/* ==========================================================================
   6. DISCREET LINKS & SINGLE GLOBAL FOOTER
   ========================================================================== */

#nav, #backtoblog {
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 10 !important;
}

#nav a, #backtoblog a {
    font-family: var(--arima-font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #666666 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

#nav a:hover, #backtoblog a:hover {
    color: var(--arima-burgundy) !important;
}

.privacy-policy-page-link {
    text-align: center !important;
    margin-top: 8px !important;
    position: relative !important;
    z-index: 10 !important;
}

.privacy-policy-page-link a {
    font-family: var(--arima-font-body) !important;
    font-size: 11px !important;
    color: #888888 !important;
    text-decoration: none !important;
}

/* Single Subtle Global Footer */
.arima-unified-footer {
    width: 100% !important;
    text-align: center !important;
    padding: 18px 20px 22px !important;
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.arima-unified-footer p {
    margin: 0 !important;
    font-family: var(--arima-font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #7D736E !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ==========================================================================
   7. ERROR & STATUS NOTICES
   ========================================================================== */

.login #login_error,
.login .message,
.login .notice,
.login .success {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.8) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 
        0 14px 30px -8px rgba(40, 20, 30, 0.08),
        0 0 0 1px rgba(185, 154, 98, 0.25) !important;
    font-family: var(--arima-font-body) !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--arima-charcoal) !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}

.login #login_error {
    border-left: 4px solid var(--arima-burgundy) !important;
}

.login #login_error a {
    color: var(--arima-burgundy) !important;
    font-weight: 600 !important;
}

.login .message,
.login .notice.notice-info {
    border-left: 4px solid var(--arima-gold) !important;
}

/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS (LAPTOP, TABLET & MOBILE)
   ========================================================================== */

/* Laptop Compact / Short Desktop Screens (height <= 760px, e.g. 1366x768, 1276x640) */
@media (min-width: 861px) and (max-height: 760px) {
    .arima-unified-layout {
        padding: 18px 36px !important;
    }
    .arima-brand-logo {
        max-height: 68px !important;
        margin-bottom: 12px !important;
    }
    .arima-brand-title {
        font-size: 26px !important;
        margin-bottom: 8px !important;
    }
    .arima-brand-gold-line {
        margin-bottom: 12px !important;
    }
    .arima-brand-headline {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
    .arima-brand-subtext {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
    .arima-login-heading {
        margin-bottom: 12px !important;
    }
    .arima-login-title {
        font-size: 23px !important;
    }
    .login form {
        padding: 22px 24px 20px !important;
    }
    .arima-unified-footer {
        padding: 12px 16px 16px !important;
    }
}

/* Tablet & Mobile Stacked Layout (<= 860px) */
@media (max-width: 860px) {
    .arima-unified-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 24px 16px 20px !important;
        gap: 0 !important;
    }

    .arima-brand-column {
        align-items: center !important;
        padding: 0 0 16px 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .arima-brand-inner {
        align-items: center !important;
        text-align: center !important;
        max-width: 380px !important;
    }

    .arima-brand-logo {
        max-height: 62px !important;
        margin: 0 auto !important;
    }

    .arima-brand-title {
        font-size: 24px !important;
        letter-spacing: 0.14em !important;
        margin: 8px 0 0 0 !important;
    }

    /* Hide decorative line, headline and marketing copy on mobile to keep form prominent and above the fold */
    .arima-brand-gold-line,
    .arima-brand-headline,
    .arima-brand-subtext {
        display: none !important;
    }

    .arima-login-column {
        align-items: center !important;
        padding: 0 !important;
        width: 100% !important;
    }

    #login {
        max-width: 380px !important;
        width: 100% !important;
    }

    .arima-login-heading {
        text-align: center !important;
        margin-bottom: 14px !important;
    }

    .arima-login-title {
        font-size: 22px !important;
    }

    .login form {
        padding: 22px 20px 20px !important;
        border-radius: 18px !important;
    }
}

/* Small Mobile Screens (<= 380px) */
@media (max-width: 380px) {
    .arima-unified-layout {
        padding: 16px 12px 16px !important;
    }
    .arima-brand-logo {
        max-height: 52px !important;
    }
    .arima-brand-title {
        font-size: 20px !important;
    }
    .login form {
        padding: 18px 14px 16px !important;
    }
    .arima-login-title {
        font-size: 20px !important;
    }
}

/* Accessibility & Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .arima-brand-logo-link:hover,
    .login .button-primary:hover {
        transform: none !important;
    }
}

:focus-visible {
    outline: 2px solid var(--arima-burgundy) !important;
    outline-offset: 2px !important;
}