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

body.start-page { background: #F0F4F8; }

/* HERO STRIP */
.start-hero {
    position: relative;
    background: linear-gradient(135deg, #0f2443 0%, #1A3A5C 55%, #1e4d8c 100%);
    background-size: 300% 300%;
    animation: gradientShift 10s ease infinite;
    overflow: hidden;
    padding: 2.5rem 0 3rem;
    color: white;
}
@keyframes gradientShift {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.start-hero-blob {
    position: absolute; border-radius: 50%;
    filter: blur(60px); opacity: 0.18;
    animation: floatBlob 9s ease-in-out infinite;
}
.start-hero-blob.b1 { width:300px; height:300px; background:#5DCAA5; top:-80px; right:8%; }
.start-hero-blob.b2 { width:220px; height:220px; background:#7F77DD; bottom:-60px; left:5%; animation-delay:4s; }
@keyframes floatBlob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }

.start-hero-inner { position: relative; z-index: 1; text-align: center; }

/* Step indicator */
.start-steps {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px; padding: 0.4rem 1.25rem;
    font-size: 0.8rem; margin-bottom: 1.25rem;
}
.sstep { display: flex; align-items: center; gap: 0.35rem; opacity: 0.5; }
.sstep.active { opacity: 1; font-weight: 600; }
.sstep span {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
}
.sstep.active span { background: #5DCAA5; }
.sstep-arrow { opacity: 0.3; font-size: 0.75rem; }

.start-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.6rem; line-height: 1.25; }
.start-hero p  { font-size: 0.95rem; opacity: 0.8; max-width: 520px; margin: 0 auto; }

/* TWO-COLUMN LAYOUT */
.start-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.75rem;
    padding-top: 2rem;
    padding-bottom: 4rem;
    align-items: start;
}
@media (max-width: 900px) {
    .start-layout { grid-template-columns: 1fr; }
    .start-sidebar { display: none; }
}

/* FORM CARD */
.start-form-card {
    background: white;
    border-radius: 18px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
    overflow: hidden;
}

.form-section {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}
.form-section:last-child { border-bottom: none; }
.form-section:focus-within { background: #fafeff; }

.form-section-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 600; font-size: 0.95rem; color: #1e293b;
    margin-bottom: 1rem;
}
.section-num {
    font-size: 0.7rem; font-weight: 800; color: #5DCAA5;
    background: #E1F5EE; padding: 0.15rem 0.4rem;
    border-radius: 4px; letter-spacing: 0.05em;
}
.field-status { font-size: 0.8rem; font-weight: 500; margin-left: auto; }
.field-status.ok { color: #059669; }
.field-status.pending { color: #D97706; }

/* AGE BUTTONS V2 */
.age-buttons-v2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}
@media (max-width: 600px) { .age-buttons-v2 { grid-template-columns: repeat(3, 1fr); } }

.age-btn-v2 {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0.75rem 0.4rem; border-radius: 12px;
    border: 2px solid #e2e8f0; background: #f8fafc;
    cursor: pointer; transition: all 0.18s; gap: 0.2rem;
}
.age-btn-v2:hover { border-color: #5DCAA5; background: #E1F5EE; transform: translateY(-2px); }
.age-btn-v2.active { border-color: #5DCAA5; background: #E1F5EE; box-shadow: 0 0 0 3px rgba(93,202,165,0.2); }
.age-icon { font-size: 1.4rem; line-height: 1; }
.age-btn-v2 strong { font-size: 0.85rem; color: #0f172a; }
.age-btn-v2 small  { font-size: 0.68rem; color: #94a3b8; }
.age-btn-v2.active strong { color: #0F6E56; }

/* LANGUAGE — compact, secondary control just above the submit CTA */
.lang-compact {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
    padding: 0.75rem 2rem 0;
    scroll-margin-top: 90px;
}
.lang-compact-label { font-size: 0.8rem; color: #64748b; font-weight: 500; }
.lang-compact-select {
    padding: 0.35rem 1.75rem 0.35rem 0.7rem;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    background: #f8fafc; color: #334155;
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer; outline: none;
}
.lang-compact-select:focus { border-color: #5DCAA5; }
.lang-compact-hint {
    flex-basis: 100%; font-size: 0.72rem; color: #94a3b8; line-height: 1.4; margin: 0;
}

/* STYLED INPUTS */
.input-styled, .select-styled, .textarea-styled {
    width: 100%;
    padding: 0.7rem 0.875rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.925rem;
    background: #f8fafc;
    color: #0f172a;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    outline: none;
    font-family: inherit;
}
.input-styled:focus, .select-styled:focus, .textarea-styled:focus {
    border-color: #5DCAA5;
    background: white;
    box-shadow: 0 0 0 3px rgba(93,202,165,0.15);
}
.input-hint {
    font-size: 0.74rem;
    color: #94a3b8;
    margin: 0.5rem 0 0;
    line-height: 1.4;
    padding: 0.4rem 0.6rem;
    background: #f8fafc;
    border-radius: 6px;
    border-left: 2px solid #e2e8f0;
}
.textarea-styled { resize: vertical; min-height: 160px; line-height: 1.7; }

/* Hint */
.start-hint {
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 8px; padding: 0.6rem 0.875rem;
    font-size: 0.83rem; color: #78350F; margin-bottom: 0.6rem;
    line-height: 1.5;
}

/* Concerns */
.concerns-section { background: #f8fafc; }
.concerns-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0; }
.concern-chip { cursor: pointer; }
.concern-chip input { display: none; }
.concern-chip span {
    display: block;
    padding: 0.4rem 0.875rem;
    border-radius: 20px;
    border: 2px solid #e2e8f0;
    background: white;
    font-size: 0.8rem;
    color: #475569;
    transition: all 0.15s;
    user-select: none;
}
.concern-chip span:hover { border-color: #5DCAA5; color: #0F6E56; }
.concern-chip input:checked + span {
    background: #E1F5EE; border-color: #5DCAA5; color: #0F6E56; font-weight: 500;
}

/* Submit section */
.submit-section { padding: 1.5rem 2rem 2rem; background: #f8fafc; }

/* Value reminder just above the submit button */
.value-block {
    background: #E1F5EE; border: 1px solid #bbe8d5;
    border-radius: 10px; padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.value-block-title { font-size: 0.82rem; font-weight: 700; color: #0F6E56; margin-bottom: 0.4rem; }
.value-block ul { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.value-block li { font-size: 0.8rem; color: #0f172a; }
.btn-submit-start {
    width: 100%; padding: 1rem 1.5rem;
    border-radius: 12px; border: none;
    background: #cbd5e1; color: white;
    font-size: 1rem; font-weight: 700;
    cursor: not-allowed;
    transition: background 0.3s, transform 0.15s, box-shadow 0.3s;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    letter-spacing: 0.01em;
}
.btn-submit-start.ready {
    background: linear-gradient(135deg, #5DCAA5, #38b28a);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(93,202,165,0.4);
    animation: readyPulse 2s ease-in-out infinite;
}
.btn-submit-start.ready:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(93,202,165,0.5); }
@keyframes readyPulse {
    0%,100% { box-shadow: 0 4px 20px rgba(93,202,165,0.4); }
    50%      { box-shadow: 0 4px 28px rgba(93,202,165,0.65); }
}
.btn-loading-bar { display:inline-block; width:80px; height:4px; background:rgba(255,255,255,0.3); border-radius:2px; overflow:hidden; }
.btn-loading-bar span { display:block; height:100%; width:0; background:white; border-radius:2px; transition:width 0.3s; }

/* SIDEBAR */
.start-sidebar { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 80px; }

.sidebar-card {
    background: white; border-radius: 14px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    border: 1.5px solid #e2e8f0;
}
.sidebar-card h4 { font-size: 0.9rem; color: #0f172a; margin-bottom: 0.75rem; font-weight: 600; }
.sidebar-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.sidebar-card li { font-size: 0.82rem; color: #475569; }

.sidebar-badge {
    display: inline-block; font-size: 0.68rem; font-weight: 700;
    padding: 0.2rem 0.6rem; border-radius: 6px;
    margin-bottom: 0.6rem; letter-spacing: 0.06em;
}
.sidebar-badge.free  { background: #E1F5EE; color: #0F6E56; }
.sidebar-badge.paid  { background: linear-gradient(90deg,#7F77DD22,#5DCAA522); color: #4B3FC7; }

.paid-card { border-color: #c4b5fd; }
.paid-card h4 { color: #4B3FC7; }

/* Sidebar progress */
.sidebar-progress {
    background: white; border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.sp-title { font-size: 0.78rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.sp-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.83rem; color: #475569; padding: 0.3rem 0; }
.sp-icon { font-size: 1rem; width: 20px; text-align: center; transition: all 0.2s; }
.sp-icon.pending { color: #cbd5e1; }
.sp-icon.done    { color: #059669; font-weight: 700; }