/* ================================================================
   Kayan Registration Widget — Front-End Styles
   AR Font: Zain | EN Font: Alexandria
   Colors: #07394D #50D2FE #0D607F
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Zain:wght@300;400;600;700;800;900&family=Alexandria:wght@300;400;600;700;800;900&display=swap');

/* --- CSS Variables (overridden inline per widget instance) ------- */
.kayan-reg-section {
    --kr-primary : #07394D;
    --kr-accent  : #50D2FE;
    --kr-mid     : #0D607F;
    --kr-btn     : #C2185B;
    --kr-radius  : 18px;
    --kr-shadow  : 0 8px 40px rgba(7, 57, 77, .12);
    --kr-font    : 'Zain', sans-serif;
}

/* Arabic font */
.kayan-reg-section.kayan-font-ar {
    --kr-font: 'Zain', sans-serif;
}

/* English font */
.kayan-reg-section.kayan-font-en {
    --kr-font: 'Alexandria', sans-serif;
}

/* English LTR label alignment */
.kayan-font-en .kayan-label,
.kayan-font-en .kayan-hint,
.kayan-font-en .kayan-notice {
    text-align: left;
}

/* English: icon position on left side */
.kayan-font-en .kayan-icon {
    right : auto;
    left  : 12px;
}

.kayan-font-en .kayan-input {
    padding    : 13px 16px 13px 42px;
    text-align : left;
    direction  : ltr;
}

/* English phone input: keep ltr */
.kayan-font-en .kayan-phone-input {
    direction  : ltr;
    text-align : left;
}

/* English textarea: ltr */
.kayan-font-en .kayan-textarea {
    text-align : left;
    direction  : ltr;
}

/* English captcha: ltr */
.kayan-font-en .kayan-captcha-inner {
    direction  : ltr;
}

/* English phone wrap: flag on left */
.kayan-font-en .kayan-country-code {
    border-left  : none;
    border-right : 1.5px solid #d8ecf3;
}

/* English info column text */
.kayan-font-en .kayan-reg-info {
    text-align: left;
}

.kayan-font-en .kayan-sub-text {
    text-align: left;
}

/* English arrow flip */
.kayan-font-en .kayan-arrow-deco {
    transform: scaleX(-1);
}

/* --- Layout ---------------------------------------------------- */
.kayan-reg-section {
    display               : grid !important;
    grid-template-columns : 1fr 1.1fr !important;
    align-items    : center !important;
    gap            : 48px !important;
    padding        : 64px 48px !important;
    direction      : rtl !important;
    font-family    : var(--kr-font) !important;
    background     : linear-gradient(135deg, #f0faff 0%, #e6f5f9 50%, #fef0f6 100%) !important;
    border-radius  : 24px !important;
    overflow       : hidden !important;
    position       : relative !important;
    box-sizing     : border-box !important;
    width          : 100% !important;
}

/* English: override RTL direction to LTR */
.kayan-font-en.kayan-reg-section {
    direction : ltr !important;
}

/* ---- Columns ----------------------------------- */
.kayan-reg-section .kayan-reg-form-wrap {
    order     : 2 !important;
    min-width : 0 !important;
}

.kayan-reg-section .kayan-reg-info {
    order     : 1 !important;
    min-width : 0 !important;
}

/* English LTR: flip order */
.kayan-font-en.kayan-reg-section .kayan-reg-form-wrap {
    order : 1 !important;
}

.kayan-font-en.kayan-reg-section .kayan-reg-info {
    order : 2 !important;
}

.kayan-reg-card {
    background    : #fff;
    border-radius : var(--kr-radius);
    padding       : 36px 32px;
    box-shadow    : var(--kr-shadow);
    border        : 1px solid rgba(80, 210, 254, .2);
}

/* ---- Form groups --------------------------------------------- */
.kayan-form-group {
    margin-bottom : 20px;
}

.kayan-label {
    display       : block;
    font-size     : 15px;
    font-weight   : 700;
    color         : var(--kr-primary);
    margin-bottom : 8px;
    text-align    : right;
}

.kayan-label .req {
    color       : var(--kr-btn);
    margin-right: 3px;
}

/* ---- Text input ---------------------------------------------- */
.kayan-input-wrap {
    position : relative;
}

.kayan-icon {
    position  : absolute;
    right     : 12px;
    top       : 50%;
    transform : translateY(-50%);
    color     : #9cb8c4;
    display   : flex;
}

.kayan-input {
    width         : 100%;
    padding       : 13px 42px 13px 16px;
    border        : 1.5px solid #d8ecf3;
    border-radius : 10px;
    font-family   : var(--kr-font);
    font-size     : 15px;
    color         : var(--kr-primary);
    background    : #f7fdff;
    outline       : none;
    transition    : border-color .25s, box-shadow .25s;
    text-align    : right;
    direction     : rtl;
    box-sizing    : border-box;
}

.kayan-input:focus {
    border-color : var(--kr-accent);
    box-shadow   : 0 0 0 3px rgba(80, 210, 254, .18);
    background   : #fff;
}

.kayan-input::placeholder { color: #b0cdd8; }

/* ---- Phone row ----------------------------------------------- */
.kayan-phone-wrap {
    display     : flex;
    align-items : center;
    border      : 1.5px solid #d8ecf3;
    border-radius : 10px;
    background  : #f7fdff;
    overflow    : hidden;
    transition  : border-color .25s, box-shadow .25s;
}

.kayan-phone-wrap:focus-within {
    border-color : var(--kr-accent);
    box-shadow   : 0 0 0 3px rgba(80, 210, 254, .18);
    background   : #fff;
}

.kayan-country-code {
    display     : flex;
    align-items : center;
    gap         : 6px;
    padding     : 13px 14px;
    border-left : 1.5px solid #d8ecf3;
    background  : #eef8fc;
    font-size   : 14px;
    font-weight : 700;
    color       : var(--kr-primary);
    white-space : nowrap;
    flex-shrink : 0;
}

.kayan-phone-input {
    flex       : 1;
    border     : none !important;
    background : transparent !important;
    box-shadow : none !important;
    padding    : 13px 14px !important;
    direction  : ltr;
    text-align : left;
}

.kayan-hint {
    font-size   : 12px;
    color       : #9cb8c4;
    margin-top  : 5px;
    text-align  : right;
}

/* ---- Textarea ------------------------------------------------- */
.kayan-textarea {
    width         : 100%;
    padding       : 13px 16px;
    border        : 1.5px solid #d8ecf3;
    border-radius : 10px;
    font-family   : var(--kr-font);
    font-size     : 15px;
    color         : var(--kr-primary);
    background    : #f7fdff;
    outline       : none;
    resize        : vertical;
    transition    : border-color .25s, box-shadow .25s;
    text-align    : right;
    direction     : rtl;
    box-sizing    : box-sizing;
    box-sizing    : border-box;
}

.kayan-textarea:focus {
    border-color : var(--kr-accent);
    box-shadow   : 0 0 0 3px rgba(80, 210, 254, .18);
    background   : #fff;
}

.kayan-textarea::placeholder { color: #b0cdd8; }

/* ---- Captcha placeholder ------------------------------------- */
.kayan-captcha-placeholder {
    border        : 1.5px solid #d8ecf3;
    border-radius : 10px;
    padding       : 14px 16px;
    background    : #f7fdff;
    margin-bottom : 20px;
}

.kayan-captcha-inner {
    display     : flex;
    align-items : center;
    gap         : 10px;
    font-size   : 14px;
    color       : var(--kr-primary);
}

.kayan-captcha-check {
    width         : 24px;
    height        : 24px;
    border        : 2px solid #ccc;
    border-radius : 4px;
    display       : flex;
    align-items   : center;
    justify-content: center;
    flex-shrink   : 0;
    color         : transparent;
}

/* ---- Notices -------------------------------------------------- */
.kayan-notice {
    padding       : 12px 16px;
    border-radius : 10px;
    font-size     : 14px;
    font-weight   : 600;
    margin-bottom : 16px;
    text-align    : right;
}

.kayan-notice-success {
    background : rgba(80, 210, 254, .15);
    border     : 1.5px solid var(--kr-accent);
    color      : var(--kr-mid);
}

.kayan-notice-error {
    background : rgba(194, 24, 91, .08);
    border     : 1.5px solid rgba(194, 24, 91, .3);
    color      : #b0003a;
}

/* ---- Submit button ------------------------------------------- */
.kayan-submit-btn {
    width         : 100%;
    padding       : 16px;
    background    : var(--kr-btn);
    background-image: linear-gradient(135deg, var(--kr-btn) 0%, color-mix(in srgb, var(--kr-btn) 70%, #ff69b4) 100%);
    color         : #fff;
    border        : none;
    border-radius : 12px;
    font-family   : var(--kr-font);
    font-size     : 18px;
    font-weight   : 800;
    letter-spacing: 1px;
    cursor        : pointer;
    transition    : transform .2s, box-shadow .2s, opacity .2s;
    display       : flex;
    align-items   : center;
    justify-content: center;
    gap           : 10px;
    box-shadow    : 0 4px 20px rgba(0, 0, 0, .25);
}

.kayan-submit-btn:hover {
    transform  : translateY(-2px);
    box-shadow : 0 8px 28px rgba(0, 0, 0, .35);
    filter     : brightness(1.1);
}

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

/* ---- Spinner -------------------------------------------------- */
@keyframes kayan-spin {
    to { transform: rotate(360deg); }
}
.kayan-spin {
    animation: kayan-spin .8s linear infinite;
}

/* ================================================================
   Right column: Info / Copy
================================================================ */
.kayan-reg-info {
    order    : 1;
    position : relative;
    padding  : 24px 16px;
    text-align: right;
}

/* Decorative blob */
.kayan-reg-blob {
    position      : absolute;
    top           : -40px;
    right         : -40px;
    width         : 300px;
    height        : 300px;
    background    : radial-gradient(circle, rgba(80, 210, 254, .28) 0%, transparent 70%);
    border-radius : 50%;
    pointer-events: none;
    z-index       : 0;
}

.kayan-reg-info > * { position: relative; z-index: 1; }

.kayan-badge {
    display       : inline-block;
    color         : var(--kr-btn);
    font-size     : 16px;
    font-weight   : 700;
    margin-bottom : 10px;
    letter-spacing: .5px;
}

.kayan-main-heading {
    font-size   : clamp(2rem, 3.5vw, 2.8rem);
    font-weight : 900;
    color       : var(--kr-primary);
    line-height : 1.3;
    margin      : 0 0 20px;
    letter-spacing: -.5px;
}

.kayan-sub-text {
    font-size   : 16px;
    color       : var(--kr-mid);
    line-height : 1.8;
    margin      : 0 0 32px;
    max-width   : 380px;
}

/* Arrow decoration */
.kayan-arrow-deco {
    width  : 130px;
    opacity: .75;
}

/* ================================================================
   Responsive
================================================================ */
@media (max-width: 900px) {
    .kayan-reg-section {
        grid-template-columns : 1fr !important;
        padding               : 40px 24px !important;
        gap                   : 36px !important;
    }
    .kayan-reg-section .kayan-reg-info { order: 1 !important; text-align: center; }
    .kayan-reg-section .kayan-reg-form-wrap { order: 2 !important; }
    .kayan-font-en.kayan-reg-section .kayan-reg-info { order: 1 !important; }
    .kayan-font-en.kayan-reg-section .kayan-reg-form-wrap { order: 2 !important; }
    .kayan-main-heading { font-size: 2rem; }
    .kayan-sub-text { max-width: 100%; margin-inline: auto; }
    .kayan-badge, .kayan-sub-text { text-align: center; display:block; }
    .kayan-arrow-deco { margin: 0 auto; transform: scaleX(-1); }
}

@media (max-width: 480px) {
    .kayan-reg-card { padding: 24px 18px; }
    .kayan-main-heading { font-size: 1.6rem; }
}