/* =============================================================================
   Hano Header Login — v1.2.5
   Shortcode: [hano_header_login]

   All selectors are scoped to #hano-header-login-root or
   .hano-header-modal-overlay so that Elementor/theme global styles
   (input borders, button backgrounds, focus rings, etc.) cannot bleed in.
   ============================================================================= */

/* ── Root container ──────────────────────────────────────────────────────────── */
#hano-header-login-root {
    display: inline-flex !important;
    align-items: center !important;
    font-family: inherit;
}

/* ── Reset ALL elements inside the plugin containers ─────────────────────────
   Prevents Elementor/theme from injecting red borders, dark backgrounds,
   or unexpected box-shadows on our inputs and buttons.
   ─────────────────────────────────────────────────────────────────────────── */
#hano-header-login-root *,
#hano-header-login-root *::before,
#hano-header-login-root *::after,
.hano-header-modal-overlay *,
.hano-header-modal-overlay *::before,
.hano-header-modal-overlay *::after {
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

/* Kill Elementor/theme red borders and dark backgrounds on inputs and buttons */
#hano-header-login-root input,
#hano-header-login-root button,
.hano-header-modal-overlay input,
.hano-header-modal-overlay button {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    color: inherit !important;
    font-family: inherit !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

/* ── Header button base ──────────────────────────────────────────────────────── */
#hano-header-login-root .hano-header-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s ease, opacity 0.15s ease !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── "Logg inn" text button (logged-out state) ───────────────────────────────── */
#hano-header-login-root .hano-header-btn--text {
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: inherit !important;
    background: #e5e7eb !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 38px !important;
}

#hano-header-login-root .hano-header-btn--text:hover {
    background: #d1d5db !important;
}

/* ── User icon button (logged-in state) ──────────────────────────────────────── */
#hano-header-login-root .hano-header-btn--icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: currentColor !important;
    padding: 0 !important;
}

#hano-header-login-root .hano-header-btn--icon:hover {
    background: rgba(0, 0, 0, 0.07) !important;
}

#hano-header-login-root .hano-header-btn--icon svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* ── Dropdown (logged-in) ────────────────────────────────────────────────────── */
#hano-header-login-root .hano-header-dropdown-wrap {
    position: relative !important;
    display: inline-flex !important;
}

#hano-header-login-root .hano-header-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    min-width: 180px !important;
    z-index: 999998 !important;
    overflow: hidden !important;
    animation: hano-hl-in 0.15s ease !important;
}

#hano-header-login-root .hano-header-dropdown__item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #374151 !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background 0.12s !important;
    box-shadow: none !important;
    text-align: left !important;
    line-height: 1.4 !important;
    height: auto !important;
}

#hano-header-login-root .hano-header-dropdown__item:hover {
    background: #f3f4f6 !important;
}

#hano-header-login-root .hano-header-dropdown__item svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    color: #6b7280 !important;
}

#hano-header-login-root .hano-header-dropdown__item--logout {
    color: #b91c1c !important;
    border-top: 1px solid #f3f4f6 !important;
    background: #ffffff !important;
}

#hano-header-login-root .hano-header-dropdown__item--logout svg {
    color: #b91c1c !important;
}

/* =============================================================================
   MODAL OVERLAY — appended to <body>, scoped via .hano-header-modal-overlay
   ============================================================================= */

.hano-header-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.hano-header-modal {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18) !important;
    padding: 36px 32px 28px !important;
    width: 100% !important;
    max-width: 400px !important;
    position: relative !important;
    animation: hano-hl-in 0.2s ease !important;
    border: none !important;
}

@keyframes hano-hl-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    }
}

/* ── Close button ────────────────────────────────────────────────────────────── */
.hano-header-modal .hano-header-modal__close {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    color: #6b7280 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: background 0.15s !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.hano-header-modal .hano-header-modal__close:hover {
    background: #f3f4f6 !important;
    color: #111111 !important;
}

/* ── Title & subtitle ────────────────────────────────────────────────────────── */
.hano-header-modal .hano-header-modal__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 0 0 4px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.hano-header-modal .hano-header-modal__sub {
    font-size: 14px !important;
    color: #6b7280 !important;
    text-align: center !important;
    margin: 0 0 24px !important;
    line-height: 1.5 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

/* ── Error message ───────────────────────────────────────────────────────────── */
.hano-header-modal .hano-header-modal__error {
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 8px !important;
    color: #b91c1c !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    box-shadow: none !important;
}

/* ── Form fields ─────────────────────────────────────────────────────────────── */
.hano-header-modal .hano-header-field {
    margin-bottom: 16px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.hano-header-modal .hano-header-field label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1.4 !important;
}

.hano-header-modal .hano-header-field-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.hano-header-modal .hano-header-field-wrap svg.field-icon {
    position: absolute !important;
    left: 12px !important;
    width: 16px !important;
    height: 16px !important;
    color: #9ca3af !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
}

/* ── Input fields — full reset then explicit styling ─────────────────────────── */
.hano-header-modal .hano-header-field input[type="email"],
.hano-header-modal .hano-header-field input[type="password"],
.hano-header-modal .hano-header-field input[type="text"] {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 48px 0 38px !important;
    background: #f3f4f6 !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: #111111 !important;
    transition: border-color 0.15s, background 0.15s !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: 48px !important;
}

.hano-header-modal .hano-header-field input[type="email"]:focus,
.hano-header-modal .hano-header-field input[type="password"]:focus,
.hano-header-modal .hano-header-field input[type="text"]:focus {
    background: #ffffff !important;
    border: 1.5px solid #2c2525 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Vis/Skjul passord button ────────────────────────────────────────────────── */
.hano-header-modal .hano-header-toggle-pw {
    position: absolute !important;
    right: 10px !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #6b7280 !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    transition: background 0.15s !important;
    line-height: 1 !important;
    box-shadow: none !important;
    height: auto !important;
}

.hano-header-modal .hano-header-toggle-pw:hover {
    background: #e5e7eb !important;
    color: #111111 !important;
}

/* ── Submit button ───────────────────────────────────────────────────────────── */
.hano-header-modal .hano-header-modal__submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 24px !important;
    background: #2c2525 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: background 0.15s, opacity 0.15s !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    line-height: 1 !important;
    text-align: center !important;
}

.hano-header-modal .hano-header-modal__submit:hover {
    background: #1a1515 !important;
}

.hano-header-modal .hano-header-modal__submit:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: #2c2525 !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .hano-header-modal {
        padding: 28px 20px 22px !important;
    }
}