/* ==========================================================================
   GearInStock Tracker — Subscription Form v2
   Clean, editorial card design. Social proof on top. Sticky mini-bar.
   ========================================================================== */

:root {
    --gis-brand:       #0ea5e9;   /* primary */
    --gis-brand-2:     #2563eb;   /* primary dark */
    --gis-accent:      #f97316;   /* CTA orange */
    --gis-accent-2:    #ea580c;
    --gis-text:        #0f172a;
    --gis-text-soft:   #475569;
    --gis-muted:       #94a3b8;
    --gis-bg:          #ffffff;
    --gis-bg-soft:     #f8fafc;
    --gis-border:      #e2e8f0;
    --gis-success-bg:  #ecfdf5;
    --gis-success-fg:  #047857;
    --gis-error-bg:    #fef2f2;
    --gis-error-fg:    #b91c1c;
    --gis-shadow-sm:   0 1px 2px rgba(15,23,42,.05);
    --gis-shadow-md:   0 10px 30px -12px rgba(15,23,42,.18);
    --gis-radius:      14px;
    --gis-radius-sm:   10px;
    --gis-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Main card
   ========================================================================== */
.gis-subscribe-wrap {
    margin: 36px 0;
    font-family: var(--gis-font);
    color: var(--gis-text);
}

.gis-card {
    position: relative;
    background:
        linear-gradient(135deg, #ffffff 0%, #f6faff 45%, #fff7f0 100%);
    border: 1px solid var(--gis-border);
    border-radius: var(--gis-radius);
    padding: 22px 28px 20px;
    box-shadow: var(--gis-shadow-md);
    overflow: hidden;
    isolation: isolate;
}

/* Two soft animated gradient blobs drift behind the content */
.gis-card::before,
.gis-card::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    filter: blur(48px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
.gis-card::before {
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, rgba(14,165,233,.55) 0%, rgba(14,165,233,0) 70%);
    animation: gis-blob-a 14s ease-in-out infinite;
}
.gis-card::after {
    bottom: -140px;
    right: -120px;
    background: radial-gradient(circle, rgba(249,115,22,.45) 0%, rgba(249,115,22,0) 70%);
    animation: gis-blob-b 18s ease-in-out infinite;
}

/* Keep content crisp above the blobs */
.gis-card > *:not(.gis-card__accent) {
    position: relative;
    z-index: 1;
}

@keyframes gis-blob-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, 30px) scale(1.12); }
    66%      { transform: translate(20px, -20px) scale(.92); }
}
@keyframes gis-blob-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%      { transform: translate(-60px, -30px) scale(1.1); }
    75%      { transform: translate(-20px, 20px) scale(.95); }
}

/* Tighter top spacing when there is no social proof row */
.gis-card > .gis-card__accent + .gis-headline {
    margin-top: 2px;
}

/* Thin brand accent bar at the top of the card — with a slow shimmer sweep */
.gis-card__accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gis-brand) 0%, var(--gis-brand-2) 60%, var(--gis-accent) 100%);
    z-index: 2;
    overflow: hidden;
}
.gis-card__accent::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.65) 50%,
        rgba(255,255,255,0) 100%);
    animation: gis-shimmer 4.5s ease-in-out infinite;
    animation-delay: 1.5s;
}
@keyframes gis-shimmer {
    0%   { left: -40%; }
    55%  { left: 140%; }
    100% { left: 140%; }
}

/* --------------------------------------------------------------------------
   Social proof row
   -------------------------------------------------------------------------- */
.gis-social-proof {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--gis-text-soft);
}

.gis-proof-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    padding: 5px 10px;
    background: var(--gis-bg-soft);
    border-radius: 999px;
    border: 1px solid var(--gis-border);
}
.gis-proof-item strong {
    color: var(--gis-text);
    font-weight: 700;
}
.gis-proof-item svg { color: var(--gis-brand); }
.gis-proof-item--alt svg { color: var(--gis-accent); }

/* --------------------------------------------------------------------------
   Headline + subcopy
   -------------------------------------------------------------------------- */
.gis-headline {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--gis-text);
}
.gis-headline__hl {
    background: linear-gradient(120deg, var(--gis-accent) 0%, var(--gis-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
}
.gis-subcopy {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gis-text-soft);
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.gis-form { margin: 0; }

/* Honeypot */
.gis-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0;
}

.gis-input-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}

.gis-email-wrap {
    flex: 1 1 240px;
    min-width: 200px;
    position: relative;
    display: flex;
    align-items: center;
    background: var(--gis-bg);
    border: 1.5px solid var(--gis-border);
    border-radius: var(--gis-radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
.gis-email-wrap:focus-within {
    border-color: var(--gis-brand);
    box-shadow: 0 0 0 4px rgba(14,165,233,.12);
}
.gis-email-icon {
    flex-shrink: 0;
    color: var(--gis-muted);
    margin-left: 14px;
    pointer-events: none;
}
.gis-email-input {
    flex: 1;
    min-width: 0;
    padding: 14px 14px 14px 10px;
    font-size: 15px;
    font-family: inherit;
    background: transparent;
    border: 0;
    color: var(--gis-text);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.gis-email-input::placeholder { color: var(--gis-muted); }

/* Submit button */
.gis-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 22px;
    background: linear-gradient(135deg, var(--gis-accent) 0%, var(--gis-accent-2) 100%);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    border: 0;
    border-radius: var(--gis-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 12px -2px rgba(234,88,12,.35);
    transition: transform .12s ease, box-shadow .18s ease, filter .12s ease;
}
.gis-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px rgba(234,88,12,.5);
    filter: brightness(1.04);
}
.gis-submit-btn:active { transform: translateY(0); }
.gis-submit-btn:disabled {
    background: #cbd5e1;
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: none;
}
.gis-btn-arrow { transition: transform .18s ease; }
.gis-submit-btn:hover .gis-btn-arrow { transform: translateX(2px); }

.gis-submit-btn.gis-loading .gis-btn-arrow { display: none; }
.gis-submit-btn.gis-loading .gis-btn-label::after {
    content: "";
    display: inline-block;
    width: 14px; height: 14px;
    margin-left: 8px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: gis-spin .7s linear infinite;
}
@keyframes gis-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Trust row
   -------------------------------------------------------------------------- */
.gis-trust-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--gis-border);
}
.gis-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--gis-text-soft);
    letter-spacing: .01em;
}
.gis-trust-badge svg { color: #10b981; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Message (success/error)
   -------------------------------------------------------------------------- */
.gis-message {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    border-radius: var(--gis-radius-sm);
    padding: 0;
    min-height: 0;
    transition: all .2s ease;
}
.gis-message.gis-success {
    background: var(--gis-success-bg);
    color: var(--gis-success-fg);
    border: 1px solid #a7f3d0;
    padding: 10px 14px;
}
.gis-message.gis-error {
    background: var(--gis-error-bg);
    color: var(--gis-error-fg);
    border: 1px solid #fecaca;
    padding: 10px 14px;
}

/* --------------------------------------------------------------------------
   Responsive — main card
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .gis-card { padding: 18px 18px 16px; }
    .gis-headline { font-size: 19px; }
    .gis-subcopy  { font-size: 13px; }
    .gis-submit-btn { width: 100%; }
    .gis-email-wrap { flex: 1 1 100%; }
    .gis-social-proof { gap: 8px; }
    .gis-proof-item { font-size: 12px; }
    .gis-trust-row { gap: 12px; }
}

/* ==========================================================================
   Sticky mini-bar  (bottom-right on desktop, full-width bottom bar on mobile)
   Hidden by default; .gis-sticky.is-visible reveals it.
   ========================================================================== */
.gis-sticky {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: min(380px, calc(100vw - 40px));
    background: #fff;
    border: 1px solid var(--gis-border);
    border-radius: var(--gis-radius);
    box-shadow: 0 20px 40px -12px rgba(15,23,42,.25),
                0 4px 12px -4px rgba(15,23,42,.12);
    padding: 14px 14px 12px 16px;
    font-family: var(--gis-font);
    color: var(--gis-text);
    z-index: 9998;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon body"
        "form form";
    row-gap: 8px;
    column-gap: 12px;
    align-items: center;

    /* hidden state */
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.gis-sticky.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.gis-sticky__icon {
    grid-area: icon;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: var(--gis-accent-2);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #fed7aa;
}
.gis-sticky__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-right: 22px; /* space for close button */
}
.gis-sticky__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gis-text);
    line-height: 1.25;
}
.gis-sticky__hint {
    font-size: 12px;
    color: var(--gis-text-soft);
    line-height: 1.35;
}
.gis-sticky__close {
    position: absolute;
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    border: 0;
    background: transparent;
    color: var(--gis-muted);
    cursor: pointer;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.gis-sticky__close:hover { background: var(--gis-bg-soft); color: var(--gis-text); }

.gis-sticky__form {
    grid-area: form;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.gis-sticky__form .gis-email-input {
    flex: 1 1 160px;
    min-width: 140px;
    padding: 9px 12px;
    font-size: 13.5px;
    background: #fff;
    border: 1.5px solid var(--gis-border);
    border-radius: 8px;
    color: var(--gis-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.gis-sticky__form .gis-email-input:focus {
    border-color: var(--gis-brand);
    box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}
.gis-sticky__form .gis-submit-btn {
    padding: 9px 14px;
    font-size: 13px;
    border-radius: 8px;
}
.gis-sticky__form .gis-message {
    flex: 1 1 100%;
    margin-top: 4px;
    font-size: 12.5px;
}
.gis-sticky__form .gis-message.gis-success,
.gis-sticky__form .gis-message.gis-error {
    padding: 7px 10px;
}

/* Mobile: dock as a full-width bottom bar */
@media (max-width: 560px) {
    .gis-sticky {
        left: 0; right: 0; bottom: 0;
        width: 100%;
        border-radius: var(--gis-radius) var(--gis-radius) 0 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        padding: 12px 14px 10px;
        box-shadow: 0 -10px 30px -8px rgba(15,23,42,.18);
    }
    .gis-sticky.is-visible {
        transform: translateY(0);
    }
    .gis-sticky {
        transform: translateY(calc(100% + 20px));
    }
    .gis-sticky__icon { display: none; }
    .gis-sticky {
        grid-template-columns: 1fr;
        grid-template-areas:
            "body"
            "form";
    }
    .gis-sticky__body { padding-right: 28px; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .gis-sticky,
    .gis-submit-btn,
    .gis-btn-arrow,
    .gis-message {
        transition: none !important;
    }
    .gis-card::before,
    .gis-card::after,
    .gis-card__accent::after {
        animation: none !important;
    }
}