:root {
    --bg-color: #141120;
    --gold: #c99a1a;
    --gold-hover: #e0b93a;
    --gold-press: #b88711;
    --panel-radius: 20px;
    --form-height: 56px;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-color);
    color: var(--gold);
    -webkit-font-smoothing: antialiased;
    overflow-x: auto;
}

.panel {
    background: rgba(20, 17, 32, 0.72);
    border-radius: var(--panel-radius);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 0 18px rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    padding: 3rem 2rem;
    width: 100%;
    max-width: 360px;
}

.logo {
    width: 20rem;
    max-width: 100%;
}

.subscribe-form {
    height: var(--form-height);
    border-radius: 999px;
    border: 2px solid var(--gold);
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transition: box-shadow 0.25s ease, filter 0.25s ease;
    margin-top: 1.5rem;
}

.subscribe-form:hover,
.subscribe-form:focus-within {
    box-shadow: 0 0 22px rgba(201, 154, 26, 0.6);
    filter: brightness(1.08);
}

.email-input {
    border: none;
    outline: none;
    background: transparent;
    color: var(--gold);
    padding: 0 1rem;
    flex: 1;
    min-width: 0;
}

.email-input::placeholder {
    color: rgba(201, 154, 26, 0.55);
}

.submit-btn {
    background: linear-gradient(180deg, var(--gold), var(--gold-press));
    color: #141120;
    font-weight: 700;
    border: none;
    border-radius: 0 var(--form-height) var(--form-height) 0;
    transition: all 0.25s ease;
    flex-shrink: 0;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

.submit-btn:hover {
    background: linear-gradient(180deg, var(--gold-hover), var(--gold));
    box-shadow: 0 0 15px rgba(201, 154, 26, 0.8);
    color: #141120 !important;
}

.submit-btn:disabled {
    color: #141120 !important;
    opacity: 0.9;
}

#loadingSpinner {
    margin-top: 1rem;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.35) inset !important;
    -webkit-text-fill-color: var(--gold) !important;
    transition: background-color 9999s ease-in-out 0s;
    font-family: 'Poppins', sans-serif;
}


.seo-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 767.98px) {

    html,
    body {
        overflow-x: auto;
        min-width: 360px;
    }

    .d-flex.justify-content-center.align-items-center.min-vh-100.p-3 {
        min-width: 360px;
        justify-content: flex-start;
    }

    .panel {
        width: 360px;
        max-width: 360px;
        flex-shrink: 0;
        margin: 0;
    }
}


@media (min-width: 768px) {
    .panel {
        max-width: 60vh;
        padding: 4rem 3rem;
    }
}