/* ============================================================
   TBYC Funnel — Shared Styles
   Zionlab Digital — Think Before You Code
   assets/css/app.css
   ============================================================
   Brand palette:
   --honey:     #FABE5C   primary CTA, highlights
   --cream:     #F5F5DC   headings, light text
   --ink:       #0A0A08   background
   --magenta:   #BE3455   accent
   --teal:      #007A78   accent
   --charcoal:  #2E2E2E   borders, dividers
   ============================================================ */


/* ── CSS Variables ────────────────────────────────────────── */
:root {
    --honey:    #FABE5C;
    --cream:    #F5F5DC;
    --ink:      #0A0A08;
    --magenta:  #BE3455;
    --teal:     #007A78;
    --charcoal: #2E2E2E;
}


/* ── Form Inputs ──────────────────────────────────────────── */
.form-input {
    background:  rgba(255, 255, 255, 0.05);
    border:      1px solid rgba(255, 255, 255, 0.15);
    color:       var(--cream);
    padding:     12px 16px;
    font-size:   14px;
    width:       100%;
    transition:  border-color 0.2s ease, box-shadow 0.2s ease;
    outline:     none;
}

.form-input:focus {
    border-color: var(--honey);
    box-shadow:   0 0 0 1px var(--honey);
}

.form-input.border-red-500 {
    border-color: #EF4444;
}

.form-input::placeholder {
    color: #4B5563;
}


/* ── Pill Options (radio buttons) ─────────────────────────── */
.pill,
.pill-option {
    cursor: pointer;
    transition: all 0.15s ease;
}

.pill span,
.pill-option span:not(.radio-dot):not(.radio-circle):not(.status-icon):not(.status-text) {
    transition: all 0.15s ease;
}

.pill input:checked + span,
.pill-option input:checked + span {
    border-color:     var(--honey);
    color:            var(--honey);
    background-color: rgba(250, 190, 92, 0.08);
}

.pill:hover span,
.pill-option:hover span:not(.radio-dot):not(.radio-circle) {
    border-color: rgba(250, 190, 92, 0.5);
    color:        rgba(250, 190, 92, 0.7);
}


/* ── Radio Dot / Circle ───────────────────────────────────── */
.radio-dot,
.radio-circle {
    width:         14px;
    height:        14px;
    border-radius: 50%;
    border:        1.5px solid #6B7280;
    flex-shrink:   0;
    transition:    all 0.15s ease;
}

.pill-option input:checked ~ .radio-dot,
.pill input:checked ~ .radio-circle {
    border-color:     var(--honey);
    background-color: var(--honey);
    box-shadow:       0 0 0 3px rgba(250, 190, 92, 0.15);
}


/* ── Error Messages ───────────────────────────────────────── */
.error-msg {
    color:     #F87171;
    font-size: 12px;
    margin-top: 4px;
    display:   block;
}


/* ── Email Status Messages ────────────────────────────────── */
.email-status {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    padding:     10px 14px;
    font-size:   13px;
    margin-top:  6px;
    line-height: 1.5;
    transition:  all 0.3s ease;
}

.email-status.checking {
    color:   #9CA3AF;
    padding: 6px 0;
    border:  none;
}

.email-status.welcome {
    background: rgba(0, 170, 68, 0.08);
    border:     1px solid #00AA44;
    color:      #66DD88;
}

.email-status.warning {
    background: rgba(250, 190, 92, 0.06);
    border:     1px solid var(--honey);
    color:      var(--honey);
}

.email-status.info {
    background: rgba(68, 153, 204, 0.08);
    border:     1px solid #4499CC;
    color:      #88CCEE;
}

.status-icon {
    flex-shrink: 0;
    font-size:   14px;
    margin-top:  1px;
}

.status-text {
    flex: 1;
}

/* Spinner animation for checking state */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.email-status.checking .status-icon {
    display:   inline-block;
    animation: spin 1s linear infinite;
}


/* ── Submit Button Pulse ──────────────────────────────────── */
@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(250, 190, 92, 0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(250, 190, 92, 0); }
}

.btn-pulse {
    animation: pulse-gold 2s ease-in-out infinite;
}


/* ── Reveal Animation ─────────────────────────────────────── */
.reveal {
    opacity:   0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
    opacity:   1;
    transform: translateY(0);
}


/* ── Form Error Banner ────────────────────────────────────── */
.form-error-banner {
    background:  rgba(61, 0, 0, 0.8);
    border:      1px solid #FF4444;
    color:       #FF9999;
    padding:     12px 16px;
    font-size:   13px;
    margin-bottom: 12px;
    text-align:  center;
    line-height: 1.5;
}


/* ── Submit Disabled State ────────────────────────────────── */
button:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}