/* 1fit2fit — portal.1fit2fit.com
 * Colours from live portal CSS variables (--primary-color / --secondary-color).
 */
:root {
    --brand-primary-color: #2663eb;
    --brand-primary-color-dark: #182c2d;
    --brand-background-color: #182c2d;
    --brand-secondary-background: #4a7f83;
    --brand-text-color: #ffffff;
    --brand-login-background: #182c2d;
    --brand-login-container-bg: #ffffff;
    --highlight-color: #2663eb;
    --header-bg: #182c2d;
    --header-text-color: #ffffff;
    --header-link-bg: rgba(38, 99, 235, 0.4);
    --header-link-hover-bg: var(--brand-primary-color);
    --header-btn-hover-text: #ffffff;
    --footer-bg: var(--header-bg);
    --auth-page-bg: #182c2d;
    --auth-page-gradient-mid: #1b0e53;
    --auth-page-gradient-end: #2663eb;
    --auth-submit-bg: var(--brand-primary-color);
    --auth-focus-color: var(--brand-primary-color);
    --auth-link-color: #4a7f83;
    --auth-nav-bg: rgba(24, 44, 45, 0.75);
    --auth-nav-border: rgba(255, 255, 255, 0.1);
    --auth-nav-link-color: #ffffff;
    --product-hub-footer-bg: rgba(24, 44, 45, 0.88);
    --product-hub-footer-heading-color: #93c5fd;
    --product-hub-footer-text-color: #f8fafc;
    --product-hub-footer-muted-color: rgba(226, 232, 240, 0.82);
    --product-hub-footer-link-color: #60a5fa;
    --product-hub-footer-link-hover-color: #bfdbfe;
    --product-hub-footer-border-color: rgba(255, 255, 255, 0.12);
}

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

.product-hub-portal-shell {
    background-color: var(--auth-page-bg) !important;
    background-image: linear-gradient(
        165deg,
        var(--auth-page-bg) 0%,
        var(--auth-page-gradient-mid) 45%,
        var(--auth-page-gradient-end) 100%
    ) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100vh !important;
}

.product-hub-portal-shell > main,
.product-hub-portal-shell main.brand-primary-bg {
    background-color: transparent !important;
    background-image: none !important;
}

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(--brand-primary-color) !important;
    color: #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;
}

.kinetic-auth-page {
    background-color: var(--auth-page-bg) !important;
    background-image: linear-gradient(
        165deg,
        var(--auth-page-bg) 0%,
        var(--auth-page-gradient-mid) 45%,
        var(--auth-page-gradient-end) 100%
    ) !important;
}

.brand-secondary-bg {
    background-color: var(--brand-secondary-background);
}

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

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

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

.category-background {
    background-color: var(--footer-bg);
}

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

.btn-brand-primary {
    background-color: var(--brand-primary-color);
    color: var(--brand-text-color);
    transition: background-color 0.3s ease;
}

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

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

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

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

.header-btn-bg {
    background-color: var(--header-link-bg);
    color: var(--header-text-color);
    border-radius: 0.5rem;
}

.header-btn-text {
    color: var(--header-text-color);
}

.header-btn-hover-text {
    color: var(--header-btn-hover-text);
}

.header-icon-bg {
    background-color: transparent;
    color: var(--header-text-color);
}

.header-icon-bg:hover {
    background-color: var(--header-link-hover-bg);
    color: var(--header-btn-hover-text);
}

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

.footer-active-icon-bg {
    background-color: var(--brand-primary-color);
}

.footer-inactive-icon-bg {
    background-color: var(--header-link-bg);
}

.footer-icon-color {
    color: #ffffff;
}

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

.product-hub-portal-surface,
.kinetic-portal-surface {
    min-height: 100vh;
}

.product-hub-portal-surface .policy-portal-section {
    color: #fff;
}

.product-hub-portal-surface .policy-portal-section h1 {
    color: #fff;
}

.product-hub-portal-surface .policy-body {
    --tw-prose-body: #f1f5f9;
    --tw-prose-headings: #fff;
    --tw-prose-links: #93c5fd;
}

.product-hub-portal-surface .policy-body :is(p, li, td, th, span, div) {
    color: #f1f5f9 !important;
}

.product-hub-portal-surface .policy-body :is(h1, h2, h3, h4, h5, h6) {
    color: #fff !important;
}

.product-hub-portal-surface .policy-body a {
    color: #93c5fd !important;
    text-decoration: underline !important;
    text-underline-offset: 0.15em;
}

.product-hub-portal-surface .policy-body a:hover {
    color: #bfdbfe !important;
    text-decoration: underline !important;
}

.product-hub-portal-surface .contact-field {
    background-color: var(--brand-secondary-background);
    color: #fff;
}

.product-hub-portal-surface .contact-field::placeholder {
    color: rgba(255, 255, 255, 0.65);
}