/*
 * Ebced Premium Başvuru – Frontend Stylesheet
 *
 * Design direction: Refined luxury / Islamic geometric warmth.
 * Palette: Deep indigo + warm gold + ivory parchment.
 * Typography: System serif stack for body; intentional letter-spacing for labels.
 * Character: Professional, calm, trustworthy. No neon gradients, no generic whites.
 */

/* ── CSS Custom Properties ────────────────────────────────────── */
:root {
    --epb-bg:           #faf8f4;       /* warm ivory */
    --epb-surface:      #ffffff;
    --epb-border:       #e3ddd4;
    --epb-border-focus: #8b6914;
    --epb-gold:         #8b6914;       /* antique gold */
    --epb-gold-light:   #c9a84c;
    --epb-indigo:       #1e2a4a;       /* deep indigo */
    --epb-indigo-mid:   #2d3f6b;
    --epb-text:         #1e2a4a;
    --epb-text-soft:    #5a5348;
    --epb-text-muted:   #9a9088;
    --epb-error:        #9b1c1c;
    --epb-error-bg:     #fef2f2;
    --epb-notice-bg:    #f0f7f0;
    --epb-notice-border:#2e7d32;
    --epb-whatsapp:     #128c7e;
    --epb-whatsapp-hover: #0d7066;
    --epb-radius:       10px;
    --epb-radius-sm:    6px;
    --epb-shadow:       0 2px 16px rgba(30,42,74,.08);
    --epb-font-body:    Georgia, "Times New Roman", "Palatino Linotype", serif;
    --epb-font-ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Wrapper ──────────────────────────────────────────────────── */
.epb-wrapper {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 16px 32px;
    font-family: var( --epb-font-ui );
    color: var( --epb-text );
    line-height: 1.6;
    background: var( --epb-bg );
}

/* ── Header ───────────────────────────────────────────────────── */
.epb-header {
    text-align: center;
    padding: 36px 24px 28px;
    border-bottom: 1px solid var( --epb-border );
    margin-bottom: 28px;
}

.epb-header-icon {
    font-size: 28px;
    color: var( --epb-gold );
    margin-bottom: 10px;
    display: block;
    animation: epb-pulse 3s ease-in-out infinite;
}

@keyframes epb-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .65; transform: scale(.92); }
}

.epb-title {
    font-family: var( --epb-font-body );
    font-size: 22px;
    font-weight: 700;
    color: var( --epb-indigo );
    margin: 0 0 10px;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.epb-subtitle {
    font-size: 14px;
    color: var( --epb-text-soft );
    margin: 0;
    line-height: 1.7;
}

/* ── Autofill notice ──────────────────────────────────────────── */
.epb-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: var( --epb-notice-bg );
    border-left: 4px solid var( --epb-notice-border );
    border-radius: var( --epb-radius-sm );
    font-size: 13px;
    color: #245a27;
    margin-bottom: 24px;
    line-height: 1.5;
}

.epb-notice[hidden] { display: none; }

.epb-notice-icon {
    font-size: 15px;
    flex-shrink: 0;
    color: var( --epb-notice-border );
}

/* ── Form card ────────────────────────────────────────────────── */
.epb-form {
    background: var( --epb-surface );
    border: 1px solid var( --epb-border );
    border-radius: var( --epb-radius );
    padding: 28px 28px 24px;
    box-shadow: var( --epb-shadow );
}

/* ── Field wrapper ────────────────────────────────────────────── */
.epb-field {
    margin-bottom: 20px;
}

.epb-field:last-of-type {
    margin-bottom: 0;
}

/* Two-column row */
.epb-field-row {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}

.epb-field--half {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* ── Labels ───────────────────────────────────────────────────── */
.epb-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var( --epb-text-soft );
    margin-bottom: 7px;
}

.epb-required {
    color: var( --epb-gold );
    margin-left: 2px;
}

/* ── Text inputs ──────────────────────────────────────────────── */
.epb-input,
.epb-select {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var( --epb-border );
    border-radius: var( --epb-radius-sm );
    padding: 11px 14px;
    font-size: 15px;
    font-family: var( --epb-font-ui );
    color: var( --epb-text );
    background: #fefefe;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    appearance: none;
    -webkit-appearance: none;
}

.epb-input:focus,
.epb-select:focus {
    border-color: var( --epb-border-focus );
    box-shadow: 0 0 0 3px rgba(139,105,20,.12);
    background: #fff;
}

.epb-input::placeholder {
    color: var( --epb-text-muted );
    font-style: italic;
}

/* Arabic input */
.epb-arabic-input {
    font-size: 20px;
    direction: rtl;
    text-align: right;
    font-family: "Noto Naskh Arabic", "Scheherazade New", "Traditional Arabic",
                 "Arabic Typesetting", Georgia, serif;
    letter-spacing: .04em;
}

/* Number inputs – centred, slightly larger */
.epb-input--number {
    text-align: center;
    font-size: 18px;
    font-family: var( --epb-font-body );
    font-weight: 700;
    color: var( --epb-indigo );
    letter-spacing: .05em;
}

/* Error state */
.epb-input--error {
    border-color: var( --epb-error );
    background: var( --epb-error-bg );
}

.epb-input--error:focus {
    border-color: var( --epb-error );
    box-shadow: 0 0 0 3px rgba(155,28,28,.1);
}

/* ── Select ───────────────────────────────────────────────────── */
.epb-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a5348' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ── Inline field errors ──────────────────────────────────────── */
.epb-field-error {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: var( --epb-error );
    font-style: italic;
}

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

/* ── WhatsApp submit button ───────────────────────────────────── */
.epb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 24px;
    padding: 15px 20px;
    border: none;
    border-radius: var( --epb-radius-sm );
    background: var( --epb-whatsapp );
    color: #fff;
    font-family: var( --epb-font-ui );
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    text-align: center;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 3px 12px rgba(18,140,126,.3);
    line-height: 1.3;
}

.epb-btn:hover:not(:disabled) {
    background: var( --epb-whatsapp-hover );
    transform: translateY( -1px );
    box-shadow: 0 5px 18px rgba(18,140,126,.4);
}

.epb-btn:active:not(:disabled) {
    transform: translateY( 0 );
    box-shadow: 0 2px 8px rgba(18,140,126,.25);
}

.epb-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

.epb-btn-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Privacy note ─────────────────────────────────────────────── */
.epb-privacy-note {
    margin: 14px 0 0;
    font-size: 11.5px;
    text-align: center;
    color: var( --epb-text-muted );
    line-height: 1.5;
}

/* ── Divider between fields ───────────────────────────────────── */
.epb-form::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        var( --epb-gold-light ) 30%,
        var( --epb-gold ) 50%,
        var( --epb-gold-light ) 70%,
        transparent
    );
    border-radius: 3px;
    margin-bottom: 28px;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media ( max-width: 500px ) {
    .epb-form {
        padding: 20px 18px 18px;
    }

    .epb-field-row {
        flex-direction: column;
        gap: 20px;
    }

    .epb-field--half {
        flex: unset;
    }

    .epb-btn {
        font-size: 14px;
        padding: 14px 16px;
    }

    .epb-title {
        font-size: 19px;
    }
}