/* public create gift exchange landing page (google ads). page-owned .ge-lp-* classes; this file only loads
   on this page. see specs/gift_exchange/createGiftExchange_landing.md */

/* header, ad mode and the guest preview only (.ge-lp-ad-header): the top menu is hidden (no_links), so always show
   the full logo (icon + wordmark) instead of the icon-only version the shared header switches to below 1000px /
   450px. site mode keeps the standard header, same as the rest of the site */
.ge-lp-ad-header #menu_header .header-wrapper .left-logo-icon,
.ge-lp-ad-header #menu_header .header-wrapper .left-logo-icon-wide {
    flex-basis: auto;
    max-width: none;
}
.ge-lp-ad-header #logo_wrap {
    width: auto;
}
.ge-lp-ad-header .left-logo-icon .logo_hide_small,
.ge-lp-ad-header .left-logo-icon-wide .logo_hide_small {
    display: block !important;
    height: 30px;
    width: auto;
}
.ge-lp-ad-header .left-logo-icon .logo_show_small,
.ge-lp-ad-header .left-logo-icon-wide .logo_show_small {
    display: none !important;
}
/* the shared header reserves 112px (118px below 600px, for the two-row mobile menu) under the fixed 60px
   menu bar; this page has only the logo row. the hero band starts right under the bar */
#main-header.ge-lp-ad-header {
    padding-top: 60px !important;
}
/* site mode: the standard 112px / 118px header space stays, but the hero band is pulled up under the 60px bar
   and the title padded back down, so the title sits where other pages put theirs (e.g. howItWorks) */
.ge-lp-site > .ge-lp-hero:first-child {
    margin-top: -52px;
}
.ge-lp-site > .ge-lp-hero:first-child .ge-lp-hero-inner {
    padding-top: 52px;
}
@media (max-width: 600px) {
    .ge-lp-site > .ge-lp-hero:first-child {
        margin-top: -58px;
    }
    .ge-lp-site > .ge-lp-hero:first-child .ge-lp-hero-inner {
        padding-top: 58px;
    }
}

.ge-lp {
    color: #0b1b3a;
}

/* hero - full-width art (background-image set inline in the view so it goes through assetCDN). the gifts
   are on the right of the image and the left is light sky/snow, so the text column stays on the left half */
.ge-lp-hero {
    background-color: #e6f1fc;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
}
.ge-lp-hero-inner {
    position: relative;
    z-index: 1;
}
/* bottom of the band fades to white, into the white gap above the cards (per mockup) */
.ge-lp-hero::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    bottom: 0;
    content: "";
    height: 35%;
    left: 0;
    position: absolute;
    right: 0;
}
/* narrower than 1200px the cover crop slides the gifts under the text column - fade the left side */
@media (max-width: 1199.98px) {
    .ge-lp-hero::before {
        background: linear-gradient(90deg, rgba(234, 243, 252, 0.95) 0%, rgba(234, 243, 252, 0.85) 50%, rgba(234, 243, 252, 0) 75%);
        content: "";
        inset: 0;
        position: absolute;
    }
}
.ge-lp-hero-inner {
    align-items: center;
    display: flex;
    min-height: 300px;
    padding-bottom: 24px;
    padding-top: 28px;
}
.ge-lp-hero-text {
    max-width: 58%;
    min-width: 0;
}
.ge-lp-title {
    color: #0b1b3a;
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 0 0 12px;
}
.ge-lp-sub {
    color: #1f2a44;
    font-size: 1.2rem;
    line-height: 1.45;
    margin: 0 0 14px;
    max-width: 640px;
}
.ge-lp-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ge-lp-checks li {
    align-items: center;
    color: #1f2a44;
    display: flex;
    font-size: 1.05rem;
    gap: 10px;
    padding: 0 18px;
}
.ge-lp-checks li:first-child {
    padding-left: 0;
}
.ge-lp-checks li + li {
    border-left: 1px solid #d3dbe8;
}
.ge-lp-checks .fa {
    align-items: center;
    background: #22a45d;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    height: 24px;
    justify-content: center;
    width: 24px;
}

/* form card + how it works */
/* white space between the hero band and the cards, so the rounded corners don't sit on the band's edge */
.ge-lp-body {
    align-items: flex-start;
    margin-top: 24px;
    padding-bottom: 48px;
    row-gap: 24px;
}
.ge-lp-card {
    background: linear-gradient(180deg, #edf4fc 0%, #f5f9fe 100%);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(11, 27, 58, 0.06);
    padding: 28px 64px 32px;
}
.ge-lp-form .form-group {
    margin-bottom: 20px;
}
.ge-lp-label {
    color: #0b1b3a;
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.ge-lp-input.form-control {
    background: #ffffff;
    border: 1px solid #cfd8e6;
    border-radius: 12px;
    font-size: 1.15rem;
    height: 58px;
    padding: 0 20px;
}
.ge-lp-btn {
    background: #0b62b0;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 18px 24px;
    width: 100%;
}
.ge-lp-btn:hover,
.ge-lp-btn:focus {
    background: #09528f;
}
.ge-lp-btn .fa {
    margin-left: 8px;
}
.ge-lp-fineprint {
    color: #4a5568;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 18px;
    text-align: center;
}
.ge-lp-fineprint strong {
    color: #0b1b3a;
}
.ge-lp-panel {
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 20px;
    padding: 28px 36px 24px;
}
.ge-lp-panel-title {
    color: #0b1b3a;
    font-size: 1.9rem;
    font-weight: 800;
    margin: 0 0 18px;
}
.ge-lp-step {
    align-items: center;
    display: flex;
    gap: 18px;
    margin-bottom: 20px;
}
.ge-lp-step-num {
    align-items: center;
    background: #e6f0fb;
    border-radius: 50%;
    color: #0b62b0;
    display: flex;
    flex: 0 0 44px;
    font-size: 1.15rem;
    font-weight: 700;
    height: 44px;
    justify-content: center;
}
.ge-lp-step-icon {
    flex: 0 0 96px;
    text-align: center;
}
.ge-lp-step-icon img {
    height: auto;
    max-height: 72px;
    max-width: 96px;
    width: auto;
}
.ge-lp-step-title {
    color: #0b1b3a;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.ge-lp-step-desc {
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.5;
}
.ge-lp-secure {
    align-items: flex-start;
    border-top: 1px solid #e3e8f0;
    display: flex;
    gap: 16px;
    margin-top: 8px;
    padding-top: 20px;
}
.ge-lp-secure .fa {
    color: #0b62b0;
    font-size: 30px;
    line-height: 1;
}
.ge-lp-secure-title {
    color: #0b1b3a;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.ge-lp-secure-text {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* keep the Create button above the fold - see the spec for the sizes checked */
@media (max-width: 1199.98px) {
    .ge-lp-card {
        padding: 28px 40px 28px;
    }
}
@media (max-width: 991.98px) {
    .ge-lp-hero-inner {
        min-height: 260px;
        padding-bottom: 20px;
        padding-top: 24px;
    }
    .ge-lp-hero-text {
        max-width: 62%;
    }
    .ge-lp-sub {
        font-size: 1.15rem;
    }
}
@media (max-width: 767.98px) {
    /* phones: the gifts would sit behind the centered text and push the form down, so drop the art for
       the plain sky color */
    .ge-lp-hero {
        background-image: none !important;
        background-color: #eaf3fc;
    }
    .ge-lp-hero-inner {
        display: block;
        min-height: 0;
        padding-bottom: 16px;
        padding-top: 18px;
        text-align: center;
    }
    .ge-lp-hero-text {
        max-width: none;
    }
    .ge-lp-title {
        font-size: 1.85rem;
        margin-bottom: 10px;
    }
    .ge-lp-body {
        margin-top: 16px;
    }
    .ge-lp-sub {
        font-size: 1rem;
        margin: 0 auto 10px;
    }
    .ge-lp-checks {
        justify-content: center;
    }
    .ge-lp-checks li {
        font-size: 0.85rem;
        gap: 6px;
        padding: 0 8px;
    }
    .ge-lp-checks .fa {
        font-size: 10px;
        height: 18px;
        width: 18px;
    }
    .ge-lp-card {
        padding: 20px 20px 18px;
    }
    .ge-lp-form .form-group {
        margin-bottom: 14px;
    }
    .ge-lp-label {
        font-size: 1rem;
        margin-bottom: 6px;
    }
    .ge-lp-input.form-control {
        height: 50px;
    }
    .ge-lp-btn {
        font-size: 1.15rem;
        padding: 14px 20px;
    }
    .ge-lp-fineprint {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-top: 12px;
    }
    .ge-lp-panel {
        padding: 20px 20px 16px;
    }
    .ge-lp-panel-title {
        font-size: 1.4rem;
    }
    .ge-lp-step {
        gap: 12px;
    }
    .ge-lp-step-num {
        flex-basis: 34px;
        font-size: 1rem;
        height: 34px;
    }
    .ge-lp-step-icon {
        flex-basis: 64px;
    }
    .ge-lp-step-icon img {
        max-height: 52px;
        max-width: 64px;
    }
}
@media (max-width: 576px) {
    /* checks drop their dividers when they wrap */
    .ge-lp-checks li + li {
        border-left: 0;
    }
}

/* logged-out preview of a new exchange (createGiftExchangePreview.blade.php). page-owned .ge-pv-* classes on top
   of the Steps/topbar classes in gift_exchange.css. see specs/gift_exchange/createGiftExchange_guest_preview.md */
.ge-pv {
    padding: 24px 0 48px;
}
/* Back link - in the fixed 60px header bar (z-index 1000), right side, so it doesn't take a row above the page.
   full-width layer that ignores clicks; the inner .row1270 box matches the header's logo row */
.ge-pv-back {
    height: 60px;
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1001;
}
.ge-pv-back-inner {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: flex-end;
}
.ge-pv-back a {
    color: #0b62b0;
    font-weight: 500;
    pointer-events: auto;
}
.ge-pv-notifications:empty {
    display: none;
}

/* topbar: info left, account CTA right */
.ge-pv-topbar {
    align-items: stretch;
}
.ge-pv-topbar .gift-exchange-dashboard-topbar-icon {
    align-self: flex-start;
}
/* top-aligned with the icon, so the name lines up with the image's top edge (per mockup) */
.ge-pv-topbar .gift-exchange-dashboard-topbar-info {
    align-self: flex-start;
    padding-top: 12px;
}
.ge-pv-byline {
    align-items: center;
    color: #374151;
    display: flex;
    font-size: 1rem;
    gap: 10px;
}
.ge-pv-byline-icon {
    color: #e5484d;
    display: inline-flex;
}
.ge-pv-cta {
    background: #edf4fc;
    border-radius: 12px;
    flex: 0 0 420px;
    padding: 18px 24px 14px;
}
.ge-pv-cta-head {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}
.ge-pv-cta-lock {
    color: #0b62b0;
    font-size: 30px;
    line-height: 1;
}
.ge-pv-cta-title {
    color: #0b62b0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
}
.ge-pv-cta-text {
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.45;
}
.ge-pv-cta-signin {
    color: #4b5563;
    font-size: 0.9rem;
    margin-top: 10px;
    text-align: center;
}
.ge-pv-cta-signin a {
    text-decoration: underline;
}
/* topbar status - the exchange isn't active until the guest signs up */
.ge-pv-chip-inactive {
    background: #fcebc0;
    border-radius: 999px;
    color: #4a3b10;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 12px;
}
.ge-pv-chip-inactive .fa {
    color: #8a6d1d;
}

/* shared pill button */
.ge-pv-btn {
    background: #0b62b0;
    border-radius: 999px;
    color: #ffffff !important;
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
.ge-pv-btn:hover,
.ge-pv-btn:focus {
    background: #09528f;
}
.ge-pv-btn--inline {
    flex: 0 0 auto;
}

/* step cards: no "current step" highlight, number in a light blue circle */
.ge-pv-card {
    align-items: stretch;
}
.ge-pv-num {
    background: #e6f0fb;
    color: #0b1b3a;
}
.ge-pv-preview-pill {
    display: inline-block;
    margin-bottom: 8px;
}
.ge-pv-invite {
    cursor: default;
}
.ge-pv-invite:hover {
    border-color: #d1d9e6;
}

/* step 1 right column - locked participant management */
.ge-pv-lockbox {
    align-self: flex-start;
    background: #edf4fc;
    border-radius: 12px;
    flex: 0 0 310px;
    padding: 20px 18px;
}
/* "Activate My Exchange — Free" is wider than "Create free account" - needs ~265px; 310px box leaves 274px */
.ge-pv-lockbox .ge-pv-btn {
    padding-left: 12px;
    padding-right: 12px;
}
.ge-pv-lockbox-head {
    align-items: center;
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}
.ge-pv-lockbox-lock {
    color: #0b62b0;
    font-size: 28px;
    line-height: 1;
}
.ge-pv-lockbox-title {
    color: #0b1b3a;
    font-size: 0.9rem;
    font-weight: 700;
}
.ge-pv-lockbox-sub {
    color: #4b5563;
    font-size: 0.9rem;
}
.ge-pv-lockbox-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0 0 0 12px;
}
.ge-pv-lockbox-list li {
    align-items: center;
    color: #4b5563;
    display: flex;
    font-size: 0.9rem;
    gap: 14px;
    margin-bottom: 12px;
}
.ge-pv-lockbox-list .fa {
    align-items: center;
    background: #22a45d;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    height: 22px;
    justify-content: center;
    width: 22px;
}

/* steps 2 and 3 - grey locked row */
.ge-pv-locked {
    align-items: center;
    background: #f3f5f9;
    border-radius: 10px;
    display: flex;
    gap: 20px;
    padding: 16px 18px;
}
.ge-pv-locked-icon {
    align-items: center;
    background: #dfe3ea;
    border-radius: 50%;
    color: #4b5563;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.3rem;
    height: 52px;
    justify-content: center;
    width: 52px;
}
.ge-pv-locked-text {
    flex: 1 1 auto;
    min-width: 0;
}
.ge-pv-locked-title {
    color: #0b1b3a;
    font-size: 1.05rem;
    font-weight: 700;
}
.ge-pv-locked-detail {
    color: #4b5563;
    font-size: 0.9rem;
    margin-top: 2px;
}

/* tablet: CTA drops under the exchange info */
@media (max-width: 991.98px) {
    .ge-pv-topbar {
        flex-wrap: wrap;
    }
    .ge-pv-cta {
        flex: 1 1 100%;
    }
    /* step 1 lock box drops under the invite message, lined up with the body (44px number + 20px gap) */
    .ge-pv-card {
        flex-wrap: wrap;
    }
    /* zero basis keeps the body on the number's row instead of wrapping under it */
    .ge-pv-card .gift-exchange-steps-body {
        flex: 1 1 0;
    }
    .ge-pv-lockbox {
        flex: 1 1 100%;
        margin-left: 64px;
    }
    /* steps 2 and 3: the button drops under the text, full width (beside it, the text squeezed to ~157px) */
    .ge-pv-locked {
        flex-wrap: wrap;
    }
    .ge-pv-locked-text {
        flex: 1 1 0;
    }
    .ge-pv-btn--inline {
        flex: 1 1 100%;
    }
}
@media (max-width: 767.98px) {
    /* phones: buttons read just "Activate My Exchange" */
    .ge-pv-btn-free {
        display: none;
    }
    .ge-pv-lockbox {
        align-self: stretch;
        flex: 0 0 auto;
        margin-left: 0;
    }
}
/* very narrow phones (320px): steps 2/3 buttons needed ~208px but got 192px. slightly smaller text, tighter button
   and grey-row sides - still one line, with room to spare */
@media (max-width: 400px) {
    .ge-pv-btn {
        font-size: 1rem;
        padding-left: 12px;
        padding-right: 12px;
    }
    .ge-pv-locked {
        padding-left: 12px;
        padding-right: 12px;
    }
}
@media (max-width: 576px) {
    .ge-pv-topbar .gift-exchange-dashboard-topbar-icon {
        align-self: center;
    }
    .ge-pv-byline,
    .ge-pv-topbar .gift-exchange-dashboard-topbar-chips {
        justify-content: center;
    }
    .ge-pv-cta {
        padding: 16px;
        text-align: left;
    }
}