:root {
    --bs-primary: #0782bb !important;
    --bs-primary-rgb: 7, 130, 187 !important;
    --bs-secondary: #59889e !important;

    --bs-primary-50: #E1F2F9 !important;
    --bs-primary-100: #B3E0F2 !important;
    --bs-primary-200: #80CCE9 !important;
    --bs-primary-300: #4DB7E0 !important;
    --bs-primary-400: #26A3D6 !important;
    --bs-primary-500: #0782BB !important;
    --bs-primary-600: #056FA1 !important;
    --bs-primary-700: #045D87 !important;
    --bs-primary-800: #034C6E !important;
    --bs-primary-900: #023A54 !important;

    --bs-accent: #F5A623;
    --bs-success: #1FA974;
    --bs-warning: #F6B93B;
    --bs-danger: #E74C3C;
    --bs-info: #17A2B8;
}

/* =========================================================
   SMARTDOG TYPOGRAPHY SYSTEM
   ========================================================= */

/* ---- Font variables ---- */
:root {
    --sd-font-primary: "Inter", "Helvetica Neue", Arial, sans-serif;
    --sd-font-secondary: "Poppins", "Segoe UI", sans-serif;

    --sd-heading-color: #0f1b2d;
    /* main text color */
    --sd-heading-color-alt: var(--bs-primary-800);
    --sd-body-color: #344054;
    --sd-muted-color: #6b7a90;
    --sd-line-height: 1.4;
}

/* ---- Base text styles ---- */
body {
    font-family: var(--sd-font-primary);
    color: var(--sd-body-color);
    line-height: var(--sd-line-height);
    font-size: 1rem;
}

/* =========================================================
   HEADINGS
   ========================================================= */

/* h1 – used for page hero or key banners */
h1,
.h1 {
    font-family: var(--sd-font-secondary);
    font-weight: 700;
    color: var(--sd-heading-color);
    line-height: 1.1;
    font-size: clamp(2rem, 5vw, 3rem);
}

/* h2 – section headers (e.g., “Why SmartDog”) */
h2,
.h2 {
    font-family: var(--sd-font-secondary);
    font-weight: 600;
    color: var(--sd-heading-color);
    line-height: 1.2;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
}

/* h3 – sub-section headers */
h3,
.h3 {
    font-family: var(--sd-font-secondary);
    font-weight: 600;
    color: var(--sd-heading-color);
    line-height: 1.25;
    font-size: clamp(1.5rem, 3.5vw, 1.85rem);
}

/* h4 – card titles / feature titles */
h4,
.h4 {
    font-weight: 600;
    color: var(--sd-heading-color);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
}

/* h5 – smaller UI headings */
h5,
.h5 {
    font-weight: 600;
    color: var(--sd-heading-color);
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
}

/* h6 – smallest caption titles */
h6,
.h6 {
    font-weight: 600;
    color: var(--sd-muted-color);
    text-transform: uppercase;
    font-size: clamp(0.9rem, 2vw, 1rem);
    letter-spacing: 0.05em;
}

/* =========================================================
   BODY TEXT / PARAGRAPHS
   ========================================================= */

p,
.text-base {
    color: var(--sd-body-color);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.text-muted {
    color: var(--sd-muted-color);
}

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

.text-secondary {
    color: var(--bs-secondary) !important;
}

.text-accent {
    color: var(--bs-accent) !important;
}

/* =========================================================
   FONT WEIGHT UTILITIES
   ========================================================= */
.fw-light {
    font-weight: 300 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

/* =========================================================
   RESPONSIVE UTILS
   ========================================================= */

/* Slightly tighter headings on mobile */
@media (max-width: 767px) {

    h1,
    .h1 {
        font-size: clamp(1.8rem, 7vw, 2.3rem);
    }

    h2,
    .h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    h3,
    .h3 {
        font-size: clamp(1.3rem, 5vw, 1.7rem);
    }
}
/* ===== SMARTDOG rounded form controls + buttons ===== */

/* Shared tokens */
:root {
    --sd-input-bg: #fff;
    --sd-input-border: rgba(0, 0, 0, .12);
    --sd-input-text: #171c26;
    --sd-input-placeholder: #8a94a6;
    --sd-focus-ring: rgba(var(--bs-primary-rgb), .35);
}

/* Base rounded controls */
.sd-input,
.sd-select,
.sd-textarea {
    background-color: var(--sd-input-bg);
    color: var(--sd-input-text);
    border: 1px solid var(--sd-input-border);
    transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
    outline: none;
}

/* pill radius for inputs/selects, softer radius for textareas */
.sd-input,
.sd-select {
    border-radius: 999px;
    padding: .75rem 1rem;
    line-height: 1.25;
}

.sd-textarea {
    border-radius: 16px;
    padding: .875rem 1rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 120px;
}

/* Placeholder */
.sd-input::placeholder,
.sd-select::placeholder,
.sd-textarea::placeholder {
    color: var(--sd-input-placeholder);
    opacity: 1;
}

/* Hover */
.sd-input:hover,
.sd-select:hover,
.sd-textarea:hover {
    border-color: rgba(0, 0, 0, .22);
}

/* Focus */
.sd-input:focus,
.sd-select:focus,
.sd-textarea:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem var(--sd-focus-ring);
}

/* Disabled / read-only */
.sd-input:disabled,
.sd-select:disabled,
.sd-textarea:disabled,
.sd-input[readonly],
.sd-select[readonly],
.sd-textarea[readonly] {
    background-color: #f3f5f8;
    color: #8892a4;
    cursor: not-allowed;
}

/* Validation helpers (optional) */
.is-invalid.sd-input,
.is-invalid.sd-select,
.is-invalid.sd-textarea {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 .25rem rgba(231, 76, 60, .2) !important;
}

.is-valid.sd-input,
.is-valid.sd-select,
.is-valid.sd-textarea {
    border-color: var(--bs-success) !important;
    box-shadow: 0 0 0 .25rem rgba(31, 169, 116, .2) !important;
}

/* ===== Buttons ===== */

.sd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 700;
    line-height: 1.1;
    padding: .85rem 1.35rem;
    border-radius: 999px;
    /* pill */
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .05s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    text-decoration: none;
    user-select: none;
}

/* Primary (brand) */
.sd-btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.sd-btn-primary:hover {
    filter: brightness(0.98);
}

.sd-btn-primary:active {
    transform: translateY(1px);
}

.sd-btn-primary:focus {
    box-shadow: 0 0 0 .3rem var(--sd-focus-ring);
}

/* Outline */
.sd-btn-outline-primary {
    background-color: transparent;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.sd-btn-outline-primary:hover {
    background-color: var(--bs-primary);
    color: #fff;
}

/* Soft (subtle background) */
.sd-btn-soft-primary {
    background-color: var(--bs-primary-50);
    color: var(--bs-primary-700);
    border-color: var(--bs-primary-100);
}

.sd-btn-soft-primary:hover {
    background-color: var(--bs-primary-100);
    color: var(--bs-primary-800);
    border-color: var(--bs-primary-200);
}

/* Sizes (optional) */
.sd-btn-sm {
    padding: .55rem 1rem;
    font-size: .875rem;
}

.sd-btn-lg {
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
}

/* Disabled */
.sd-btn:disabled,
.sd-btn.disabled {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- SMARTDOG: Blue hero background (no text color changes) --- */

/* Split background: softer blue on the left, slightly stronger on the right */
.skin-specialist-banner.theme-blue {
    /* Use your existing palette variables */
    background: linear-gradient(90deg,
            var(--bs-primary-50) 0%,
            var(--bs-primary-50) 50%,
            var(--bs-primary-100) 50%,
            var(--bs-primary-100) 100%);
}

/* Optional: slight depth overlay—very subtle, can remove if you like */
.skin-specialist-banner.theme-blue::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(80rem 45rem at 70% 40%,
            rgba(0, 0, 0, 0.04),
            transparent 60%);
}

/* Keep your layout wide/edge-to-edge like before (optional) */
.skin-specialist-banner.theme-blue .container-fluid {
    max-width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

/* Make inline or <img> SVGs take the primary color */
.iq-icon-box .iq-img-area img[src$=".svg"] {
    filter: invert(33%) sepia(80%) saturate(1571%) hue-rotate(177deg) brightness(96%) contrast(101%);
}

/* Optional: On hover, darken slightly */
.iq-icon-box:hover .iq-img-area img[src$=".svg"] {
    filter: invert(22%) sepia(99%) saturate(2013%) hue-rotate(175deg) brightness(93%) contrast(105%);
}