/* ==========================================
   ECHO CRAFT PARTICIPATION PROGRAM
   PARTNER APPLICATION PAGE
========================================== */

:root {
    --ec-gold: #d7b16d;
    --ec-gold-bright: #f3d48f;
    --ec-gold-soft: rgba(215, 177, 109, 0.16);

    --ec-black: #070707;
    --ec-charcoal: #11100e;
    --ec-panel: rgba(18, 17, 15, 0.92);
    --ec-panel-soft: rgba(255, 255, 255, 0.035);

    --ec-white: #f7f3ea;
    --ec-muted: #aaa397;
    --ec-border: rgba(215, 177, 109, 0.18);

    --ec-danger: #ff9f9f;
    --ec-success: #9fe0b7;

    --ec-heading:
        "Cormorant Garamond",
        Georgia,
        serif;

    --ec-body:
        "Inter",
        Arial,
        sans-serif;

    --ec-shadow:
        0 30px 90px rgba(0, 0, 0, 0.62);
}


/* ==========================================
   RESET
========================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(215, 177, 109, 0.09),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 76%,
            rgba(91, 65, 32, 0.12),
            transparent 38%
        ),
        #070707;

    color: var(--ec-white);

    font-family: var(--ec-body);

    overflow-x: hidden;
}

button,
input,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}


/* ==========================================
   PAGE EXPERIENCE
========================================== */

.partnerApplicationExperience {
    position: relative;

    min-height: 100vh;

    padding:
        92px
        28px
        70px;

    isolation: isolate;
}

.applicationAtmosphere {
    position: fixed;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}

.applicationGlow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: 0.24;
}

.applicationGlowOne {
    top: -160px;
    left: -150px;

    background: rgba(215, 177, 109, 0.38);
}

.applicationGlowTwo {
    right: -180px;
    bottom: -190px;

    background: rgba(117, 75, 28, 0.35);
}

.applicationGrid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.8),
            transparent 92%
        );
}


/* ==========================================
   RETURN LINK
========================================== */

.returnToPartnerProgram {
    position: absolute;

    top: 28px;
    left: 32px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--ec-muted);

    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

.returnToPartnerProgram:hover {
    color: var(--ec-gold-bright);

    transform: translateX(-3px);
}


/* ==========================================
   MAIN SHELL
========================================== */

.applicationShell {
    width: min(1480px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(330px, 0.78fr)
        minmax(0, 1.22fr);

    border: 1px solid var(--ec-border);

    border-radius: 28px;

    background: rgba(10, 10, 9, 0.8);

    box-shadow: var(--ec-shadow);

    overflow: hidden;

    backdrop-filter: blur(20px);
}


/* ==========================================
   INTRODUCTION PANEL
========================================== */

.applicationIntroduction {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 920px;

    padding:
        54px
        48px
        42px;

    background:
        linear-gradient(
            180deg,
            rgba(25, 20, 14, 0.9),
            rgba(7, 7, 7, 0.96)
        ),
        url("../../images/backgrounds/sidebar-texture.png");

    background-size: cover;
    background-position: center;

    border-right: 1px solid var(--ec-border);
}

.applicationIntroduction::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025),
            transparent 45%
        );

    pointer-events: none;
}

.applicationIntroduction > * {
    position: relative;

    z-index: 1;
}

.applicationBrand {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 72px;
}

.applicationBrand img {
    width: 58px;
    height: 58px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 20px rgba(0, 0, 0, 0.45)
        );
}

.applicationBrand div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.applicationBrand strong {
    color: var(--ec-white);

    font-family: var(--ec-heading);
    font-size: 1.65rem;
    line-height: 1;
}

.applicationBrand span {
    color: var(--ec-gold);

    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.applicationEyebrow {
    margin: 0 0 16px;

    color: var(--ec-gold);

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.applicationIntroduction h1 {
    margin: 0;

    font-family: var(--ec-heading);
    font-size: clamp(3.2rem, 6vw, 5.6rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.applicationIntroduction h1 span {
    display: block;

    color: var(--ec-gold-bright);

    font-style: italic;
}

.applicationLead {
    max-width: 500px;

    margin:
        30px
        0
        42px;

    color: #c2bbb0;

    font-size: 0.96rem;
    line-height: 1.8;
}

.applicationBenefits {
    display: grid;
    gap: 16px;
}

.applicationBenefits article {
    display: grid;

    grid-template-columns: 44px 1fr;

    gap: 15px;

    padding: 17px;

    border: 1px solid rgba(215, 177, 109, 0.12);

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.025);
}

.applicationBenefits article > i {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    border-radius: 13px;

    background: var(--ec-gold-soft);

    color: var(--ec-gold-bright);
}

.applicationBenefits div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.applicationBenefits strong {
    font-size: 0.86rem;
    font-weight: 600;
}

.applicationBenefits span {
    color: var(--ec-muted);

    font-size: 0.76rem;
    line-height: 1.55;
}

.applicationIntroductionFooter {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 54px;

    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    color: var(--ec-muted);
}

.applicationIntroductionFooter i {
    margin-top: 3px;

    color: var(--ec-gold);
}

.applicationIntroductionFooter p {
    margin: 0;

    font-size: 0.72rem;
    line-height: 1.6;
}


/* ==========================================
   FORM PANEL
========================================== */

.applicationFormPanel {
    padding:
        56px
        54px
        48px;

    background:
        linear-gradient(
            180deg,
            rgba(18, 17, 15, 0.96),
            rgba(10, 10, 9, 0.98)
        );
}

.applicationFormHeader {
    max-width: 760px;

    margin-bottom: 34px;
}

.applicationFormIcon {
    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    margin-bottom: 20px;

    border: 1px solid rgba(215, 177, 109, 0.22);

    border-radius: 15px;

    background: var(--ec-gold-soft);

    color: var(--ec-gold-bright);

    font-size: 1.1rem;
}

.applicationFormLabel {
    margin: 0 0 8px;

    color: var(--ec-gold);

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.applicationFormHeader h2 {
    margin: 0;

    font-family: var(--ec-heading);
    font-size: clamp(2.3rem, 4vw, 3.7rem);
    font-weight: 600;
    line-height: 1;
}

.applicationFormHeader > p:last-child {
    max-width: 690px;

    margin: 16px 0 0;

    color: var(--ec-muted);

    font-size: 0.88rem;
    line-height: 1.7;
}


/* ==========================================
   ALERT
========================================== */

.applicationAlert {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 26px;

    padding:
        15px
        17px;

    border: 1px solid rgba(255, 159, 159, 0.24);

    border-radius: 14px;

    background: rgba(255, 159, 159, 0.07);

    color: var(--ec-danger);

    font-size: 0.8rem;
    line-height: 1.55;
}

.applicationAlert[hidden] {
    display: none;
}

.applicationAlert.isSuccess {
    border-color: rgba(159, 224, 183, 0.26);

    background: rgba(159, 224, 183, 0.075);

    color: var(--ec-success);
}


/* ==========================================
   FORM LAYOUT
========================================== */

.partnerApplicationForm {
    display: grid;
    gap: 24px;
}

.applicationFormGrid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px
        20px;
}

.applicationField {
    display: flex;
    flex-direction: column;
}

.applicationField label {
    margin-bottom: 9px;

    color: #ded8cd;

    font-size: 0.74rem;
    font-weight: 600;
}

.applicationField label span {
    color: var(--ec-gold);
}

.applicationInputShell {
    position: relative;

    display: flex;
    align-items: center;
}

.applicationInputShell > i {
    position: absolute;

    left: 16px;

    color: #817a70;

    font-size: 0.78rem;

    pointer-events: none;
}

.applicationInputShell input,
.applicationTextareaShell textarea {
    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 14px;

    outline: none;

    background: rgba(255, 255, 255, 0.035);

    color: var(--ec-white);

    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.applicationInputShell input {
    height: 52px;

    padding:
        0
        16px
        0
        45px;
}

.applicationTextareaShell textarea {
    min-height: 132px;

    padding: 16px;

    line-height: 1.65;

    resize: vertical;
}

.applicationInputShell input::placeholder,
.applicationTextareaShell textarea::placeholder {
    color: #6f6a62;
}

.applicationInputShell input:focus,
.applicationTextareaShell textarea:focus {
    border-color: rgba(215, 177, 109, 0.58);

    background: rgba(255, 255, 255, 0.05);

    box-shadow:
        0 0 0 4px rgba(215, 177, 109, 0.08);
}

.applicationFieldError {
    min-height: 18px;

    margin-top: 6px;

    color: var(--ec-danger);

    font-size: 0.67rem;
    line-height: 1.4;
}

.applicationFieldFull {
    grid-column: 1 / -1;
}


/* ==========================================
   AGREEMENT
========================================== */

.applicationAgreement {
    display: grid;

    grid-template-columns: 22px 1fr;

    gap: 12px;

    align-items: flex-start;

    color: var(--ec-muted);

    cursor: pointer;

    font-size: 0.74rem;
    line-height: 1.65;
}

.applicationAgreement input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.applicationCheckbox {
    display: grid;
    place-items: center;

    width: 22px;
    height: 22px;

    margin-top: 1px;

    border: 1px solid rgba(215, 177, 109, 0.35);

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.035);

    color: transparent;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.applicationAgreement input:checked +
.applicationCheckbox {
    border-color: var(--ec-gold);

    background: var(--ec-gold);

    color: #111;
}

.applicationAgreement input:focus-visible +
.applicationCheckbox {
    outline:
        3px solid
        rgba(215, 177, 109, 0.18);

    outline-offset: 2px;
}

.applicationAgreementError {
    margin-top: -18px;
}


/* ==========================================
   SUBMIT BUTTON
========================================== */

.applicationSubmitButton {
    position: relative;

    width: 100%;
    min-height: 56px;

    border: 0;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #f0cf88,
            #c99e52
        );

    color: #111;

    cursor: pointer;

    font-size: 0.79rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.28);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}

.applicationSubmitButton:hover {
    transform: translateY(-2px);

    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.38);

    filter: brightness(1.05);
}

.applicationSubmitButton:disabled {
    cursor: not-allowed;

    opacity: 0.64;

    transform: none;
}

.applicationButtonDefault,
.applicationButtonLoading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.applicationButtonLoading {
    display: none;
}

.applicationSubmitButton.isLoading
.applicationButtonDefault {
    display: none;
}

.applicationSubmitButton.isLoading
.applicationButtonLoading {
    display: inline-flex;
}


/* ==========================================
   PRIVACY NOTICE
========================================== */

.applicationPrivacyNotice {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 24px;

    color: #827c73;
}

.applicationPrivacyNotice i {
    margin-top: 3px;

    color: var(--ec-gold);
}

.applicationPrivacyNotice p {
    margin: 0;

    font-size: 0.68rem;
    line-height: 1.6;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1080px) {

    .applicationShell {
        grid-template-columns: 1fr;
    }

    .applicationIntroduction {
        min-height: auto;

        border-right: 0;
        border-bottom: 1px solid var(--ec-border);
    }

    .applicationIntroduction h1 {
        max-width: 680px;
    }

    .applicationBenefits {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 760px) {

    .partnerApplicationExperience {
        padding:
            82px
            14px
            34px;
    }

    .returnToPartnerProgram {
        top: 24px;
        left: 18px;
    }

    .applicationShell {
        border-radius: 20px;
    }

    .applicationIntroduction,
    .applicationFormPanel {
        padding:
            36px
            24px;
    }

    .applicationBrand {
        margin-bottom: 46px;
    }

    .applicationBenefits {
        grid-template-columns: 1fr;
    }

    .applicationFormGrid {
        grid-template-columns: 1fr;
    }

    .applicationFieldFull {
        grid-column: auto;
    }

}

@media (max-width: 480px) {

    .returnToPartnerProgram span {
        display: none;
    }

    .applicationIntroduction,
    .applicationFormPanel {
        padding:
            30px
            18px;
    }

    .applicationBrand img {
        width: 48px;
        height: 48px;
    }

    .applicationIntroduction h1 {
        font-size: 3rem;
    }

    .applicationFormHeader h2 {
        font-size: 2.25rem;
    }

}

/* ==========================================
   COMPACT DESKTOP APPLICATION LAYOUT
========================================== */

@media (min-width: 901px) {

    .partnerApplicationExperience {
        padding-block: 28px;
    }

    .applicationShell {
        min-height: auto;
    }

    .applicationIntroduction,
    .applicationFormPanel {
        padding: 42px;
    }

    .applicationBrand {
        margin-bottom: 40px;
    }

    .applicationLead {
        margin: 18px 0 28px;
    }

    .applicationBenefits {
        gap: 12px;
    }

    .applicationBenefits article {
        padding: 14px;
    }

    .applicationFormHeader {
        margin-bottom: 22px;
    }

    .partnerApplicationForm {
        gap: 18px;
    }

    .applicationFormGrid {
        gap: 16px;
    }

    .applicationField {
        gap: 7px;
    }

    .applicationInputShell {
        min-height: 50px;
    }

    .applicationTextareaShell textarea {
        min-height: 120px;
        padding: 14px 16px;
    }

    #applicantPartnershipReason,
    #applicantReferralStrategy {
        min-height: 135px;
    }

    .applicationAgreement {
        margin-top: 2px;
    }

    .cf-turnstile {
        margin-top: 2px;
    }

    .applicationSubmitButton {
        min-height: 54px;
    }

    .applicationPrivacyNotice {
        margin-top: 18px;
    }

}