/**
 * register.css
 * Styles specific to the organizer registration page.
 * Loaded via {block name=head} in users/register.tpl.
 */

/* ── Bootstrap 3 / Tailwind responsive class conflicts ──────────────────────── */
@media (min-width: 1024px) {
    .lg\:block  { display: block !important; }
    .lg\:flex   { display: flex  !important; }
    .lg\:hidden { display: none  !important; }
}
@media (max-width: 1023px) {
    .max-lg\:hidden { display: none !important; }
}

/* ── Sticky mobile header ────────────────────────────────────────────────────── */
body.auth-ui header.sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}

/* ── Bootstrap chrome override ──────────────────────────────────────────────── */
body.auth-ui .navbar,
body.auth-ui footer,
body.auth-ui .clearfix + br {
    display: none !important;
}

body.auth-ui .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.auth-ui {
    padding-top: 0 !important;
    margin: 0 !important;
    background: #0f172a !important;
    font-size: 14px !important;
    line-height: 1.6;
    font-family: "Inter", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif !important;
}

/* Keep controls and Tailwind font-sans in sync with the selected Cyrillic-friendly font. */
body.auth-ui button,
body.auth-ui input,
body.auth-ui textarea,
body.auth-ui select,
body.auth-ui .font-sans {
    font-family: "Inter", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif !important;
}

/* ── Dot-grid decorative background ─────────────────────────────────────────── */
body.auth-ui .dot-grid {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* ── Input focus transition ──────────────────────────────────────────────────── */
body.auth-ui input:focus {
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

body.auth-ui input.is-invalid,
body.auth-ui textarea.is-invalid,
body.auth-ui select.is-invalid {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16) !important;
}

#register-form .iti input.is-invalid {
    border-color: #f87171 !important;
}

#register-form .iti input.is-invalid + .iti__country-container .iti__selected-country {
    border-right-color: #fca5a5;
}

/* ── FONT SIZE SCALING — All text elements to 14px ────────────────────────── */
body.auth-ui h1 { font-size: 2.5rem !important; line-height: 1.2; }
body.auth-ui h2 { font-size: 2rem !important; line-height: 1.3; }
body.auth-ui h3 { font-size: 1.5rem !important; line-height: 1.4; }
body.auth-ui h4 { font-size: 1.2rem !important; line-height: 1.4; }
body.auth-ui h5 { font-size: 1.1rem !important; line-height: 1.5; }
body.auth-ui h6 { font-size: 1rem !important; line-height: 1.5; }

/* Tailwind scale overrides */
body.auth-ui .text-xs { font-size: 12px !important; }
body.auth-ui .text-sm { font-size: 13px !important; }
body.auth-ui .text-base { font-size: 14px !important; }
body.auth-ui .text-lg { font-size: 16px !important; }
body.auth-ui .text-xl { font-size: 18px !important; }
body.auth-ui .text-2xl { font-size: 20px !important; }
body.auth-ui .text-3xl { font-size: 24px !important; }
body.auth-ui .text-4xl { font-size: 30px !important; }
body.auth-ui .text-5xl { font-size: 36px !important; }
body.auth-ui .text-6xl { font-size: 48px !important; }

/* Form elements - ensure 14px base */
body.auth-ui input[type="text"],
body.auth-ui input[type="email"],
body.auth-ui input[type="password"],
body.auth-ui input[type="tel"],
body.auth-ui textarea,
body.auth-ui select {
    font-size: 14px !important;
}

body.auth-ui input::placeholder,
body.auth-ui textarea::placeholder {
    font-size: 14px !important;
}

/* ── Intl-tel-input alignment with form design ─────────────────────────────── */
#register-form .iti {
    display: block;
    width: 100%;
}

#register-form .iti input[type="tel"] {
    width: 100%;
}

#register-form .iti__selected-country {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 14px);
    margin: 7px 0 7px 8px;
    padding: 0 12px 0 10px;
    border-right: 1px solid #d4dce8;
    border-radius: 10px;
}

#register-form .iti__selected-country-primary {
    display: flex;
    align-items: center;
    gap: 8px;
}

#register-form .iti__country-container {
    display: flex;
    align-items: center;
}

#register-form .iti__arrow {
    margin-left: 2px;
}

#register-form .iti__search-input-wrapper {
    padding: 8px;
}

#register-form .iti__search-input {
    height: 46px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 500;
    padding-left: 40px;
    padding-right: 36px;
    line-height: 46px;
}

#register-form .iti__search-icon {
    left: 18px;
}

#register-form .iti__search-clear {
    right: 12px;
    width: 28px;
    height: 28px;
}

/* Default sizes for elements without Tailwind class */
body.auth-ui p:not([class*="text-"]) { font-size: 14px; }
body.auth-ui span:not([class*="text-"]) { font-size: 14px; }
body.auth-ui a:not([class*="text-"]) { font-size: 14px; }
body.auth-ui button:not([class*="text-"]) { font-size: 14px; }
body.auth-ui label:not([class*="text-"]) { font-size: 14px; }

/* ── Tailwind max-w-sm override ──────────────────────────────────────────────── */
body.auth-ui .max-w-sm {
    max-width: 38rem;
}

/* ── Terms row (replaces inline style="display:flex; align-items:center; gap:0.5rem") ── */
body.auth-ui .terms-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Terms checkbox (replaces inline style="flex-shrink:0") ─────────────────── */
body.auth-ui .terms-checkbox {
    flex-shrink: 0;
}

/* ── Terms label (replaces inline style="margin:0; display:inline") ─────────── */
body.auth-ui .terms-label {
    margin: 0;
    display: inline;
}

/* ── Registration form heading readability tuning ───────────────────────────── */
body.auth-ui .reg-form-heading {
    max-width: 38ch;
}

body.auth-ui .reg-form-title {
    line-height: 1.12 !important;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

body.auth-ui .reg-form-subtitle {
    margin-top: 0.9rem !important;
    max-width: 34ch;
    font-weight: 500;
    line-height: 1.5 !important;
    color: #475569 !important;
    text-wrap: pretty;
}

/* Keep password visibility controls clearly keyboard-focusable. */
body.auth-ui .toggle-password:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────────── */
/* MESSAGE STYLING — Modern design for error/warning/success/info messages      */
/* ──────────────────────────────────────────────────────────────────────────── */

/* Override Bootstrap alert defaults for modern appearance */
.alert {
    border-radius: 0.75rem;
    border: 1px solid;
    padding: 1rem;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    position: relative;
    padding-right: 2.5rem;
}

.alert .close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    opacity: 0.6;
    font-weight: normal;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert .close:hover {
    opacity: 1;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    font-size: 15px;
}

.alert-body {
    margin: 0;
    font-size: 14px;
}

/* ── Error/Danger/Invalid/Inactive Messages (RED) ───────────────────────── */
.message-error {
    background-color: rgb(254 242 242);
    border-color: rgb(254 226 226);
    color: rgb(153 27 27);
}

.message-error .alert-title {
    color: rgb(127 29 29);
}

.message-error .alert-body {
    color: rgb(153 27 27);
}

.message-error .close {
    color: rgb(153 27 27);
}

.message-error::before {
    content: "\f06a";
    font-family: FontAwesome, sans-serif;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ── Warning/Pending Approval Messages (AMBER/YELLOW) ────────────────────── */
.message-warning {
    background-color: rgb(255 251 235);
    border-color: rgb(253 230 138);
    color: rgb(92 51 23);
}

.message-warning .alert-title {
    color: rgb(78 22 0);
}

.message-warning .alert-body {
    color: rgb(92 51 23);
}

.message-warning .close {
    color: rgb(92 51 23);
}

.message-warning::before {
    content: "\f071";
    font-family: FontAwesome, sans-serif;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ── Success Messages (GREEN/EMERALD) ──────────────────────────────────────── */
.message-success {
    background-color: rgb(240 253 250);
    border-color: rgb(167 243 208);
    color: rgb(4 120 87);
}

.message-success .alert-title {
    color: rgb(4 120 87);
}

.message-success .alert-body {
    color: rgb(5 150 105);
}

.message-success .close {
    color: rgb(4 120 87);
}

.message-success::before {
    content: "\f05d";
    font-family: FontAwesome, sans-serif;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ── Info/Default Messages (BLUE) ──────────────────────────────────────────── */
.message-info {
    background-color: rgb(239 246 255);
    border-color: rgb(191 225 229);
    color: rgb(30 64 175);
}

.message-info .alert-title {
    color: rgb(30 64 175);
}

.message-info .alert-body {
    color: rgb(37 99 235);
}

.message-info .close {
    color: rgb(30 64 175);
}

.message-info::before {
    content: "\f05a";
    font-family: FontAwesome, sans-serif;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ──────────────────────────────────────────────────────────────────────────── */
/* RESPONSIVE FONT SCALING — Mobile devices                                   */
/* ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    body.auth-ui {
        font-size: 13px !important;
    }

    body.auth-ui h1 { font-size: 2rem !important; }
    body.auth-ui h2 { font-size: 1.5rem !important; }
    body.auth-ui h3 { font-size: 1.25rem !important; }
    body.auth-ui h4 { font-size: 1.1rem !important; }
    body.auth-ui h5 { font-size: 1rem !important; }
    body.auth-ui h6 { font-size: 0.95rem !important; }

    body.auth-ui .text-xs { font-size: 11px !important; }
    body.auth-ui .text-sm { font-size: 12px !important; }
    body.auth-ui .text-base { font-size: 13px !important; }
    body.auth-ui .text-lg { font-size: 14px !important; }
    body.auth-ui .text-xl { font-size: 16px !important; }
    body.auth-ui .text-2xl { font-size: 18px !important; }
    body.auth-ui .text-3xl { font-size: 22px !important; }
    body.auth-ui .text-4xl { font-size: 26px !important; }
    body.auth-ui .text-5xl { font-size: 32px !important; }

    body.auth-ui p:not([class*="text-"]) { font-size: 13px; }
    body.auth-ui span:not([class*="text-"]) { font-size: 13px; }
    body.auth-ui a:not([class*="text-"]) { font-size: 13px; }
    body.auth-ui button:not([class*="text-"]) { font-size: 13px; }
    body.auth-ui label:not([class*="text-"]) { font-size: 13px; }

    body.auth-ui input[type="text"],
    body.auth-ui input[type="email"],
    body.auth-ui input[type="password"],
    body.auth-ui input[type="tel"],
    body.auth-ui textarea,
    body.auth-ui select {
        font-size: 13px !important;
    }

    .alert {
        font-size: 13px;
    }

    .alert-title {
        font-size: 14px;
    }

    .alert-body {
        font-size: 13px;
    }

    body.auth-ui .reg-form-heading,
    body.auth-ui .reg-form-subtitle {
        max-width: none;
    }

    body.auth-ui .reg-form-subtitle {
        margin-top: 0.7rem !important;
        line-height: 1.45 !important;
    }
}