/* Prairie Sand theme overrides for EAZZY LOANS
    Updated to a brownish brand palette per user request:
    - Prairie Sand (primary): #9a381f
    - Energy Yellow (accent): #fae25d
    - Black for text: #000000
    Loaded after page styles so it can override variables where needed.
*/

:root {

    /* Primary brown/rust palette */
    --primary: #9a381f; /* Prairie Sand */
    --primary-dark: #7a2c16; /* deeper rust */

    /* Accent / alerts */
    --accent: #fae25d; /* Energy Yellow */
    --danger: #dc2626;

    /* Text & backgrounds */
    --text: #000000; /* Black for structural contrast */
    --text-light: #333333;
    --background: #f8fafc;
    --card-bg: #ffffff;

    /* Common sizing */
    --radius: 12px;
    --shadow: 0 6px 18px rgba(2,6,23,0.06);
    --shadow-lg: 0 18px 40px rgba(2,6,23,0.08);
    --transition: all 0.22s ease;
}

/* Base page adjustments */
html, body {
    background: linear-gradient(135deg, #ffffff 0%, #f5fbf7 100%);
    color: var(--text);
}

a { color: var(--primary); }
a:hover { text-decoration: underline; }

/* Buttons */
.btn-primary, .btn-apply {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white !important;
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.btn-primary:hover, .btn-apply:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* Headers / banners */
.header-banner, .payment-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

/* Logo mark */
.logo-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
}

/* Offer / badge */
.offer-badge { background-color: var(--accent) !important; color: white !important; }

/* Footer */
.footer { background-color: var(--primary-dark) !important; color: white !important; }
.footer a { color: rgba(255,255,255,0.85); }

/* Trust icons */
/* Trust icon background tuned to the new primary */
.trust-icon { background-color: rgba(154,56,31,0.08) !important; color: var(--primary) !important; }

/* Inputs focus */
input:focus, textarea:focus, select:focus {
    outline: 2px solid rgba(154,56,31,0.12);
    box-shadow: 0 6px 18px rgba(154,56,31,0.08);
}

/* Small utilities */
.text-primary { color: var(--primary) !important; }
.bg-primary { background: var(--primary) !important; color: white !important; }

@media (min-width: 768px) {
    :root { --radius: 14px; }
}