/* ===================================================================
   Utility Warehouse Brand Styles
   Based on official UW Brand Guidelines
   =================================================================== */

/* Font Face Declarations */
@font-face {
    font-family: 'Work Sans';
    src: url('/fonts/utilitywarehouse/WorkSans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('/fonts/utilitywarehouse/WorkSans-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('/fonts/utilitywarehouse/WorkSans-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('/fonts/utilitywarehouse/WorkSans-SemiBoldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('/fonts/utilitywarehouse/WorkSans-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('/fonts/utilitywarehouse/WorkSans-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('/fonts/utilitywarehouse/Aeonik-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('/fonts/utilitywarehouse/Aeonik-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ===================================================================
   Brand Color Palette (CSS Custom Properties)
   =================================================================== */
:root {
    /* Primary Brand Colors */
    --uw-purple: #550091;
    --uw-midnight: #1E0A46;

    /* Secondary/Accent Colors */
    --uw-grape: #a66de8;
    --uw-cyan: #75A7FD;
    --uw-rose: #F25192;
    --uw-gold: #FFD76F;
    --uw-apple: #62DD99;
    --uw-pink: #F495F9;

    /* Purple Tints */
    --uw-light-tint: #F5F0F8;
    --uw-mid-tint: #C4A5DB;
    --uw-dark-tint: #905AB9;

    /* Base */
    --uw-white: #FFFFFF;

    /* Typography */
    --uw-font-primary: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --uw-font-heading: 'Aeonik', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===================================================================
   Header
   =================================================================== */
.uw-header {
    background-color: var(--uw-white);
    padding: 20px 0;
    box-shadow: 0 2px 8px rgba(30, 10, 70, 0.08);
    margin-bottom: 50px;
}

.container-uw {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 15px;
}

.uw-logo.logo-img {
    max-height: 50px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .uw-logo.logo-img {
        max-height: 45px;
    }
}

/* ===================================================================
   Typography
   =================================================================== */
body {
    font-family: var(--uw-font-primary);
    color: var(--uw-midnight);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--uw-font-heading);
    font-weight: 700;
    color: var(--uw-midnight);
}

h1.utilitywarehouse {
    font-size: 28px !important;
    font-weight: 700;
    line-height: 1.3;
}

h2 {
    font-size: 24px;
    font-weight: 700;
}

h3 {
    font-size: 20px;
    font-weight: 600;
}

p, span, div {
    font-family: var(--uw-font-primary);
}

/* ===================================================================
   Buttons
   =================================================================== */
.btn-utilitywarehouse,
.btn-uw {
    background-color: var(--uw-purple) !important;
    border-color: var(--uw-purple) !important;
    color: var(--uw-white) !important;
    font-family: var(--uw-font-primary);
    font-weight: 600;
    border-radius: 8px;
    padding: 12px 24px;
    transition: all 0.3s ease;
}

.btn-utilitywarehouse:hover,
.btn-uw:hover {
    background-color: var(--uw-dark-tint) !important;
    border-color: var(--uw-dark-tint) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(85, 0, 145, 0.3);
}

.btn-utilitywarehouse:active,
.btn-uw:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(85, 0, 145, 0.2);
}

/* Secondary Button Style */
.btn-uw-secondary {
    background-color: transparent !important;
    border: 2px solid var(--uw-purple) !important;
    color: var(--uw-purple) !important;
    font-weight: 600;
    border-radius: 8px;
    padding: 12px 24px;
    transition: all 0.3s ease;
}

.btn-uw-secondary:hover {
    background-color: var(--uw-light-tint) !important;
    border-color: var(--uw-dark-tint) !important;
    color: var(--uw-dark-tint) !important;
}

/* ===================================================================
   Cards & Interactive Elements
   =================================================================== */
.card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 2px 8px rgba(30, 10, 70, 0.08);
    transition: all 0.3s ease;
}

.card.options {
    cursor: pointer;
}

.card.options:hover {
    box-shadow: 0 8px 24px rgba(85, 0, 145, 0.15);
    transform: translateY(-4px);
}

.card.options:hover h3 {
    color: var(--uw-purple) !important;
}

.card.options:hover a {
    text-decoration: none;
}

/* ===================================================================
   Links
   =================================================================== */
a {
    color: var(--uw-purple);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--uw-dark-tint);
    text-decoration: none;
}

/* ===================================================================
   Backgrounds & Utility Classes
   =================================================================== */
.bg-uw-purple {
    background-color: var(--uw-purple) !important;
}

.bg-uw-light {
    background-color: var(--uw-light-tint) !important;
}

.bg-uw-midnight {
    background-color: var(--uw-midnight) !important;
}

.text-uw-purple {
    color: var(--uw-purple) !important;
}

.text-uw-midnight {
    color: var(--uw-midnight) !important;
}

.border-uw-purple {
    border-color: var(--uw-purple) !important;
}

/* ===================================================================
   Form Elements
   =================================================================== */
.form-control:focus {
    border-color: var(--uw-purple);
    box-shadow: 0 0 0 0.2rem rgba(85, 0, 145, 0.15);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
    border-radius: 8px;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
    font-family: var(--uw-font-primary);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--uw-purple);
    outline: none;
}

/* ===================================================================
   Alert Messages
   =================================================================== */
.alert-success {
    background-color: var(--uw-apple);
    border-color: var(--uw-apple);
    color: var(--uw-midnight);
    border-radius: 12px;
}

.alert-danger,
.alert-error {
    background-color: var(--uw-rose);
    border-color: var(--uw-rose);
    color: var(--uw-white);
    border-radius: 12px;
}

.alert-info {
    background-color: var(--uw-cyan);
    border-color: var(--uw-cyan);
    color: var(--uw-midnight);
    border-radius: 12px;
}

.alert-warning {
    background-color: var(--uw-gold);
    border-color: var(--uw-gold);
    color: var(--uw-midnight);
    border-radius: 12px;
}

/* ===================================================================
   Payment Options Cards (Custom Styling)
   =================================================================== */
.payment-option-card {
    border-left: 4px solid var(--uw-purple);
    background: linear-gradient(135deg, var(--uw-white) 0%, var(--uw-light-tint) 100%);
}

.payment-option-card:hover {
    border-left-color: var(--uw-grape);
}

/* ===================================================================
   Loading States
   =================================================================== */
.spinner-border-uw {
    border-color: var(--uw-purple);
    border-right-color: transparent;
}

/* ===================================================================
   Mobile Responsiveness
   =================================================================== */
@media (max-width: 768px) {
    h1.utilitywarehouse {
        font-size: 24px !important;
    }

    .btn-utilitywarehouse,
    .btn-uw {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* ===================================================================
   Accessibility
   =================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--uw-cyan);
    outline-offset: 2px;
}

/* ===================================================================
   Footer
   =================================================================== */
.uw-footer {
    color: var(--uw-white);
    padding: 40px 0;
    margin-top: 60px;
    text-align: center;
}

.uw-footer .container-uw {
    background-color: var(--uw-midnight);
    padding: 40px 15px;
    border-radius: 8px;
}

.uw-footer p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0 auto 30px;
    color: var(--uw-white);
    max-width: 700px;
}

.uw-footer-link {
    color: var(--uw-white);
    text-decoration: underline;
}

.uw-footer-link:hover {
    color: var(--uw-pink);
    text-decoration: underline;
}

.uw-logo-footer {
    height: auto;
}

/* Mobile Responsiveness for Footer */
@media (max-width: 768px) {
    .uw-footer {
        padding: 30px 0;
        margin-top: 40px;
    }

    .uw-footer .container-uw {
        padding: 30px 15px;
    }

    .uw-footer p {
        font-size: 11px;
        margin-bottom: 20px;
    }
}