/* Dealcloud Brand Styles
 *
 * Token roles:
 * - --brand-background-color / --brand-secondary-background → page fill
 * - --brand-primary-color → brand ink / card chrome
 * - --header-bg → header + external nav strip
 * - --navbar-button-bg / --navbar-button-text → header DealButton pills
 * - --highlight-color → accents (logo, countdowns, footer accent text)
 */
:root {
    --brand-primary-color: #13262f;
    --brand-primary-color-dark: #007d52;
    --brand-background-color: #efeff3;
    --brand-secondary-background: #efeff3;
    --brand-text-color: #333333;
    --brand-login-background: #13262f;
    --brand-login-container-bg: #00c27e;
    --highlight-color: #00c27e;
    --header-bg: var(--brand-primary-color);
    --header-text-color: #ffffff;
    --navbar-button-bg: var(--highlight-color);
    --navbar-button-text: #ffffff;
    --footer-bg: var(--brand-primary-color);
    --auth-page-bg: var(--brand-primary-color);
    --auth-link-color: var(--brand-primary-color);
    --accent-color: var(--highlight-color);
    --accent-color-darker: var(--brand-primary-color-dark);
}

body {
    background-color: var(--brand-background-color, #efeff3);
    background-image: none;
    color: var(--brand-text-color, #333);
}

/* Dynamic brand styles */
.brand-primary-bg {
    background-color: var(--brand-primary-color) !important;
}

.brand-primary-color {
    color: var(--brand-primary-color) !important;
}

.brand-primary-border {
    border-color: var(--brand-primary-color) !important;
}

.brand-primary-text {
    color: var(--brand-text-color);
}

/* Button styles */
.btn-brand-primary {
    background-color: var(--navbar-button-bg, var(--highlight-color, var(--brand-primary-color)));
    color: var(--navbar-button-text, #ffffff);
    transition: background-color 0.3s ease, opacity 0.15s ease;
}

.btn-brand-primary:hover {
    background-color: var(--brand-primary-color-dark);
    color: #ffffff;
}

button.product-hub-service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.75rem;
    border: none;
    border-radius: 9999px;
    padding: 0.625rem 2rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    background-color: var(--navbar-button-bg, var(--brand-primary-color)) !important;
    color: var(--navbar-button-text, #ffffff) !important;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

button.product-hub-service-btn:hover:not(:disabled) {
    background-color: var(--brand-primary-color-dark) !important;
    opacity: 0.92;
}

button.product-hub-service-btn--disabled {
    background-color: #9ca3af !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Login specific styles */
.login-img {
    background: var(--brand-login-background);
}

.login-container {
    background: var(--brand-login-container-bg);
}

/* Header navbar */
.navbar-brand,
.header-bg {
    background-color: var(--header-bg, var(--brand-primary-color));
}

.navbar-button-bg {
    background-color: var(--navbar-button-bg, var(--highlight-color, var(--brand-primary-color)));
}

.navbar-button-text {
    color: var(--navbar-button-text, var(--header-text-color, #ffffff));
}

/* Footer */
.footer-bg {
    background-color: var(--footer-bg, var(--brand-primary-color));
}

.footer-primary-text {
    color: var(--highlight-color, var(--brand-primary-color));
}

.footer-secondary-text {
    color: var(--header-text-color, #ffffff);
}

.account-link {
    color: var(--brand-primary-color) !important;
}

/*
 * Guest unsubscribe / light contact form chrome lives in GuestUnsubscribe.vue
 * (token-driven defaults). Product-hub dark overrides: portal-types/service.css.
 * Add Deal Cloud–specific tweaks here only when tokens are insufficient.
 */

/* Footer logo — constrain LoginImage when Tailwind arbitrary classes are absent */
.footer-bg img {
    display: block;
    max-width: 100px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
}