/* =============================================================
   MNotify OTP Auth — Full-page login/register form styles
   Uses CSS custom properties; Inter font via Google Fonts.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Custom property defaults ──────────────────────────────── */
:root {
    --mno-primary:        #2563eb;
    --mno-primary-hover:  #1d4ed8;
    --mno-primary-light:  #eff6ff;
    --mno-bg:             #f1f5f9;
    --mno-card:           #ffffff;
    --mno-border:         #e2e8f0;
    --mno-border-focus:   var(--mno-primary);
    --mno-text:           #0f172a;
    --mno-text-muted:     #64748b;
    --mno-text-light:     #94a3b8;
    --mno-input-bg:       #f8fafc;
    --mno-error-bg:       #fef2f2;
    --mno-error-border:   #fecaca;
    --mno-error-text:     #dc2626;
    --mno-success-bg:     #f0fdf4;
    --mno-success-border: #bbf7d0;
    --mno-success-text:   #16a34a;
    --mno-radius:         8px;
    --mno-radius-lg:      16px;
    --mno-shadow:         0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --mno-shadow-md:      0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --mno-shadow-lg:      0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .05);
    --mno-transition:     all .18s ease;
    --mno-font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Page wrapper ───────────────────────────────────────────── */
.mno-page {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    min-height:       100vh;
    width:            100%;
    background-color: var(--mno-bg);
    font-family:      var(--mno-font);
    color:            var(--mno-text);
    -webkit-font-smoothing: antialiased;
    box-sizing:       border-box;
    padding:          40px 16px;
}

.mno-page *,
.mno-page *::before,
.mno-page *::after {
    box-sizing:        border-box;
    /* Reset WordPress block-gap margins that create huge spacing */
    margin-block-start: 0;
    margin-block-end:   0;
}

/* ── Reset theme/WP styles that leak in ────────────────────── */

/* WP adds text-decoration:underline to all <a> elements */
.mno-page a:where(:not(.wp-element-button)) {
    text-decoration: none;
}

/* WP theme may add margins to headings */
.mno-page h1,
.mno-page h2,
.mno-page h3 {
    margin:      0;
    padding:     0;
    font-size:   inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Prevent theme <pre> styles from leaking if wpautop wraps us */
pre:has(> .mno-page) {
    all: unset;
    display: block;
}

/* ── Inner container ────────────────────────────────────────── */
.mno-page__inner {
    width:      100%;
    max-width:  420px;
    align-self: center;   /* prevents flex stretch — card stays content-height */
}

/* ── Logo ───────────────────────────────────────────────────── */
.mno-page__logo {
    display:    block;
    text-align: center;
    margin-bottom: 20px;
}

.mno-page__logo img {
    max-height: 48px;
    max-width:  180px;
    width:      auto;
    height:     auto;
    object-fit: contain;
}

/* ── Header: title + subtitle ───────────────────────────────── */
.mno-page__header {
    text-align:    center;
    margin-bottom: 16px;
    width:         100%;
}

.mno-page__title {
    font-size:      1.75rem !important;
    font-weight:    700 !important;
    font-family:    var(--mno-font) !important;
    color:          var(--mno-text) !important;
    margin:         0 0 6px !important;
    padding:        0 !important;
    line-height:    1.2 !important;
    letter-spacing: -.02em !important;
}

.mno-page__subtitle {
    font-size:   .9375rem;
    color:       var(--mno-text-muted);
    margin:      0;
    line-height: 1.5;
}

/* ── Card ───────────────────────────────────────────────────── */
.mno-page__card {
    background:    var(--mno-card);
    border:        1.5px solid var(--mno-border);
    border-radius: var(--mno-radius-lg);
    box-shadow:    var(--mno-shadow-lg);
    padding:       28px 28px 24px;
    width:         100%;
}

/* ── Tab bar ────────────────────────────────────────────────── */
.mno-page__tabs {
    display:       flex;
    background:    #f1f5f9;
    border-radius: 10px;
    padding:       4px;
    margin-bottom: 20px;
    gap:           0;
}

.mno-page__tab {
    flex:           1;
    padding:        9px 12px;
    font-size:      .875rem;
    font-weight:    500;
    color:          var(--mno-text-muted);
    background:     transparent;
    border:         none;
    border-radius:  8px;
    cursor:         pointer;
    transition:     var(--mno-transition);
    text-align:     center;
    line-height:    1.4;
    white-space:    nowrap;
    font-family:    var(--mno-font);
}

.mno-page__tab:hover {
    color: var(--mno-text);
}

.mno-page__tab.active {
    background:  var(--mno-card);
    color:       var(--mno-text);
    font-weight: 600;
    box-shadow:  var(--mno-shadow);
}

/* ── Panels ─────────────────────────────────────────────────── */
.mno-panel {
    display: none;
    animation: mno-fade-in .22s ease both;
}

.mno-panel.active {
    display: block;
}

/* ── Steps ──────────────────────────────────────────────────── */
.mno-step {
    animation: mno-step-in .24s ease both;
}

@keyframes mno-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes mno-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Form fields ────────────────────────────────────────────── */
.mno-field {
    margin-bottom: 12px;
}

.mno-label {
    display:       block;
    font-size:     .8125rem;
    font-weight:   500;
    color:         var(--mno-text);
    margin-bottom: 6px;
    line-height:   1.4;
}

.mno-input {
    display:       block;
    width:         100%;
    height:        44px;
    padding:       0 14px;
    font-size:     .9375rem;
    font-family:   var(--mno-font);
    color:         var(--mno-text);
    background:    var(--mno-input-bg);
    border:        1.5px solid var(--mno-border);
    border-radius: var(--mno-radius);
    outline:       none;
    transition:    var(--mno-transition);
    -webkit-appearance: none;
    appearance:    none;
}

.mno-input::placeholder {
    color: var(--mno-text-light);
}

.mno-input:focus {
    border-color: var(--mno-border-focus);
    background:   #ffffff;
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--mno-primary) 15%, transparent);
}

.mno-input:focus-visible {
    outline: none;
}

/* ── Phone row ──────────────────────────────────────────────── */
.mno-phone-row {
    display: flex;
    gap:     8px;
}

.mno-phone-row .mno-input {
    flex: 1;
}

/* Locked country code — same size as .mno-select but non-interactive */
.mno-country-locked {
    display:       inline-flex;
    align-items:   center;
    height:        44px;
    width:         115px;
    min-width:     115px;
    padding:       0 10px;
    font-size:     .875rem;
    font-weight:   600;
    font-family:   var(--mno-font);
    color:         var(--mno-text);
    background:    var(--mno-input-bg);
    border:        1.5px solid var(--mno-border);
    border-radius: var(--mno-radius);
    cursor:        default;
    user-select:   none;
    white-space:   nowrap;
    overflow:      hidden;
    flex-shrink:   0;
}

.mno-country-locked .mno-cc-name {
    font-weight:   400;
    font-size:     .75rem;
    color:         var(--mno-text-muted, #94a3b8);
    margin-left:   4px;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.mno-select {
    height:        44px;
    width:         115px;
    min-width:     115px;
    padding:       0 10px;
    font-size:     .8125rem;
    font-family:   var(--mno-font);
    color:         var(--mno-text);
    background:    var(--mno-input-bg);
    border:        1.5px solid var(--mno-border);
    border-radius: var(--mno-radius);
    outline:       none;
    cursor:        pointer;
    transition:    var(--mno-transition);
    -webkit-appearance: none;
    appearance:    none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
    padding-right:  28px;
}

.mno-select:focus {
    border-color: var(--mno-border-focus);
    background-color: #ffffff;
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--mno-primary) 15%, transparent);
}

/* ── Buttons ────────────────────────────────────────────────── */
.mno-btn-primary {
    position:      relative;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           8px;
    width:         100%;
    height:        44px;
    padding:       0 20px;
    font-size:     .9375rem;
    font-weight:   600;
    font-family:   var(--mno-font);
    color:         #ffffff;
    background:    var(--mno-primary);
    border:        none;
    border-radius: var(--mno-radius);
    cursor:        pointer;
    transition:    var(--mno-transition);
    outline:       none;
    -webkit-appearance: none;
    appearance:    none;
    margin-top:    4px;
    letter-spacing: -.01em;
    overflow:      hidden;
}

.mno-btn-primary:hover:not(:disabled) {
    background: var(--mno-primary-hover);
    transform:  translateY(-1px);
    box-shadow: var(--mno-shadow-md);
}

.mno-btn-primary:active:not(:disabled) {
    transform:  translateY(0);
    box-shadow: var(--mno-shadow);
}

.mno-btn-primary:disabled,
.mno-btn-primary.loading {
    opacity: .7;
    cursor:  not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Spinner inside button ──────────────────────────────────── */
.mno-btn-primary .mno-spinner {
    display:       none;
    width:         18px;
    height:        18px;
    border:        2.5px solid rgba(255,255,255,.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation:     mno-spin .65s linear infinite;
    flex-shrink:   0;
}

.mno-btn-primary.loading .mno-spinner {
    display: block;
}

@keyframes mno-spin {
    to { transform: rotate(360deg); }
}

/* ── OTP digit boxes ────────────────────────────────────────── */
.mno-otp-group {
    display:         flex !important;
    justify-content: center !important;
    gap:             10px;
    margin:          0 0 16px;
    flex-wrap:       nowrap;
}

.mno-otp-box {
    width:           44px !important;
    height:          52px !important;
    text-align:      center;
    font-size:       1.375rem;
    font-weight:     700;
    font-family:     var(--mno-font);
    color:           var(--mno-text);
    background:      var(--mno-input-bg);
    border:          1.5px solid var(--mno-border);
    border-radius:   var(--mno-radius);
    outline:         none;
    transition:      var(--mno-transition);
    caret-color:     var(--mno-primary);
    -webkit-appearance: none;
    appearance:      none;
    padding:         0;
    line-height:     52px;
}

.mno-otp-box:focus {
    border-color: var(--mno-border-focus);
    background:   #ffffff;
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--mno-primary) 15%, transparent);
}

.mno-otp-box.filled {
    border-color: var(--mno-primary);
    background:   var(--mno-primary-light);
    color:        var(--mno-primary);
}

/* ── OTP "sent to" hint ─────────────────────────────────────── */
.mno-otp-sent-to {
    text-align:    center;
    font-size:     .875rem;
    color:         var(--mno-text-muted);
    margin-bottom: 20px;
    line-height:   1.5;
}

.mno-otp-sent-to strong {
    color:       var(--mno-text);
    font-weight: 600;
}

/* ── Resend row ─────────────────────────────────────────────── */
.mno-resend-row {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin-top:      16px;
    font-size:       .875rem;
}

.mno-resend-timer {
    color:       var(--mno-text-muted);
    font-weight: 500;
}

.mno-btn-resend {
    background:   none;
    border:       none;
    padding:      0;
    color:        var(--mno-primary);
    font-size:    .875rem;
    font-weight:  600;
    font-family:  var(--mno-font);
    cursor:       pointer;
    transition:   var(--mno-transition);
    text-decoration: underline;
    text-underline-offset: 2px;
    outline:      none;
}

.mno-btn-resend:hover {
    color: var(--mno-primary-hover);
}

.mno-btn-resend:disabled {
    opacity: .5;
    cursor:  default;
}

/* ── Back button ("← Change number") ───────────────────────── */
.mno-btn-back {
    display:     block;
    margin:      12px auto 0;
    background:  none;
    border:      none;
    padding:     0;
    color:       var(--mno-text-muted);
    font-size:   .875rem;
    font-family: var(--mno-font);
    cursor:      pointer;
    transition:  var(--mno-transition);
    text-align:  center;
    outline:     none;
}

.mno-btn-back:hover {
    color: var(--mno-text);
}

/* ── Alerts ─────────────────────────────────────────────────── */
.mno-alert {
    display:       none;
    padding:       11px 14px;
    border-radius: var(--mno-radius);
    font-size:     .875rem;
    line-height:   1.5;
    margin-bottom: 14px;
    border:        1.5px solid transparent;
}

.mno-alert--error {
    background:   var(--mno-error-bg);
    border-color: var(--mno-error-border);
    color:        var(--mno-error-text);
}

.mno-alert--success {
    background:   var(--mno-success-bg);
    border-color: var(--mno-success-border);
    color:        var(--mno-success-text);
}

/* ── Checkbox row ───────────────────────────────────────────── */
.mno-check-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 12px;
}

.mno-check-row label {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   .875rem;
    color:       var(--mno-text-muted);
    cursor:      pointer;
    user-select: none;
}

.mno-check-row input[type="checkbox"] {
    width:  16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--mno-primary);
    flex-shrink: 0;
}

/* ── Forgot / auxiliary links ───────────────────────────────── */
.mno-field-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   16px;
}

.mno-field-footer .mno-check-row {
    margin-bottom: 0;
}

.mno-forgot-link {
    font-size:        .875rem;
    color:            var(--mno-primary);
    text-decoration:  none;
    font-weight:      500;
    transition:       var(--mno-transition);
    white-space:      nowrap;
    margin-left:      auto;
}

.mno-forgot-link:hover {
    color:           var(--mno-primary-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* When standalone (not in footer row) */
.mno-field-footer-simple {
    text-align:    right;
    margin-bottom: 16px;
}

/* ── "Back to sign in" button inside forgot panel ───────────── */
.mno-back-to-login {
    display:     flex;
    align-items: center;
    gap:         6px;
    background:  none;
    border:      none;
    padding:     0 0 20px;
    color:       var(--mno-text-muted);
    font-size:   .875rem;
    font-family: var(--mno-font);
    cursor:      pointer;
    transition:  var(--mno-transition);
    outline:     none;
}

.mno-back-to-login:hover {
    color: var(--mno-text);
}

/* ── Forgot panel heading ────────────────────────────────────── */
.mno-panel-heading {
    font-size:   1.0625rem;
    font-weight: 600;
    color:       var(--mno-text);
    margin:      0 0 20px;
}

/* ── Page footer text ───────────────────────────────────────── */
.mno-page__footer {
    text-align:  center;
    font-size:   .8125rem;
    color:       var(--mno-text-light);
    margin-top:  20px;
    line-height: 1.5;
}

/* ── Divider ────────────────────────────────────────────────── */
.mno-divider {
    height:     1px;
    background: var(--mno-border);
    margin:     20px 0;
}

/* ── Password input wrapper ─────────────────────────────────── */
.mno-input-wrap {
    position: relative;
}

.mno-input-wrap .mno-input {
    padding-right: 44px;
}

/* ── Reset step heading ─────────────────────────────────────── */
.mno-step-reset .mno-step-heading {
    font-size:   .9375rem;
    color:       var(--mno-success-text);
    background:  var(--mno-success-bg);
    border:      1.5px solid var(--mno-success-border);
    border-radius: var(--mno-radius);
    padding:     10px 14px;
    margin-bottom: 20px;
    font-weight: 500;
}

/* ── Logged-in state ────────────────────────────────────────── */
.mno-logged-in-card {
    background:    var(--mno-card);
    border:        1.5px solid var(--mno-border);
    border-radius: var(--mno-radius-lg);
    box-shadow:    var(--mno-shadow-lg);
    padding:       36px;
    text-align:    center;
    width:         100%;
}

.mno-logged-in-card p {
    color:      var(--mno-text-muted);
    font-size:  .9375rem;
    margin:     0 0 16px;
}

.mno-logged-in-card a {
    color:           var(--mno-primary);
    font-weight:     500;
    text-decoration: none;
}

.mno-logged-in-card a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Responsive: 480px ──────────────────────────────────────── */
@media (max-width: 480px) {
    .mno-page {
        padding: 16px 12px;
        align-items: flex-start;
        padding-top: 32px;
    }

    .mno-page__card {
        padding: 24px 20px;
    }

    .mno-page__title {
        font-size: 1.5rem;
    }

    .mno-otp-box {
        width:     44px;
        height:    52px;
        font-size: 1.25rem;
    }

    .mno-otp-group {
        gap: 8px;
    }
}

/* ── Responsive: 360px ──────────────────────────────────────── */
@media (max-width: 360px) {
    .mno-page__card {
        padding: 20px 14px;
    }

    .mno-otp-box {
        width:     36px;
        height:    44px;
        font-size: 1.125rem;
        border-radius: 6px;
    }

    .mno-otp-group {
        gap: 6px;
    }

    .mno-select {
        width:    90px;
        min-width: 90px;
        font-size: .75rem;
    }

    .mno-page__title {
        font-size: 1.375rem;
    }
}