/* ==========================================
   KIOSKI 2027
   REGISTRATION PAGE STYLES
========================================== */


/* ==========================================
   1. REGISTRATION PAGE BACKGROUND
========================================== */

.registration-page {
    position: relative;
    min-height: 100vh;
    padding: 155px 6% 110px;

    background: linear-gradient(
        135deg,
        #FFF9EF,
        #F6E5D0
    );
}

.registration-background {
    position: absolute;
    inset: 0;

    background-image: url("../assets/images/logo.png");
    background-position: center 180px;
    background-repeat: no-repeat;
    background-size: min(75%, 700px);

    opacity: 0.035;
    pointer-events: none;
}


/* ==========================================
   2. REGISTRATION PAGE HEADING
========================================== */

.registration-heading {
    position: relative;
    z-index: 1;

    max-width: 800px;
    margin: 0 auto 55px;

    text-align: center;
}

.registration-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background: white;

    padding: 12px 22px;
    border-radius: 40px;

    color: var(--terracotta);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    margin-bottom: 25px;
}

.registration-heading h1 {
    font-size: clamp(38px, 5vw, 65px);
    margin-bottom: 20px;
}

.registration-heading p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-gray);
}


/* ==========================================
   3. REGISTRATION FORM CONTAINER
========================================== */

.registration-container {
    position: relative;
    z-index: 1;

    max-width: 950px;
    margin: auto;

    background: rgba(255, 255, 255, 0.96);

    border-radius: 30px;

    box-shadow:
        0 25px 80px rgba(61, 38, 27, 0.10);

    overflow: hidden;
}


/* ==========================================
   4. FORM SECTIONS
========================================== */

.form-section {
    padding: 55px 65px;

    border-bottom: 1px solid #F0E6DC;
}

.form-section:last-child {
    border-bottom: none;
}

.form-section-heading {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-bottom: 35px;
}

.section-number {
    width: 55px;
    height: 55px;
    min-width: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background: #F8E7D3;
    color: var(--terracotta);

    font-size: 18px;
    font-weight: 800;
}

.form-section-heading h2 {
    font-size: 27px;
    margin-bottom: 5px;
}

.form-section-heading p {
    color: var(--text-gray);
    font-size: 13px;
    line-height: 1.7;
}


/* ==========================================
   5. FORM GRID
========================================== */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;

    min-width: 0;
}

.form-group label,
.question-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-brown);
}


/* ==========================================
   6. INPUTS, SELECTS AND TEXTAREAS
========================================== */

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-width: 0;
    min-height: 52px;

    padding: 14px 17px;

    border: 1.5px solid #E9DED3;
    border-radius: 12px;

    background: #FFFCF8;

    color: var(--dark-brown);

    font-family: inherit;
    font-size: 15px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9C9085;
    opacity: 1;
}

.form-group textarea {
    resize: vertical;
    min-height: 180px;
    line-height: 1.7;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;

    border-color: var(--terracotta);

    box-shadow:
        0 0 0 4px rgba(201, 121, 69, 0.10);

    background: white;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: #D8B89D;
}

.full-width {
    width: 100%;
    margin-bottom: 28px;
}


/* ==========================================
   7. SINGLE SEARCHABLE NATIONALITY FIELD
========================================== */

/*
   The nationality field remains ONE input.

   Users can:
   - Type a country name
   - Choose a country from suggestions
   - Search in English, French or Arabic

   The suggestions are provided by the
   <datalist> element in register.html.
*/

#nationality {
    width: 100%;
    min-height: 52px;

    padding: 14px 17px;

    border: 1.5px solid #E9DED3;
    border-radius: 12px;

    background-color: #FFFCF8;

    color: var(--dark-brown);

    font-family: inherit;
    font-size: 15px;
    font-weight: 500;

    cursor: text;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

#nationality::placeholder {
    color: #9C9085;
    font-weight: 400;
}

#nationality:hover {
    border-color: #D8B89D;
}

#nationality:focus {
    outline: none;

    border-color: var(--terracotta);

    background-color: white;

    box-shadow:
        0 0 0 4px rgba(201, 121, 69, 0.10);
}

/*
   The datalist dropdown is rendered by
   the browser, so its appearance may
   differ slightly between browsers.
*/

#nationalityOptions {
    font-family: inherit;
}


/* ==========================================
   8. DATE OF BIRTH
========================================== */

#dateOfBirth {
    cursor: pointer;
}

#dateOfBirth::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
}

#dateOfBirth::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}


/* ==========================================
   9. QUESTION BOXES
========================================== */

.question-box {
    padding: 25px;

    background: #FFFAF4;

    border: 1px solid #F0E4D7;
    border-radius: 17px;

    margin-bottom: 22px;
}

.question-label {
    display: block;
    line-height: 1.7;
    margin-bottom: 18px;
}


/* ==========================================
   10. YES / NO RADIO BUTTONS
========================================== */

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.radio-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    cursor: pointer;
    font-size: 14px;
    color: var(--dark-brown);
}

.radio-option input {
    width: 18px;
    height: 18px;

    accent-color: var(--terracotta);
    cursor: pointer;
}

.radio-option span {
    font-weight: 500;
}


/* ==========================================
   11. CONDITIONAL FIELDS
========================================== */

.conditional-field {
    padding: 20px 25px;

    background: #FFF6EA;

    border-left: 3px solid var(--terracotta);
    border-radius: 12px;

    margin-bottom: 25px;
}

.conditional-field[hidden] {
    display: none;
}


/* ==========================================
   12. BUSINESS DESCRIPTION
========================================== */

#proposedBusiness {
    min-height: 200px;
    resize: vertical;
}

.field-hint {
    color: var(--text-gray);
    font-size: 12px;
    line-height: 1.8;
}


/* ==========================================
   13. ELIGIBILITY NOTICE
========================================== */

.eligibility-notice {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    padding: 25px;

    background: #FFF2DE;

    border: 1px solid #EBCB9B;
    border-radius: 15px;

    margin-bottom: 30px;
}

.eligibility-notice i {
    color: var(--terracotta);
    font-size: 21px;
    flex-shrink: 0;
    margin-top: 3px;
}

.eligibility-notice p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--dark-brown);
}


/* ==========================================
   14. DECLARATION CHECKBOXES
========================================== */

.checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 22px;

    font-size: 13px;
    line-height: 1.8;

    cursor: pointer;
    color: var(--dark-brown);
}

.checkbox-option input {
    width: 19px;
    height: 19px;
    min-width: 19px;

    margin-top: 3px;

    accent-color: var(--terracotta);
    cursor: pointer;
}

/* ==========================================
   14A. DECLARATION AGREEMENT — NEW
========================================== */

/*
   The first checkbox contains the longer
   project declaration.

   This styling applies only to that checkbox.
   The privacy checkbox keeps its original look.
*/

.declaration-section .checkbox-option:has(#eligibilityCheck) {
    padding: 24px;

    background: #FFFAF4;

    border: 1px solid #F0E4D7;
    border-left: 4px solid var(--terracotta);
    border-radius: 14px;

    margin-bottom: 25px;

    box-shadow:
        0 6px 20px rgba(61, 38, 27, 0.035);
}

.declaration-section .checkbox-option:has(#eligibilityCheck) span {
    display: block;

    flex: 1;
    min-width: 0;

    font-size: 14px;
    font-weight: 500;
    line-height: 2;

    overflow-wrap: break-word;
    white-space: normal;
}

.declaration-section #eligibilityCheck {
    margin-top: 5px;
    flex-shrink: 0;
}

/* Visible keyboard focus for declaration checkbox */

.declaration-section #eligibilityCheck:focus-visible,
.declaration-section #privacyCheck:focus-visible {
    outline: 3px solid var(--terracotta);
    outline-offset: 4px;
}

/* Highlight the declaration box when checked */

.declaration-section .checkbox-option:has(#eligibilityCheck:checked) {
    border-color: rgba(120, 139, 85, 0.55);
    border-left-color: var(--sage);

    background: #FAFCF6;
}


/* ==========================================
   15. SUBMIT BUTTON
========================================== */

.submit-container {
    margin-top: 35px;
}

.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 100%;

    border: none;
    border-radius: 12px;

    cursor: pointer;

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    padding: 20px 30px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.submit-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(61, 38, 27, 0.15);
}

.submit-btn:active {
    transform: translateY(0);
}

.submit-btn:focus-visible {
    outline: 3px solid var(--terracotta);
    outline-offset: 4px;
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}


/* ==========================================
   16. FORM MESSAGES
========================================== */

.form-message {
    margin-top: 20px;
    text-align: center;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
}

.form-message.error {
    color: #A83B30;
}

.form-message.success {
    color: #46743C;
}


/* ==========================================
   17. ARABIC RTL SUPPORT
========================================== */

html[dir="rtl"] .registration-container {
    text-align: right;
}

html[dir="rtl"] .registration-heading {
    text-align: center;
}

html[dir="rtl"] .registration-badge {
    letter-spacing: 0;
}

html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group select,
html[dir="rtl"] .form-group textarea {
    text-align: right;
}

html[dir="rtl"] #nationality {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .conditional-field {
    border-left: none;
    border-right: 3px solid var(--terracotta);
}

html[dir="rtl"] .eligibility-notice,
html[dir="rtl"] .checkbox-option,
html[dir="rtl"] .radio-option {
    text-align: right;
}

/* Declaration border switches sides in Arabic */

html[dir="rtl"] .declaration-section .checkbox-option:has(#eligibilityCheck) {
    border-left: 1px solid #F0E4D7;
    border-right: 4px solid var(--terracotta);
}

html[dir="rtl"] .declaration-section .checkbox-option:has(#eligibilityCheck:checked) {
    border-right-color: var(--sage);
}

html[dir="rtl"] .declaration-section .checkbox-option:has(#eligibilityCheck) span {
    text-align: right;
}

html[dir="rtl"] .form-message {
    text-align: center;
}

/*
   Phone numbers should remain left-to-right
   even when the website is in Arabic.
*/

html[dir="rtl"] #phoneNumber {
    direction: ltr;
    text-align: left;
}


/* ==========================================
   18. TABLET AND MOBILE
========================================== */

@media (max-width: 768px) {

    .registration-page {
        padding: 140px 5% 70px;
    }

    .registration-heading {
        margin-bottom: 35px;
    }

    .registration-heading h1 {
        font-size: 38px;
    }

    .registration-heading p {
        font-size: 14px;
    }

    .registration-container {
        border-radius: 20px;
    }

    .form-section {
        padding: 35px 25px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .form-section-heading h2 {
        font-size: 22px;
    }

    .radio-group {
        gap: 20px;
    }

    .question-box {
        padding: 20px;
    }

    .eligibility-notice {
        padding: 20px;
    }

    /* Keep the long declaration readable on mobile */

    .declaration-section .checkbox-option:has(#eligibilityCheck) {
        padding: 20px;
    }

    .declaration-section .checkbox-option:has(#eligibilityCheck) span {
        font-size: 13px;
        line-height: 1.9;
    }

}


/* ==========================================
   19. SMALL MOBILE DEVICES
========================================== */

@media (max-width: 420px) {

    .registration-page {
        padding: 120px 4% 60px;
    }

    .registration-heading h1 {
        font-size: 32px;
    }

    .registration-badge {
        font-size: 10px;
        padding: 10px 15px;
    }

    .form-section {
        padding: 30px 18px;
    }

    .form-section-heading {
        gap: 12px;
    }

    .section-number {
        width: 45px;
        height: 45px;
        min-width: 45px;

        font-size: 15px;
    }

    .form-section-heading h2 {
        font-size: 19px;
    }

    .form-section-heading p {
        font-size: 12px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
    }

    #nationality {
        font-size: 16px;
    }

    .eligibility-notice {
        gap: 10px;
        padding: 15px;
    }

    .eligibility-notice p {
        font-size: 12px;
    }

    .checkbox-option {
        font-size: 12px;
    }

    /* Smaller padding without squeezing the text */

    .declaration-section .checkbox-option:has(#eligibilityCheck) {
        padding: 15px;
        gap: 12px;
    }

    .declaration-section .checkbox-option:has(#eligibilityCheck) span {
        font-size: 12px;
        line-height: 1.85;
    }

    .submit-btn {
        padding: 18px 20px;
        font-size: 14px;
    }

}


/* ==========================================
   20. ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion: reduce) {

    .form-group input,
    .form-group select,
    .form-group textarea,
    #nationality,
    .submit-btn {
        transition: none;
    }

    .submit-btn:hover {
        transform: none;
    }

}

/* ==========================================
   KIOSKI 2027 — HONEYPOT PROTECTION
========================================== */

.form-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}