:root {
    /* Blue Set 1 */
    --blue-1: #04B0D9;
    --blue-2: #34BEDF;
    --blue-3: #64CCE4;
    --blue-4: #95D9EA;
    --blue-5: #C5E7EF;

    /* Blue Set 2 */
    --blue2-1: #587AE5;
    --blue2-2: #7793E8;
    --blue2-3: #97ABEB;
    --blue2-4: #B6C4EF;
    --blue2-5: #D6DCF2;

    /* Purple Set */
    --purple-1: #963CED;
    --purple-2: #A961EF;
    --purple-3: #BC86F0;
    --purple-4: #CFABF2;
    --purple-5: #E2D0F3;

    /* Pink Set */
    --pink-1: #D309F5;
    --pink-2: #DA38F5;
    --pink-3: #E167F5;
    --pink-4: #E797F5;
    --pink-5: #EEC6F5;

    --dark: #0f172a;
    --text: #334155;
}

/* GLOBAL RESET */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ======================== */
/* HOME PAGE – HEADER       */
/* ======================== */

.header {
    max-width: 75rem;
    margin: 1.5rem auto 0;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
}

.cv-form-page .header {
    position: absolute;          /* يطفو فوق اليسار+اليمين */
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    width: 100%;
    max-width: 75rem;
    margin: 0;                   /* نشيل المارجن القديم */
    padding: 0 1.5rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;     /* مهم عشان الخلفية اللي تحت تبين */
}

.logo {
    height: 3.125rem; /* 50px */
}

/* ======================== */
/* HOME PAGE – HERO         */
/* ======================== */

.hero {
    width: 100%;
    max-width: 100%;               /* 1200px تقريبًا */
    margin: 0;
    padding: 6rem 7vw 4rem;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
}

.blue {
    /* لون عادي كـ fallback لو المتصفح ما يدعم الكليب */
    color: var(--blue-1);

    /* جراديانت من الأزرق للوردي */
    background: linear-gradient(90deg, var(--blue-1), var(--pink-1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* عشان يظهر الجراديانت داخل النص */
}

/* عنوان السطر الثاني All in One Place */
.purple {
    position: relative;
    display: inline-block;
    color: #0f172a;
    font-weight: 800;
}

/* البار الوردي تحت النص مع تمديد لليمين */
.purple::after {
    content: "";
    position: absolute;
    left: 0;                /* يبدأ من بداية النص */
    right: -0.25em;         /* تمديد بسيط لليمين – زِد أو قلّل الرقم حسب ذوقك */
    height: 0.5em;
    bottom: 0.05em;         /* اضبط المسافة عن النص */
    background: var(--pink-5);
    z-index: -1;            /* يخلي الخط خلف النص */
}


/* LEFT SIDE */
.hero-left {
    flex: 0 0 34rem;
    max-width: 34rem;
    margin-left: 15rem;
}

/* صورة COMING SOON */
.hero-coming {
    width: 16rem;                  /* ~256px */
    max-width: 100%;
    display: block;
    margin-bottom: 1.8rem;
}

/* العنوان */
.hero .title {
    margin: 0 0 1.25rem 0;
    font-size: 2.6rem;
    line-height: 1.2;
    font-weight: 800;
}

/* نفس تعريف .blue و .purple اللي عندك، خليه كما هو */

/* الوصف */
.description {
    margin-top: 0;
    margin-bottom: 2rem;
    max-width: 28rem;
    font-size: 0.98rem;
    font-weight: bold;
    color: var(--text);
    word-spacing: 0.5rem; /* space between words */
}

/* الزر */
.cta {
    display: inline-block;
    padding: 0.85rem 1.9rem;
    border-radius: 0.75rem;
    background: var(--blue-1);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 0.25rem 1.125rem rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.cta:hover {
    opacity: 0.92;
    transform: translateY(-0.05rem);
    box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.2);
}



/* LEFT SIDE (نفسه زي قبل) */
.hero-left {
    flex: 0 0 32rem;
}

/* RIGHT SIDE – صورة عائمة بدون كارد */
.hero-right {
    position: absolute;
    margin-top: 5rem;
    max-width: 90%;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;      /* ديكور فقط، ما يتفاعل مع الماوس */
}

/* نفس الـ image اللي فيها الولد والكروت */
.hero-figure {
    width: min(44rem, 56vw);   /* أكبر + يتجاوب مع عرض الشاشة */
    height: auto;
    display: block;
}



/* Tablet + Mobile (≤ 1024px) */
@media (max-width: 64rem) { /* ~1024px */

    /* نخلي البودي أبيض عادي عشان ما يبان فيه جradient مكرر */
    body {
        background: #ffffff;
    }

    /* الهيرو نفسه عليه الخلفية ويملي الشاشة */
    .hero {
        background: radial-gradient(
            circle at 0% 0%,
            var(--blue-5) 0%,
            #f7fbff 50%,
            var(--purple-5) 100%
        );
        min-height: 100vh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4.5rem 1.5rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    /* نخفي صورة الولد بالكامل على الموبايل/تابلت */
    .hero-right {
        display: none;
    }

    .hero-left {
        margin-left: 0;
        max-width: 28rem;
        text-align: center;
    }

    /* comingsoon في النص تمام */
    .hero-coming {
        display: block;
        margin: 0 auto 1.4rem;
    }

    .description {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .cta {
        margin-top: 0.75rem;
    }

    /* اللوجو على اليسار في الأعلى */
    .header {
        position: absolute;
        top: 0.75rem;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 26rem;        /* نفس عرض الكارد تقريباً */
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between; /* لوجو يسار، زر يمين */
        background: transparent;
        z-index: 20;
    }
}

@media (max-width: 37.5rem) {
    .hero {
        padding: 4rem 1.25rem 2.5rem;
    }

    .hero .title {
        font-size: 2rem;
    }

    .hero-coming {
        width: 12rem;
    }

    .cta {
        width: 100%;
        max-width: 14rem;
        text-align: center;
    }
}




.cv-form-page {
    margin: 0;
    min-height: 100vh;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--dark);
}

/* ========== MAIN 2-COLUMN LAYOUT ========== */

.cv-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 👈 50% / 50% */
    min-height: 100vh;
}

/* LEFT SIDE – FIXED BLUE WITH GIRL */
.cv-left {
    position: sticky;          /* يظل ثابت أثناء سكرول الفورم */
    top: 0;
    align-self: flex-start;
    height: 100vh;

    background:
        #5dc5e4
        url("assets/teacher.jpg") center bottom / cover no-repeat;

}


/* لو حاب تضيف لوجو */
.cv-left-logo {
    position: absolute;
    top: 1.5rem;   /* نفس الـ margin top تقريباً تبع الهيدر */
    left: 1.5rem;  /* زي الـ padding اللي في الهيدر */
    /* ما نحدد height هون عشان يأخذ من .logo */
}

/* RIGHT SIDE – GRADIENT WITH FORM */
.cv-right {
    position: relative;
    min-height: 100vh;
    padding: 2.5rem 4rem 3rem 3rem;
    background: radial-gradient(
        circle at 0% 0%,
        #def7ff 0%,
        #fdfefe 55%,
        #f7e8ff 100%
    );

}

/* Back to Website button */
.cv-back-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.8rem;
    border-radius: 0.75rem;
    background: var(--blue-1);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 0.75rem 1.5rem rgba(4, 176, 217, 0.45);
    transition: transform 0.15s ease, filter 0.15s ease;
}


.cv-back-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-0.06rem);
}


.cv-back-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-0.06rem);
}

/* محتوى الفورم (عمود ضيّق مثل الفيجما) */
.cv-right-inner {
    max-width: 60rem;
    margin-top: 4.5rem;
    margin-left: 3.5rem;
}

.cv-link-inline {
    color: var(--blue2-1);
    font-weight: 600;
    text-decoration: none;
}
.cv-link-inline:hover {
    text-decoration: underline;
}

/* ARE YOU + TEACHER PILL – EXACT FIGMA LOOK  */
.cv-role-block {
    margin-top: 1.7rem;
    margin-bottom: 1.7rem;
    max-width: 40rem;        /* نفس عرض الحقول تقريباً */
    margin: 0 auto;
}

.cv-role-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--purple-1);  /* البنفسجي تبع التصميم */
}

/* الشريط الأزرق الكامل */
.cv-role-pill {
    width: 80%;
    border-radius: 0.75rem;
    background: var(--blue-1);
    box-shadow: 0 0.75rem 1.5rem rgba(4, 176, 217, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;              /* ما بدنا padding حوالين الزر */
}

/* زر Teacher داخل الشريط */
.cv-role-option {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.6rem 0;
    border-radius: 0.75rem;
    background: transparent; /* الشريط نفسه هو الخلفية */
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}

/* ما في اختلاف بصري كبير عن الحالة العادية, بس نخليها بدون شادو إضافي */
.cv-role-option--active {
    background: transparent;
    box-shadow: none;
    transform: none;
}


/* FORM FIELDS */
.cv-form {
    margin-top: 0.5rem;
}

.cv-form label {
    display: block;
    margin-top: 0.9rem;
    margin-bottom: 0.25rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dark);
}

.cv-form input,
.cv-form select,
.cv-form textarea {
    width: 100%;
    max-width: 40rem !important;
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
    border: 0.0625rem solid #dde5f4;
    background: #f8fafc;
    font-size: 0.95rem;
    color: var(--dark);
    outline: none;
    transition: border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.cv-form input::placeholder {
    color: #9ca3af;
}


.cv-phone-wrapper {
    display: flex;
    gap: 0.75rem;
    width: 40rem;
    max-width: 40rem;
}
/* intl-tel-input container */
.cv-phone-wrapper .iti {
    width: 100%;
}
.cv-phone-input,
#phone {
    width: 100%;
}


/* نفس السهم لكل الـ selects في الفورم */
.cv-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    padding-right: 2.2rem;          /* مساحة للسهم */
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230f172a' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;  /* حرّكها يمين/يسار */
    background-size: 0.625rem 0.375rem;
}


.cv-phone-country {
    flex: 0 0 7rem;   /* ثابت الحجم تقريبا */
}

.cv-phone-input {
    flex: 1 1 auto;
}

.cv-phone-wrapper select,
.cv-phone-wrapper input {
    width: 100%;
    max-width: 100%;
}


.cv-form input:focus,
.cv-form select:focus,
.cv-form textarea:focus {
    border-color: var(--blue-1);
    background-color: #ffffff;
    box-shadow: 0 0 0 0.0625rem rgba(4, 176, 217, 0.3);
}

/* CV Upload box */
.cv-upload-box {
    max-width: 40rem !important;
    margin-top: 0.5rem;
    display: block;
    text-align: center;
    padding: 1.7rem 1rem;
    border-radius: 1.1rem;
    border: 0.1rem dashed var(--blue-1);
    background: #f0f9ff;
    cursor: pointer;
    transition: background-color 0.15s ease,
        border-color 0.15s ease;
}

.cv-upload-box img {
    width: 3.25rem;
    margin: 0 auto 0.5rem;
}

.cv-upload-box span {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
}

.cv-upload-box:hover {
    background-color: var(--blue-4);
    border-color: var(--blue-1);
}

.cv-upload-box.has-file {
    background: #e0f2fe;
    border-style: solid;
}

/* reCAPTCHA */
.g-recaptcha {
    max-width: 40rem !important;
    margin-top: 1.4rem;
    transform-origin: left top;
}

/* ACTION BUTTONS */
.cv-actions {
    max-width: 40rem !important;
    margin-left: 0.35rem;
    margin-top: 1.9rem;
    display: flex;
    gap: 0.9rem;
}

.cv-btn-send,
.cv-btn-cancel {
    flex: 1;
    padding: 0.9rem;
    border-radius: 0.9rem;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease,
        box-shadow 0.12s ease,
        filter 0.12s ease;
}

/* Send (dark) */
.cv-btn-send {
    background: var(--dark);
    color: #ffffff;
    box-shadow: 0 0.75rem 1.875rem rgba(15, 23, 42, 0.6);
}
.cv-btn-send:hover {
    filter: brightness(1.04);
    transform: translateY(-0.05rem);
}

/* Cancel (cyan) */
.cv-btn-cancel {
    background: var(--blue-1);
    color: #ffffff;
    box-shadow: 0 0.75rem 1.5rem rgba(4, 176, 217, 0.45);
}
.cv-btn-cancel:hover {
    filter: brightness(1.06);
    transform: translateY(-0.05rem);
}

.cv-upload-box.dragover {
    background: #dbeafe;               /* slightly stronger blue */
    border-color: var(--blue2-1);
    border-style: solid;
    box-shadow: 0 0 0 2px rgba(88, 122, 229, 0.25);
}


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

@media (max-width: 64rem) { /* ~1024px */
     /* الهيدر يطفو فوق الكارد (فوق صورة البنت) */
    .cv-form-page .header {
        position: absolute;
        top: 0.75rem;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 26rem;        /* نفس عرض الكارد تقريباً */
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between; /* لوجو يسار، زر يمين */
        background: transparent;
        z-index: 20;
    }
    .cv-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cv-left {
        position: relative;
        height: 18rem;
    }

    .cv-right {
        padding: 2.5rem 2rem 3rem;
    }

    .cv-right-inner {
        margin-top: 3rem;
        margin-left: 0;
        max-width: 26rem;
    }

    .cv-back-btn {
        right: 2rem;
    }
}

@media (max-width: 40rem) { /* ~640px */
    .cv-right {
        padding: 2rem 1.5rem 2.5rem;
    }

    .cv-right-inner {
        margin-top: 3.2rem;
        max-width: 100%;
    }

    .cv-actions {
        flex-direction: column;
    }

    .cv-btn-send,
    .cv-btn-cancel {
        width: 100%;
    }

    .g-recaptcha {
        transform: scale(0.9);
    }
    .cv-phone-wrapper {
        width: 100%;
        max-width: 100%;
    }
}