/* Gated login/register modal — SIGMAS dark theme */

/* ===== Overlay & Container ===== */
.gated-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(6px);
    z-index: 9998;
    display: none;
}

.gated-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.gated-card {
    width: min(420px, 92vw);
    max-height: 92vh;
    overflow: auto;
    background: #0a0a0a;
    border: 1px solid #232323;
    border-radius: 16px;
    color: #e5e5e5;
}

.gated-card::-webkit-scrollbar {
    width: 0;
}

.gated-card {
    scrollbar-width: none;
}

/* Kill any inherited white backgrounds inside the card */
.gated-card *,
.gated-card *::before,
.gated-card *::after {
    box-sizing: border-box;
}

/* ===== Header ===== */
.gated-header {
    padding: 32px 32px 0;
    text-align: center;
    position: relative;
    background: transparent;
}

.gated-logo {
    width: 44px;
    height: auto;
    margin: 0 auto 16px;
    display: block;
}

.gated-tagline {
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 24px;
}

/* ===== Close button ===== */
.gated-close {
    position: absolute;
    top: 16px;
    right: 16px;
    appearance: none;
    border: none;
    background: transparent !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #71717a;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background .2s, color .2s;
    padding: 0;
}

.gated-close:hover {
    background: #1a1a1a !important;
    color: #a1a1aa;
}

/* ===== Body ===== */
.gated-body {
    padding: 0 32px 32px;
    background: transparent;
    text-align: left;
}

/* ===== Form fields — aggressive overrides ===== */
.gated-modal .field,
.gated-body .field {
    margin-bottom: 16px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.gated-modal .field__label-text,
.gated-body .field__label-text {
    display: block !important;
    position: static !important;
    float: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #a1a1aa !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    line-height: 1.2 !important;
    pointer-events: none;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    text-align: left !important;
}

.gated-modal .field__container,
.gated-body .field__container {
    position: relative;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Hide Shopline's native floating label */
.gated-modal .field__label,
.gated-body .field__label,
.gated-modal .field .field__label,
.gated-body .field .field__label {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Force field to stack vertically and fill width */
.gated-modal .field,
.gated-body .field {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
    text-align: left !important;
}

/* Input fields */
.gated-modal .field__input,
.gated-body .field__input,
.gated-modal input[type="email"],
.gated-modal input[type="password"],
.gated-modal input[type="text"],
.gated-body input[type="email"],
.gated-body input[type="password"],
.gated-body input[type="text"] {
    width: 100% !important;
    padding: 12px 14px !important;
    background: #131313 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 10px !important;
    color: #e5e5e5 !important;
    font-size: 14px !important;
    font-family: inherit;
    outline: none !important;
    transition: border-color .2s;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    margin: 0;
}

.gated-modal .field__input::placeholder,
.gated-body .field__input::placeholder,
.gated-modal input::placeholder,
.gated-body input::placeholder {
    color: #52525b !important;
}

.gated-modal .field__input:focus,
.gated-body .field__input:focus,
.gated-modal input[type="email"]:focus,
.gated-modal input[type="password"]:focus,
.gated-modal input[type="text"]:focus,
.gated-body input[type="email"]:focus,
.gated-body input[type="password"]:focus,
.gated-body input[type="text"]:focus {
    border-color: #fbbf24 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ===== Error states ===== */
.gated-modal .field__error,
.gated-body .field__error {
    font-size: 12px;
    color: #ef4444;
    margin-top: 4px;
    background: transparent !important;
}

.gated-modal .form-status--error,
.gated-body .form-status--error {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 16px;
    font-size: 13px;
    color: #fca5a5 !important;
}

/* ===== Primary CTA button ===== */
.gated-modal .gated-btn-primary,
.gated-body .gated-btn-primary,
.gated-modal button[type="submit"],
.gated-body button[type="submit"] {
    width: 100% !important;
    padding: 13px !important;
    background: #fbbf24 !important;
    color: #0a0a0a !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: .02em;
    transition: background .2s;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.gated-modal .gated-btn-primary:hover,
.gated-body .gated-btn-primary:hover,
.gated-modal button[type="submit"]:hover,
.gated-body button[type="submit"]:hover {
    background: #f59e0b !important;
}

.gated-modal .gated-btn-primary.loading,
.gated-body .gated-btn-primary.loading {
    opacity: .6;
    pointer-events: none;
}

/* ===== Forgot password ===== */
.gated-help {
    text-align: center;
    margin-top: 12px;
}

.gated-help a,
.gated-help a:not(.button),
.gated-help a:not(.button):hover {
    font-size: 12px;
    color: #71717a !important;
    text-decoration: none !important;
    transition: color .2s;
    background: transparent !important;
}

.gated-help a:hover {
    color: #a1a1aa !important;
}

/* ===== Panel switch (Join SIGMAS / Sign in) ===== */
.gated-switch {
    border-top: 1px solid #1a1a1a;
    margin-top: 20px;
    padding-top: 16px;
    text-align: center;
}

.gated-switch-text {
    font-size: 13px;
    color: #71717a;
}

.gated-switch a,
.gated-switch a:not(.button),
.gated-switch a:not(.button):hover {
    font-size: 13px;
    color: #fbbf24 !important;
    text-decoration: none !important;
    font-weight: 600;
    margin-left: 4px;
    background: transparent !important;
}

.gated-switch a:hover {
    text-decoration: underline !important;
}

/* ===== Marketing checkbox ===== */
.gated-modal .gated-checkbox-row,
.gated-body .gated-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.gated-modal .gated-checkbox-row input[type="checkbox"],
.gated-body .gated-checkbox-row input[type="checkbox"] {
    accent-color: #fbbf24;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer;
    flex-shrink: 0;
    background: #131313 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 4px !important;
    padding: 0 !important;
}

.gated-modal .gated-checkbox-row span,
.gated-body .gated-checkbox-row span {
    font-size: 13px;
    color: #a1a1aa;
}

/* ===== Name fields side by side ===== */
.gated-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.gated-name-row .field {
    margin-bottom: 0 !important;
}

/* ===== All text inside modal should be light ===== */
.gated-modal,
.gated-modal p,
.gated-modal span,
.gated-modal label,
.gated-modal div {
    color: #e5e5e5;
}

/* ===== Kill any Shopline form wrappers that add white bg ===== */
.gated-modal form,
.gated-body form,
.gated-modal .js-gated-auth,
.gated-body .js-gated-auth {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* ===== Hidden utility ===== */
.gated-hidden {
    display: none !important;
}

/* ===== Body scroll lock ===== */
body.gated-lock {
    overflow: hidden;
}

/* ===== Gate content blur/hide ===== */
.gated-content--blur {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
}

.gated-content--hide {
    display: none;
}