/**
 * Shared brand theme for all three panels (customer / admin / delivery).
 * Loaded after Bootstrap and before each panel's own stylesheet, so it can
 * safely override Bootstrap's default blue "primary" with the DailyRashan
 * brand green, and give purchase-funnel CTAs a distinct accent orange.
 */

:root {
    --brand-green: #02602a;
    --brand-green-dark: #014019;
    --brand-orange: #fc4806;
    --brand-orange-dark: #d93c04;

    /* Re-point Bootstrap's own primary/link variables at our green so anything
       still using stock Bootstrap primary (utility classes, form focus rings,
       list-group active states, etc.) follows the brand automatically. */
    --bs-primary: var(--brand-green);
    --bs-primary-rgb: 2, 96, 42;
    --bs-link-color: var(--brand-green);
    --bs-link-color-rgb: 2, 96, 42;
    --bs-link-hover-color: var(--brand-green-dark);
    --bs-link-hover-color-rgb: 1, 64, 25;
}

/* Bootstrap bakes literal colors into each button variant's own custom
   properties, so overriding --bs-primary above doesn't reach .btn-primary -
   it has to be set directly here. .btn-success is included too: the app used
   it as its general "go" action color before this brand pass, so unifying it
   with .btn-primary keeps every green button on screen the exact same shade. */
.btn-primary,
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-green-dark);
    --bs-btn-hover-border-color: var(--brand-green-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-green-dark);
    --bs-btn-active-border-color: var(--brand-green-dark);
    --bs-btn-disabled-bg: var(--brand-green);
    --bs-btn-disabled-border-color: var(--brand-green);
}

.btn-outline-primary,
.btn-outline-success {
    --bs-btn-color: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-green);
    --bs-btn-hover-border-color: var(--brand-green);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-green);
    --bs-btn-active-border-color: var(--brand-green);
}

/* Purchase-funnel CTAs (Add to Cart / Proceed to Checkout / Place Order) get the
   accent orange so they pop against the green theme instead of blending in. */
.btn-cta {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-orange);
    --bs-btn-border-color: var(--brand-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-orange-dark);
    --bs-btn-hover-border-color: var(--brand-orange-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-orange-dark);
    --bs-btn-active-border-color: var(--brand-orange-dark);
    --bs-btn-disabled-bg: var(--brand-orange);
    --bs-btn-disabled-border-color: var(--brand-orange);
}

.list-group-item.active {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
}

.form-check-input:checked {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
}

.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 0.25rem rgba(2, 96, 42, .25);
}

/* Shared header treatment for all 3 panels: a white bar (so the full-color logo
   stays legible) with a green accent line, instead of a solid green bar that
   would swallow the logo's own green ink. */
.brand-navbar {
    background-color: #fff;
    border-bottom: 3px solid var(--brand-green);
}

.brand-logo {
    height: 42px;
    width: auto;
}

@media (max-width: 576px) {
    .brand-logo {
        height: 32px;
    }
}