/* =====================================================================
   CCL Techlogix — Carbon Offset Portal
   Brand: Navy #171238 | Cyan #00CFFF | Teal #19AD86
   Fonts: Brawler (headings) | Roboto (body) | Poppins (UI/buttons)
   ===================================================================== */

/* ---- CCL Brand → Material Style / Bootstrap CSS variables ---- */
:root {
    /* Primary accent = CCL Cyan */
    --bs-primary:                        #00cfff;
    --bs-primary-rgb:                    0, 207, 255;
    --bs-primary-hover:                  #00b8e6;
    --bs-primary-active:                 #0099cc;
    --bs-text-on-primary:                #171238;
    --bs-focus-ring-color:               rgba(0, 207, 255, 0.25);

    /* Success = CCL Teal */
    --bs-success:                        #19ad86;
    --bs-success-rgb:                    25, 173, 134;
    --bs-text-on-success:                #ffffff;

    /* Body */
    --bs-body-color:                     #171238;
    --bs-body-bg:                        #f8f9fa;
    --bs-body-font-family:               'Roboto', Arial, sans-serif;

    /* Links */
    --bs-link-color:                     #00cfff;
    --bs-link-hover-color:               #0099cc;

    /* Borders */
    --bs-border-color:                   #dee2e6;

    /* Form field focus outline */
    --bs-form-field-active-border-color: #171238;
}

/* ---- Reset / Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    overflow-x: hidden;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    color: #1a1a2e;
    background: #f8f9fa;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Brawler', Georgia, serif;
    color: #171238;
}

a { color: #00cfff; }
a:hover { color: #0099cc; }

/* ---- Site Header ---- */
.site-header {
    background: #171238;
    border-bottom: 3px solid #00cfff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

.site-header .navbar { padding: 10px 0; }

.site-header .navbar-brand img {
    height: 54px;
    width: auto;
}

@media (min-width: 768px) {
    .site-header .navbar-brand img { height: 76px; }
}

/* ---- Main Content ---- */
.site-main {
    flex: 1 0 auto;
    padding: 32px 0 48px;
}

/* ---- Site Footer ---- */
.site-footer {
    flex-shrink: 0;
    background: #171238;
    color: #ffffff;
    padding: 16px 0;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.82rem;
}

.site-footer p { color: #ffffff; }

/* ---- Card ---- */
.card {
    border: 1px solid #dee2e6;
    border-top: 4px solid #00cfff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    background: #ffffff;
    animation: cardFadeUp 0.35s ease-out both;
}

.card-body {
    background: #ffffff;
    padding: 40px;
    border-radius: 14px;
}

@keyframes cardFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Submit page heading + intro ---- */
.submit-heading {
    font-family: 'Brawler', Georgia, serif;
    color: #00cfff;
    font-size: 1.875rem;
    margin-bottom: 0.5rem;
}

.submit-intro {
    color: #444;
    margin-bottom: 1.75rem;
}

/* ---- Status badge ---- */
.status-badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.status-badge--success { background: #19ad86; color: #fff; }
.status-badge--warning { background: #f0ad4e; color: #fff; }
.status-badge--error   { background: #dc3545; color: #fff; }

.status-heading {
    font-family: 'Brawler', Georgia, serif;
    color: #171238;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}


/* ---- Bridge jQuery Unobtrusive Validation classes → Material Style / Bootstrap ---- */
.field-validation-error {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-form-invalid-color, #dc3545);
}


/* ---- Field helper text ---- */
.field-helper {
    font-size: 0.78rem;
    color: #666;
    margin-top: 4px;
}

/* ---- Buttons ---- */
.btn-ccl-primary {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600;
    background: #00cfff;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 10px 32px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    letter-spacing: 0.02em;
}

.btn-ccl-primary:hover:not(:disabled),
.btn-ccl-primary:focus:not(:disabled),
.btn-ccl-primary:active:not(:disabled) {
    background: #00b8e6;
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
}

.btn-ccl-secondary {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600;
    background: transparent;
    color: #171238;
    border: 2px solid #171238;
    border-radius: 50px;
    padding: 10px 32px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-ccl-secondary:hover, .btn-ccl-secondary:focus {
    background: #171238;
    color: #ffffff;
}

.btn-submit {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
}

.btn-submit:disabled {
    background: #b0b7c3;
    color: #fff;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---- Resend panel ---- */
.resend-panel {
    background: #f0f8ff;
    border: 1px solid #00cfff;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 1.5rem;
}

.resend-panel p {
    color: #171238;
    margin-bottom: 4px;
}

/* ---- Alert overrides ---- */
.alert-danger {
    background: #fff0f0;
    border-left: 4px solid #e74c3c;
    color: #b71c1c;
    border-radius: 6px;
    padding: 12px 16px;
}

.alert-warning {
    background: #fffbf0;
    border-left: 4px solid #f0ad4e;
    color: #7a5a00;
    border-radius: 6px;
    padding: 12px 16px;
}

/* ---- Landing page ---- */
.how-it-works-heading {
    font-family: 'Brawler', Georgia, serif;
    color: #171238;
    font-size: 1.15rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.how-it-works-list {
    padding-left: 1.25rem;
    margin-bottom: 1.5rem;
}

.how-it-works-list li {
    margin-bottom: 0.75rem;
    color: #444;
}

.how-it-works-list li span {
    display: block;
    color: #666;
    font-size: 0.9rem;
}

/* ---- Utility ---- */
.lead { font-size: 1.05rem; font-weight: 400; }

/* ---- Responsive overrides (must be last to win the cascade) ---- */
@media (max-width: 575.98px) {
    .site-main {
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .site-main > .container {
        padding-left: 0;
        padding-right: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .site-main > .container > .row {
        --bs-gutter-x: 0;
        flex: 1;
    }
    .site-main > .container > .row > .col-12 {
        display: flex;
        flex-direction: column;
    }
    .card {
        border: none;
        border-bottom: 1px solid #dee2e6;
        border-radius: 0;
        flex: 1;
    }
    .card-body { padding: 15px; }
}