/* =============================================================================
 * Booster · Contact (contact.html)
 *
 * O pagină aerisită, din piesele site-ului:
 *   - antetul centrat, ca pe celelalte pagini, cu stickerele albe din hero;
 *   - cele trei canale: WhatsApp pe cardul portocaliu (.card-orange), cu
 *     memoji-ul care face cu mâna, telefonul și emailul pe crem;
 *   - formularul pe un card alb, cu opțiunile din planificator (.chip) și
 *     pașii alături, cu eticheta scrisă de mână de la proces;
 *   - întrebările din FAQ-ul paginii principale.
 * Textele sunt cele din pagina „Contact" a clientului.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Antetul
 * -------------------------------------------------------------------------- */

.contact-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(7rem, 4rem + 6.5vw, 11.4375rem);
    text-align: center;
}

.contact-hero .eyebrow {
    margin-bottom: 12px;
}

.contact-hero__title {
    max-width: 58rem;
    font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
    font-weight: 500;
    line-height: 1.1875;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.contact-hero__title em {
    font-style: normal;
    color: var(--brand-orange);
}

.contact-hero__lead {
    max-width: 38rem;
    margin-top: 24px;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.5;
    color: var(--ink-lead);
    text-wrap: pretty;
}

.contact-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
}

/* Stickerele (poziția e centrul lor, ca în hero) apar doar pe ecranele late,
   unde au loc lângă titlu. */
.contact-hero__sticker {
    display: none;
}

.contact-hero__sticker--1 {
    --tilt: -8deg;
    top: 60%;
    left: 9%;
}

.contact-hero__sticker--2 {
    --tilt: 7deg;
    top: 44%;
    left: 90%;
}

.contact-hero__sticker--3 {
    --tilt: -5deg;
    top: 88%;
    left: 84%;
}

/* -----------------------------------------------------------------------------
 * Canalele
 * -------------------------------------------------------------------------- */

.contact-channels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: clamp(4rem, 2.5rem + 4vw, 7rem);
}

.channel {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: 340px;
    padding: clamp(28px, 1.25rem + 1.5vw, 40px);
    overflow: hidden;
    border-radius: var(--r-card);
    background-color: var(--surface-page);
    transition: transform var(--duration) var(--ease);
}

.channel:hover {
    transform: translateY(-4px);
}

.channel__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-tile);
    background-color: var(--surface-dark);
    color: #ffffff;
}

.channel__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.channel__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-muted);
}

/* Mărimea în care adresa de email încape pe un rând, la orice lățime */
.channel__title {
    font-size: clamp(1.25rem, 1rem + 0.5vw, 1.625rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
    overflow-wrap: break-word;
}

.channel__text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-lead);
}

.channel__cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--brand-orange);
}

.channel__cta svg {
    transition: transform var(--duration) var(--ease);
}

.channel:hover .channel__cta svg {
    transform: translate(2px, -2px);
}

/* WhatsApp: cardul portocaliu, cu memoji-ul care face cu mâna în colț */
.channel--whatsapp {
    background-color: var(--card-orange);
    color: #ffffff;
}

.channel--whatsapp .channel__icon {
    background-color: #ffffff;
    color: #1fa855;
}

.channel--whatsapp .channel__label {
    color: var(--brand-cream);
}

.channel--whatsapp .channel__title,
.channel--whatsapp .channel__cta {
    color: #ffffff;
}

.channel--whatsapp .channel__text {
    color: rgba(255, 255, 255, 0.88);
}

.channel__memoji {
    position: absolute;
    right: -18px;
    bottom: -24px;
    width: 200px;
    height: auto;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
 * Formularul, cu pașii alături
 * -------------------------------------------------------------------------- */

.contact-form-section {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(40px, 2rem + 4vw, 112px);
    margin-top: clamp(5rem, 3rem + 5vw, 9rem);
    scroll-margin-top: 24px;
}

/* Textul din stânga rămâne pe ecran cât se completează formularul */
.contact-intro {
    position: sticky;
    top: 40px;
}

.contact-intro .eyebrow {
    margin-bottom: 12px;
}

.contact-intro .section-lead {
    margin-top: 8px;
}

/* Pașii, pe o linie punctată, cu eticheta scrisă de mână de la proces */
.contact-steps {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 44px;
    margin-left: 7px;
    padding-left: 30px;
    border-left: 1.5px dashed var(--line-ghost);
}

.contact-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.contact-steps li::before {
    content: '';
    position: absolute;
    top: 6px;
    left: -38.75px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--brand-orange);
    box-shadow: 0 0 0 5px var(--surface-white);
}

.contact-steps__tag {
    font-family: var(--font-hand);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--brand-orange);
}

.contact-steps strong {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
}

/* Cardul alb al formularului */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: clamp(24px, 1rem + 2.5vw, 48px);
    border-radius: var(--r-box);
    background-color: var(--surface-white);
    box-shadow: var(--shadow-card);
}

.contact-form__group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.contact-form__group legend {
    margin-bottom: 12px;
    padding: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 24px;
}

.contact-form__optional {
    font-weight: 400;
    color: var(--ink-muted);
}

.contact-form__options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 24px;
}

/* Câmpuri pline, pe crem, care se aprind portocaliu când scrii în ele */
.contact-field input,
.contact-field textarea {
    width: 100%;
    min-height: 56px;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    background-color: var(--surface-page);
    font: inherit;
    font-weight: 400;
    color: var(--ink);
    transition:
        border-color var(--duration) var(--ease),
        background-color var(--duration) var(--ease),
        box-shadow var(--duration) var(--ease);
}

.contact-field textarea {
    min-height: 132px;
    resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: rgba(32, 32, 32, 0.4);
}

.contact-field input:focus-visible,
.contact-field textarea:focus-visible {
    outline: none;
    border-color: var(--brand-orange);
    background-color: var(--surface-white);
    box-shadow: 0 0 0 4px rgba(255, 127, 2, 0.12);
}

/* Acordul pentru date: bifa portocalie, obligatorie înainte de trimitere */
.contact-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink-muted);
    cursor: pointer;
}

.contact-consent input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border: 1.5px solid rgba(32, 32, 32, 0.25);
    border-radius: 7px;
    background: var(--surface-white) center / 14px no-repeat;
    cursor: pointer;
    appearance: none;
    transition:
        background-color var(--duration) var(--ease),
        border-color var(--duration) var(--ease);
}

.contact-consent input:hover {
    border-color: var(--brand-orange);
}

.contact-consent input:checked {
    border-color: var(--brand-orange);
    background-color: var(--brand-orange);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.contact-consent input:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 2px;
}

.contact-form__send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
}

/* -----------------------------------------------------------------------------
 * Întrebările
 * -------------------------------------------------------------------------- */

.contact-faq {
    margin-top: clamp(5rem, 3rem + 5vw, 9rem);
    margin-bottom: var(--section-gap);
}

.contact-faq__list {
    max-width: 52rem;
    margin: 40px auto 0;
}

/* -----------------------------------------------------------------------------
 * Ecranele late și cele înguste
 * -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
    .contact-hero__sticker {
        display: inline-flex;
    }
}

/* Sub 1280 px, WhatsApp ia tot rândul, iar telefonul și emailul stau
   alături: pe trei coloane adresa de email nu mai încape pe un rând. */
@media (max-width: 1279px) {
    .contact-channels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .channel--whatsapp {
        grid-column: 1 / -1;
        min-height: 300px;
    }

    .channel {
        min-height: 280px;
    }
}

@media (max-width: 1023px) {
    .contact-form-section {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-intro {
        position: static;
    }
}

@media (max-width: 640px) {
    .contact-channels {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .channel {
        min-height: 0;
    }

    .channel--whatsapp {
        min-height: 300px;
    }

    .channel__memoji {
        width: 160px;
    }

    .contact-form {
        border-radius: var(--r-card);
    }

    .contact-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form__send .btn {
        width: 100%;
    }
}