/* =============================================================
 * UK Coin Hunt — Login / Register / Reset Modals (2026)
 *
 * The HTML in footer.php uses Bootstrap modals because the
 * existing JS targets `.custom-login-system #customLoginModal`
 * etc. Rather than restructure the DOM (and risk breaking JS),
 * this stylesheet repaints the modals using --ukch-* tokens so
 * they match the homepage / contact / checkout design language.
 * ============================================================= */

/* Backdrop tint — slightly warm so it ties to the ivory palette
 * instead of feeling generically Bootstrap-grey. */
.modal-backdrop.show {
    background-color: rgba(28, 28, 30, 0.55);
}

/* ====================== Modal container ====================== */

.custom-login-system .modal-content,
.custom-register-system .modal-content,
.custom-reset-password-system .modal-content {
    background:    var(--ukch-color-paper);
    color:         var(--ukch-color-ink);
    border:        1px solid var(--ukch-color-line);
    border-radius: var(--ukch-radius-lg);
    box-shadow:    var(--ukch-shadow-4);
    padding:       var(--ukch-space-2);
    overflow:      hidden;
}

.custom-login-system .modal-dialog,
.custom-register-system .modal-dialog,
.custom-reset-password-system .modal-dialog {
    max-width: 440px;
}

/* ====================== Header ====================== */

.custom-login-system .modal-header,
.custom-register-system .modal-header,
.custom-reset-password-system .modal-header {
    padding-bottom: var(--ukch-space-3);
    border-bottom: 0;
    align-items: center;
    gap: 8px;
}

.custom-login-system .modal-title,
.custom-register-system .modal-title,
.custom-reset-password-system .modal-title {
    font-family:    var(--ukch-font-serif);
    font-size:      var(--ukch-fs-xl);
    font-weight:    var(--ukch-fw-medium);
    line-height:    var(--ukch-lh-tight);
    letter-spacing: var(--ukch-tracking-tight);
    color:          var(--ukch-color-ink);
}

/* Eyebrow strip above title — added via ::before so we don't have
 * to edit the markup. Renders inside .modal-header. */
.custom-login-system .modal-title::before,
.custom-register-system .modal-title::before,
.custom-reset-password-system .modal-title::before {
    content: "";
    display: block;
    width:   28px;
    height:  2px;
    margin-bottom: 12px;
    background: var(--ukch-color-gold);
    border-radius: var(--ukch-radius-pill);
}

.custom-login-system .btn-close,
.custom-register-system .btn-close,
.custom-reset-password-system .btn-close {
    width: 32px;
    height: 32px;
    border-radius: var(--ukch-radius-sm);
    opacity: 0.6;
    transition: opacity var(--ukch-duration-fast) var(--ukch-easing-standard),
                background-color var(--ukch-duration-fast) var(--ukch-easing-standard);
}
.custom-login-system .btn-close:hover,
.custom-register-system .btn-close:hover,
.custom-reset-password-system .btn-close:hover {
    opacity: 1;
    background-color: var(--ukch-color-ivory);
}

/* Hide the legacy <hr> that the markup includes — the eyebrow line
 * above replaces its visual role. */
.custom-login-system .modal-content hr,
.custom-register-system .modal-content hr,
.custom-reset-password-system .modal-content hr {
    display: none;
}

/* ====================== Body / fields ====================== */

.custom-login-system .modal-body,
.custom-register-system .modal-body,
.custom-reset-password-system .modal-body {
    padding-top:   0;
    padding-bottom: var(--ukch-space-3);
}

.custom-login-system .form-label,
.custom-register-system .form-label,
.custom-reset-password-system .form-label {
    margin-bottom: 6px;
    font-family:   var(--ukch-font-sans);
    font-size:     var(--ukch-fs-sm);
    font-weight:   var(--ukch-fw-medium);
    color:         var(--ukch-color-ink);
}

.custom-login-system .login-input,
.custom-register-system .login-input,
.custom-reset-password-system .login-input,
.custom-login-system .form-control,
.custom-register-system .form-control,
.custom-reset-password-system .form-control {
    width:         100%;
    padding:       12px 14px;
    background:    var(--ukch-color-paper);
    color:         var(--ukch-color-ink);
    font-family:   var(--ukch-font-sans);
    font-size:     var(--ukch-fs-base);
    line-height:   var(--ukch-lh-snug);
    border:        1px solid var(--ukch-color-line);
    border-radius: var(--ukch-radius-sm);
    box-shadow:    none;
    transition:
        border-color var(--ukch-duration-fast) var(--ukch-easing-standard),
        box-shadow   var(--ukch-duration-fast) var(--ukch-easing-standard);
}
.custom-login-system .login-input::placeholder,
.custom-register-system .login-input::placeholder,
.custom-reset-password-system .login-input::placeholder,
.custom-login-system .form-control::placeholder,
.custom-register-system .form-control::placeholder,
.custom-reset-password-system .form-control::placeholder {
    color:   var(--ukch-color-muted);
    opacity: 1;
}
.custom-login-system .login-input:focus,
.custom-register-system .login-input:focus,
.custom-reset-password-system .login-input:focus,
.custom-login-system .form-control:focus,
.custom-register-system .form-control:focus,
.custom-reset-password-system .form-control:focus {
    outline:      none;
    border-color: var(--ukch-color-gold);
    box-shadow:   var(--ukch-shadow-focus);
}

.custom-login-system #login-error,
.custom-register-system #registerResult,
.custom-reset-password-system #reset-password-error {
    font-size: var(--ukch-fs-sm);
}

.custom-login-system .text-danger,
.custom-register-system .text-danger,
.custom-reset-password-system .text-danger {
    color: var(--ukch-color-danger);
    font-size: var(--ukch-fs-sm);
}

.custom-login-system .text-success,
.custom-register-system .text-success,
.custom-reset-password-system .text-success {
    color: var(--ukch-color-gold);
    font-size: var(--ukch-fs-sm);
}

/* ====================== Forgot link / register link ====================== */

.custom-login-system .forgot-link,
.custom-register-system .forgot-link,
.custom-reset-password-system .forgot-link,
.custom-login-system .register-link,
.custom-register-system .register-link,
.custom-reset-password-system .register-link {
    color: var(--ukch-color-gold-dark);
    text-decoration: none;
    font-weight: var(--ukch-fw-medium);
    transition: color var(--ukch-duration-fast) var(--ukch-easing-standard);
}
.custom-login-system .forgot-link:hover,
.custom-register-system .forgot-link:hover,
.custom-reset-password-system .forgot-link:hover,
.custom-login-system .register-link:hover,
.custom-register-system .register-link:hover,
.custom-reset-password-system .register-link:hover {
    color: var(--ukch-color-ink);
    text-decoration: underline;
}

/* ====================== Submit button ====================== */

.custom-login-system .login-btn,
.custom-register-system .login-btn,
.custom-reset-password-system .login-btn,
.custom-login-system .modal-footer .btn,
.custom-register-system .modal-footer .btn,
.custom-reset-password-system .modal-footer .btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            8px;
    padding:        14px 24px;
    background:     var(--ukch-color-gold);
    border:         1px solid var(--ukch-color-gold);
    border-radius:  var(--ukch-radius-sm);
    color:          #ffffff;
    font-family:    var(--ukch-font-sans);
    font-size:      var(--ukch-fs-base);
    font-weight:    var(--ukch-fw-medium);
    line-height:    1;
    transition:
        background-color var(--ukch-duration-fast) var(--ukch-easing-standard),
        border-color     var(--ukch-duration-fast) var(--ukch-easing-standard),
        transform        var(--ukch-duration-fast) var(--ukch-easing-standard);
}
.custom-login-system .login-btn:hover,
.custom-register-system .login-btn:hover,
.custom-reset-password-system .login-btn:hover {
    background:   var(--ukch-color-gold-dark);
    border-color: var(--ukch-color-gold-dark);
    color:        #ffffff;
}
.custom-login-system .login-btn:active,
.custom-register-system .login-btn:active,
.custom-reset-password-system .login-btn:active {
    transform: translateY(1px);
}
.custom-login-system .login-btn:focus-visible,
.custom-register-system .login-btn:focus-visible,
.custom-reset-password-system .login-btn:focus-visible {
    outline: none;
    box-shadow: var(--ukch-shadow-focus);
}

/* ====================== Footer ====================== */

.custom-login-system .modal-footer,
.custom-register-system .modal-footer,
.custom-reset-password-system .modal-footer {
    padding-top:    0;
    padding-bottom: var(--ukch-space-3);
    border-top: 0;
    gap: 12px;
}

/* ====================== Dark mode ====================== */

body.dark-mode .custom-login-system .modal-content,
body.dark-mode .custom-register-system .modal-content,
body.dark-mode .custom-reset-password-system .modal-content {
    background: #1f1f21;
    border-color: #2c2c2e;
    color: var(--ukch-color-ink);
}
body.dark-mode .custom-login-system .form-control,
body.dark-mode .custom-register-system .form-control,
body.dark-mode .custom-reset-password-system .form-control,
body.dark-mode .custom-login-system .login-input,
body.dark-mode .custom-register-system .login-input,
body.dark-mode .custom-reset-password-system .login-input {
    background: #161618;
    border-color: #2c2c2e;
    color: var(--ukch-color-ink);
}
body.dark-mode .custom-login-system .btn-close,
body.dark-mode .custom-register-system .btn-close,
body.dark-mode .custom-reset-password-system .btn-close {
    filter: invert(1) grayscale(100%) brightness(2);
}