/*
===============================================================================
 BICHAGAL CAPTIVE PORTAL
 Copyright © 2026 Bichagal. All Rights Reserved.

 This Captive Portal is proprietary software exclusively designed,
 developed, and owned by Bichagal.

 This platform has been custom-built for The Bichagal. All source code,
 HTML, CSS, JavaScript, backend logic, UI/UX design, workflows, assets,
 and functionality are protected under applicable copyright and
 intellectual property laws.

 Unauthorized copying, modification, reverse engineering, distribution,
 republication, or reproduction of this software, in whole or in part,
 is strictly prohibited without prior written permission from Bichagal.

 © 2026 Bichagal. All Rights Reserved.
===============================================================================
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --text-primary: #111111;
    --text-secondary: #6f6f6f;
    --border-color: #dcdcdc;
    --bg-white: #ffffff;
    --header-bg: #2b2a28;
    --btn-disabled-bg: #d9d9d9;
    --btn-disabled-text: #9a9a9a;
    --btn-active-bg: #111111;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #ededed;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* ============ PAGE WRAPPER ============ */
/* On mobile: full-bleed, no visible wrapper.
   On desktop: centers the portal frame like a phone screen. */
.page-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============ PORTAL FRAME ============ */
/* The entire captive portal. Covers the whole viewport edge-to-edge
   with a clearly visible dark-grey outline. */
.portal-frame {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    background-color: var(--bg-white);
    border: 2px solid #8c8c8c;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* ============ HEADER ============ */
.header {
    background-color: var(--header-bg);
    height: 56px;
    min-height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    width: 100%;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #dc3f38;
    display: inline-block;
    flex-shrink: 0;
}

.status-text {
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
}

.header-right {
    display: flex;
    align-items: center;
}

.language-selector {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    transition: opacity 200ms ease;
}

.language-selector:hover {
    opacity: 0.75;
}

/* ============ MAIN CONTENT ============ */
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 28px 20px 28px;
    width: 100%;
}

/* ============ LOGO ============ */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
}

.logo {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ============ TYPOGRAPHY ============ */
.heading {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.subheading {
    font-size: 17px;
    font-weight: 400;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 18px;
}

/* ============ FORM ============ */
.form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
}

/* ============ PHONE INPUT (intl-tel-input) ============ */
.input-group {
    width: 100%;
    margin-bottom: 4px;
}

/* iti wrapper must be full width */
.iti {
    width: 100%;
    display: block;
}

/* The actual text input (targeted directly by id — safest across iti versions) */
#phoneInput {
    width: 100%;
    height: 52px;
    border: 1.5px solid #8c8c8c;
    border-radius: 10px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-white);
    transition: border-color 200ms ease, box-shadow 200ms ease;
    padding: 0 16px 0 100px;
}

#phoneInput::placeholder {
    color: #9a9a9a;
    font-weight: 400;
    font-family: sans-serif;
    font-size: 18px;
}

#phoneInput:focus {
    outline: none;
    border-color: #5a5a5a;
    box-shadow: none;
}

/* ---- Flag / country selector: KEEP VISIBLE, strip grey background ---- */
.iti__flag-container {
    /* do NOT hide this — it holds the flag + dial code + dropdown arrow */
    background-color: transparent;
    border: none;
    border-right: 1.5px solid #8c8c8c;
    top: 1.5px;
    bottom: 1.5px;
    left: 1.5px;
    height: calc(100% - 3px);
    display: flex;
    align-items: center;
    border-radius: 10px 0 0 10px;
}

.iti__selected-flag {
    background-color: transparent !important;
    padding: 0 14px 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 10px 0 0 10px;
    outline: none;
}

.iti__selected-flag:hover,
.iti__selected-flag:focus {
    background-color: transparent;
}

.iti__flag {
    /* the actual flag sprite image — scale up since the default sprite is tiny.
       transform doesn't reflow layout, so margin-right compensates for the
       extra visual width and keeps it from overlapping the dial code text. */
    display: inline-block;
    transform: scale(1.35);
    transform-origin: center;
    margin-right: 6px;
}

.iti__selected-dial-code {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 400;
    margin-left: 8px;
}

.iti__arrow {
    margin-left: 8px;
    border-top-color: #6f6f6f;
}

.iti__arrow--up {
    border-bottom-color: #6f6f6f;
}

/* Country dropdown list */
.iti__country-list {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
}

.iti__country {
    padding: 10px 14px;
    font-size: 14px;
    transition: background-color 150ms ease;
}

.iti__country.iti__highlight,
.iti__country:hover {
    background-color: #f2f2f2;
}

.iti__divider {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.input-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    margin-top: 2px;
}

/* ============ CUSTOM CHECKBOX ============ */
.checkbox-group {
    margin-bottom: 18px;
}

.checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.checkbox-box {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-white);
    transition: background-color 200ms ease, border-color 200ms ease;
    position: relative;
    margin-top: 1px;
}

.checkbox-box::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 150ms ease;
}

.checkbox-input:checked + .checkbox-label .checkbox-box {
    background-color: var(--text-primary);
    border-color: var(--text-primary);
}

.checkbox-input:checked + .checkbox-label .checkbox-box::after {
    opacity: 1;
}

.checkbox-text {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.5;
}

.terms-link {
    color: var(--text-primary);
    text-decoration: underline;
    font-weight: 500;
}

.required {
    color: var(--text-primary);
}

/* ============ CONNECT BUTTON ============ */
.connect-button {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 200ms ease, box-shadow 200ms ease, transform 100ms ease;
}

.connect-button:disabled {
    background-color: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    cursor: not-allowed;
}

.connect-button:not(:disabled) {
    background-color: var(--btn-active-bg);
    color: #ffffff;
}

.connect-button:not(:disabled):hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.connect-button:not(:disabled):active {
    transform: scale(0.98);
}

/* ============ FOOTER ============ */
.footer {
    height: 80px;
    min-height: 80px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    width: 100%;
}

.footer-flag {
    height: 40px;
    width: auto;
    display: block;
}

.footer-logo {
    height: 58px;
    width: auto;
    display: block;
}

/* ============ RESPONSIVE ============ */
@media (min-width: 481px) {
    body {
        padding: 20px 0;
    }
    .portal-frame {
        min-height: calc(100vh - 300px);
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    }
}

/* ============ COUNTRY DROPDOWN (centered popup, escapes the frame) ============ */
/* iti__country-list is appended to <body> (see dropdownParent in script.js),
   so it's no longer clipped by .portal-frame's overflow:hidden. We then force
   it to sit centered on screen like a proper popup, with a full-screen dim
   backdrop created via a giant box-shadow (no extra markup needed). */
.iti__country-list {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(92vw, 380px) !important;
    max-height: 70vh !important;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(17, 17, 17, 0.5), 0 20px 60px rgba(0, 0, 0, 0.3);
    margin-top: 0 !important;
    padding: 8px 0;
    animation: dropdownPopIn 180ms ease;
    z-index: 1000;
}

@keyframes dropdownPopIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.iti__country {
    padding: 12px 16px;
}

/* ============ TERMS & CONDITIONS MODAL ============ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(17, 17, 17, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
    z-index: 2000;
}

.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    background-color: var(--bg-white);
    width: 100%;
    max-width: 440px;
    max-height: 82vh;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.94) translateY(12px);
    opacity: 0;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
}

.modal-overlay.is-open .modal-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px 24px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color 150ms ease, color 150ms ease;
    flex-shrink: 0;
}

.modal-close:hover {
    background-color: #f2f2f2;
    color: var(--text-primary);
}

.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    color: var(--text-primary);
}

.modal-updated {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.modal-body h3 {
    font-size: 14.5px;
    font-weight: 600;
    margin: 18px 0 6px 0;
}

.modal-body h3:first-of-type {
    margin-top: 0;
}

.modal-body p {
    font-size: 14px;
    line-height: 1.65;
    color: #3a3a3a;
}

.modal-footer {
    padding: 16px 24px 22px 24px;
    border-top: 1px solid var(--border-color);
}

.modal-accept-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background-color: var(--text-primary);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background-color 200ms ease, transform 100ms ease;
}

.modal-accept-btn:hover {
    background-color: #000000;
}

.modal-accept-btn:active {
    transform: scale(0.98);
}

/* ============ MULTI-SCREEN FLOW ============ */
.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    animation: screenFadeIn 260ms ease;
}

.screen.active {
    display: flex;
}

@keyframes screenFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============ STATUS DOT (Disconnected -> Connected) ============ */
.status-dot {
    transition: background-color 300ms ease;
}

.status-dot--connected {
    background-color: #2e9e4f;
}

/* ============ INLINE VALIDATION TEXT ============ */
/* "Fancy" font used here: an italic serif, distinct from the body's Inter,
   to make errors/success feel like a considered detail rather than a
   generic red system warning. */
.error-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 13.5px;
    color: #b3261e;
    margin-top: -8px;
    margin-bottom: 12px;
    animation: fieldMessageIn 200ms ease;
}

.success-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 13.5px;
    color: #2e7d32;
    margin-top: -8px;
    margin-bottom: 12px;
    animation: fieldMessageIn 200ms ease;
}

@keyframes fieldMessageIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============ DEMO OTP BADGE ============ */
.demo-otp-badge {
    background-color: #f5f5f5;
    border: 1px dashed #b8b8b8;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    letter-spacing: 0.3px;
}

.demo-otp-badge strong {
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 2px;
}

/* ============ OTP BOXES ============ */
.otp-boxes {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 8px;
}

.otp-box {
    width: 100%;
    max-width: 48px;
    height: 56px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    border: 1.5px solid #8c8c8c;
    border-radius: 10px;
    background-color: var(--bg-white);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.otp-box:focus {
    outline: none;
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.otp-box.filled {
    border-color: #8c8c8c;
}

/* ============ TEXT LINK BUTTON (e.g. "Change mobile number") ============ */
.text-link-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    margin-top: 18px;
    padding: 8px;
    text-decoration: underline;
    transition: color 200ms ease;
}

.text-link-button:hover {
    color: var(--text-primary);
}

/* ============ CONNECTED SCREEN ============ */
.connected-check {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #2e9e4f;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    animation: checkPopIn 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes checkPopIn {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}