@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

/* =========================================================
   POLICY FIX EXPERTS - INFLUENCER REGISTRATION
   DARK THEME
   ========================================================= */

:root {
    --pfe-bg: #0b0f14;
    --pfe-card: #141b23;
    --pfe-input: #0c1218;
    --pfe-border: #2b3744;
    --pfe-text: #f1f4f8;
    --pfe-muted: #9aa8b8;
    --pfe-blue: #8db8e8;
    --pfe-blue-hover: #a6c9ee;
}

/* PAGE */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100% !important;

    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(141,184,232,.07),
            transparent 30%
        ),
        #0b0f14 !important;

    color: var(--pfe-text) !important;

    font-family:
        "DM Sans",
        Arial,
        sans-serif !important;
}

/* ALL COMMON CONTAINERS */

.container,
.wrapper,
.main-container,
.registration-container {
    background: transparent !important;
    color: var(--pfe-text) !important;
    border: none !important;
    box-shadow: none !important;
}

/* HEADER */

.header,
header {
    background:
        linear-gradient(
            180deg,
            #182331 0%,
            #111923 100%
        ) !important;

    color: var(--pfe-text) !important;

    border-bottom: 1px solid #27313d !important;
}

.header h1,
.header h2,
.header h3,
header h1,
header h2,
header h3 {
    color: #f1f4f8 !important;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-weight: 800 !important;
}

.header p,
header p {
    color: #aab7c6 !important;
}

/* MAIN CARD */

.card,
.form-card,
.registration-card {
    background:
        linear-gradient(
            180deg,
            #141b23 0%,
            #111820 100%
        ) !important;

    color: var(--pfe-text) !important;

    border: 1px solid var(--pfe-border) !important;

    border-radius: 3px !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.40) !important;
}

/* HEADINGS */

.card h1,
.card h2,
.card h3,
.form-card h1,
.form-card h2,
.registration-card h1,
.registration-card h2 {
    color: #f1f4f8 !important;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-weight: 800 !important;
}

/* DESCRIPTION */

.card p,
.form-card p,
.registration-card p {
    color: var(--pfe-muted) !important;
}

/* LABELS */

.card label,
.form-card label,
.registration-card label {
    color: #e7edf4 !important;

    font-weight: 600 !important;
}

/* INPUTS */

.card input,
.card select,
.card textarea,
.form-card input,
.form-card select,
.form-card textarea,
.registration-card input,
.registration-card select,
.registration-card textarea {
    background: var(--pfe-input) !important;

    color: #f1f4f8 !important;

    border: 1px solid var(--pfe-border) !important;

    border-radius: 3px !important;

    box-shadow: none !important;

    font-family:
        "DM Sans",
        Arial,
        sans-serif !important;
}

/* PLACEHOLDER */

.card input::placeholder,
.card textarea::placeholder,
.form-card input::placeholder,
.form-card textarea::placeholder,
.registration-card input::placeholder,
.registration-card textarea::placeholder {
    color: #718093 !important;

    opacity: 1 !important;
}

/* FOCUS */

.card input:focus,
.card select:focus,
.card textarea:focus,
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus,
.registration-card input:focus,
.registration-card select:focus,
.registration-card textarea:focus {
    background: #101821 !important;

    color: #ffffff !important;

    border-color: var(--pfe-blue) !important;

    outline: none !important;

    box-shadow:
        0 0 0 1px var(--pfe-blue) !important;
}

/* DROPDOWN */

.card select option,
.form-card select option,
.registration-card select option {
    background: #111820 !important;

    color: #f1f4f8 !important;
}

/* BUTTON */

.card button,
.form-card button,
.registration-card button,
button[type="submit"],
input[type="submit"] {
    background: var(--pfe-blue) !important;

    color: #07111d !important;

    border: 1px solid #a8c8ec !important;

    border-radius: 3px !important;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-weight: 800 !important;

    box-shadow: none !important;

    cursor: pointer !important;

    transition:
        background .2s ease,
        transform .2s ease !important;
}

.card button:hover,
.form-card button:hover,
.registration-card button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background: var(--pfe-blue-hover) !important;

    transform: translateY(-1px) !important;
}

/* REQUIRED STAR */

label span,
.required,
.required-field {
    color: #ff7068 !important;
}

/* SUCCESS */

#successMessage,
.success,
.success-message {
    background: rgba(84,214,155,.08) !important;

    border: 1px solid rgba(84,214,155,.28) !important;

    color: #54d69b !important;
}

/* ERROR */

#errorMessage,
.error,
.error-message {
    background: rgba(255,129,122,.08) !important;

    border: 1px solid rgba(255,129,122,.28) !important;

    color: #ff817a !important;
}

/* FOOTER */

.footer,
footer {
    background: #0b0f14 !important;

    color: #7f8d9d !important;

    border-top: 1px solid #202a35 !important;
}

/* MOBILE */

@media (max-width: 768px) {

    .container,
    .wrapper,
    .main-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .card,
    .form-card,
    .registration-card {
        padding: 25px 18px !important;
    }

    .header h1,
    header h1 {
        font-size: 30px !important;
    }
}

/* PolicyFix Experts logo - WHITE */
.logo,
.logo a,
.logo span,
.brand,
.brand a,
.brand span,
header .logo,
header .brand {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* If the logo uses separate text spans */
.logo *,
.brand *,
header .logo *,
header .brand * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Keep the registration portal text muted */
header .portal-title,
header .portal-name {
    color: #8b9aaa !important;
}