/* ==========================================================================
   CTM PATH™ Guided Journey™

   File        : css/registration.css
   Version     : 8.0
   Status      : PREMIUM LAUNCH EDITION

   Supports:
   ✓ pages/registration.html

========================================================================== */





/* ==========================================================================
   PAGE
========================================================================== */

.registration-page{

    position:relative;

    width:100%;

    max-width:960px;

    margin:0 auto;

    padding:0 0 100px;

}







/* ==========================================================================
   HEADER
========================================================================== */

.registration-header{

    text-align:center;

    padding:70px 40px 50px;

}







.page-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    padding:10px 22px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.03);

    color:var(--ctm-teal);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}







.registration-header h1{

    margin:0;

    color:var(--color-text-primary);

    font-size:clamp(2.3rem,4vw,3.8rem);

    font-weight:800;

    line-height:1.2;

}







.registration-header h2{

    margin:22px 0 0;

    color:var(--ctm-teal);

    font-size:1.25rem;

    font-weight:600;

}







.intro-tamil{

    max-width:720px;

    margin:38px auto 0;

    color:var(--color-text-primary);

    font-size:1.15rem;

    line-height:2;

}







.intro-english{

    max-width:720px;

    margin:28px auto 0;

    color:var(--color-text-secondary);

    font-size:1rem;

    line-height:1.9;

}







/* ==========================================================================
   FORM
========================================================================== */

#registration-form{

    display:flex;

    flex-direction:column;

    gap:40px;

}







/* ==========================================================================
   SECTION CARD
========================================================================== */

.form-section{

    position:relative;

    padding:42px;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(12px);

    transition:

        border-color .30s ease,

        transform .30s ease,

        box-shadow .30s ease;

}







.form-section:hover{

    transform:translateY(-4px);

    border-color:rgba(0,184,169,.30);

    box-shadow:

        0 18px 45px rgba(0,0,0,.22);

}







.section-title{

    display:flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    margin-bottom:24px;

    border-radius:50%;

    background:

        linear-gradient(
            135deg,
            var(--ctm-teal),
            rgba(0,184,169,.55)
        );

    color:#ffffff;

    font-size:1rem;

    font-weight:700;

}







.form-section h3{

    margin:0;

    color:var(--color-text-primary);

    font-size:1.7rem;

    font-weight:700;

}







.form-section>p{

    margin:10px 0 36px;

    color:var(--ctm-teal);

    font-size:.95rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}







/* ==========================================================================
   FORM GROUP
========================================================================== */

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:28px;

}







.form-group:last-child{

    margin-bottom:0;

}







.form-group label{

    margin-bottom:12px;

    color:var(--color-text-primary);

    font-size:1rem;

    font-weight:600;

    line-height:1.7;

}







.form-group label span{

    color:var(--color-text-secondary);

    font-size:.90rem;

    font-weight:500;

}







/* ==========================================================================
   INPUTS
========================================================================== */

.form-group input,

.form-group select{

    width:100%;

    min-height:60px;

    padding:16px 20px;

    border:1px solid rgba(255,255,255,.10);

    border-radius:16px;

    background:rgba(255,255,255,.04);

    color:var(--color-text-primary);

    font-size:1rem;

    transition:

        border-color .25s ease,

        box-shadow .25s ease,

        background .25s ease;

}







.form-group input::placeholder{

    color:rgba(255,255,255,.45);

}







.form-group input:focus,

.form-group select:focus{

    outline:none;

    border-color:var(--ctm-teal);

    background:rgba(255,255,255,.06);

    box-shadow:

        0 0 0 4px rgba(0,184,169,.12);

}

/* ==========================================================================
   LANGUAGE OPTIONS
========================================================================== */

.language-options{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:20px;

    margin-top:10px;

}







.language-card{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:72px;

    padding:18px 20px;

    border:1px solid rgba(255,255,255,.10);

    border-radius:18px;

    background:rgba(255,255,255,.03);

    cursor:pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}







.language-card:hover{

    transform:translateY(-2px);

    border-color:rgba(0,184,169,.35);

    background:rgba(255,255,255,.05);

}







.language-card input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}







.language-card span{

    color:var(--color-text-primary);

    font-size:1rem;

    font-weight:600;

}







.language-card:has(input:checked){

    border-color:var(--ctm-teal);

    background:rgba(0,184,169,.10);

    box-shadow:
        0 0 0 3px rgba(0,184,169,.12);

}







.language-card:has(input:checked) span{

    color:var(--ctm-teal);

}







/* ==========================================================================
   SELECT
========================================================================== */

.form-group select{

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    cursor:pointer;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300b8a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    padding-right:56px;

}







.other-source{

    margin-top:20px;

}







/* ==========================================================================
   PRIVACY CARD
========================================================================== */

.privacy-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:42px;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(0,184,169,.05);

}







.privacy-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    margin-bottom:24px;

    border-radius:50%;

    background:rgba(0,184,169,.14);

    font-size:1.8rem;

}







.privacy-card h3{

    margin:0 0 18px;

    color:var(--color-text-primary);

    font-size:1.6rem;

    font-weight:700;

}







.privacy-card p{

    max-width:700px;

    margin:0;

    color:var(--color-text-secondary);

    font-size:1rem;

    line-height:1.9;

}







/* ==========================================================================
   CONSENT
========================================================================== */

.consent{

    margin:0;

}







.consent-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:30px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    background:rgba(255,255,255,.03);

    cursor:pointer;

}







.consent-card input{

    width:22px;

    height:22px;

    margin-top:3px;

    accent-color:var(--ctm-teal);

    flex-shrink:0;

}







.consent-card span{

    color:var(--color-text-primary);

    line-height:1.9;

}







.consent-card small{

    display:block;

    margin-top:12px;

    color:var(--color-text-secondary);

    font-size:.90rem;

}







/* ==========================================================================
   ACTIONS
========================================================================== */

.form-actions{

    display:flex;

    justify-content:center;

    margin-top:20px;

}







.form-actions .primary-button{

    width:100%;

    max-width:440px;

    min-height:76px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        var(--ctm-teal),
        #2fd5c5
    );

    color:#ffffff;

    box-shadow:
        0 18px 44px rgba(0,184,169,.30);

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        filter .30s ease;

}







.form-actions .primary-button:hover{

    transform:translateY(-3px);

    filter:brightness(1.04);

    box-shadow:
        0 26px 58px rgba(0,184,169,.40);

}







.button-tamil{

    font-size:1.08rem;

    font-weight:700;

}







.button-english{

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    opacity:.95;

}







/* ==========================================================================
   FOOTER NOTE
========================================================================== */

.registration-footer-note{

    max-width:760px;

    margin:46px auto 0;

    text-align:center;

}







.registration-footer-note .tamil{

    color:var(--color-text-primary);

    font-size:1rem;

    line-height:1.9;

}







.registration-footer-note .english{

    margin-top:16px;

    color:var(--ctm-teal);

    font-size:.92rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}







/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media (max-width:992px){

    .registration-header{

        padding:60px 28px 40px;

    }

    .form-section{

        padding:34px;

    }

}







@media (max-width:768px){

    .registration-page{

        padding-bottom:80px;

    }

    .language-options{

        grid-template-columns:1fr;

    }

    .form-section{

        padding:28px;

    }

    .privacy-card{

        padding:32px 24px;

    }

    .consent-card{

        padding:24px;

    }

}







@media (max-width:480px){

    .registration-header{

        padding:50px 20px 30px;

    }

    .registration-header h1{

        font-size:2rem;

    }

    .form-section{

        padding:22px;

        border-radius:22px;

    }

    .section-title{

        width:48px;

        height:48px;

    }

    .privacy-icon{

        width:60px;

        height:60px;

        font-size:1.5rem;

    }

    .form-group input,

    .form-group select{

        min-height:56px;

        padding:14px 18px;

    }

    .form-actions .primary-button{

        min-height:70px;

    }

}

/* ==========================================================================
   END OF FILE
========================================================================== */