:root {

    --spk-black: #393D46;
    --spk-white: #FFFFFF;
    --spk-gray: #EEEEEE;
    --spk-bdr-gray: #D5D7DA;
    --spk-red: #F97066;
    --spk-yellow: #FEC92D;
    --spk-green: #3CCB7F;
    --spk-txt-red: #EA4335;
    --spk-txt-gray: #D9D9D9;
    --spk-txt-gray-dark: #A4A7AE;
    --spk-txt-gray-medium: #B9B9B9;
    --spk-txt-black: #393D46; /* Sparkle's black everywhere — was #181D27 (Paul 2026-09-28) */
    --spk-txt-chark-black: #535862;

    --spk-black-8-per: rgba(0, 0, 0, 0.08);

    --font-thin: 100;
    --font-extra-light: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extra-bold: 800;
    --font-black: 900;

}

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

html,
body {
    padding: 0;
    margin: 0 auto !important;
    width: 100%;
    left: 0;
    right: 0;
    font-family: "Poppins", sans-serif;
}

#sparkle-app .container{padding: 0;}

#sparkle-app h1,
#sparkle-app h2,
#sparkle-app h3,
#sparkle-app h4{
    font-family: 'HelveticaNeue';
    font-weight: 700;
    color: var(--spk-black);
    margin-bottom: 24px;
    letter-spacing: -2%;
}

#sparkle-app h4.spark-title{font-family: "Poppins", sans-serif; margin-bottom: 18px; }

#sparkle-app p,
#sparkle-app ul,
#sparkle-app li,
#sparkle-app a {
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
    color: var(--spk-black);
    text-decoration: none;
}





#sparkle-app h1 {
    font-size: 36px;
}

#sparkle-app h2 {
    font-size: 36px;
}

#sparkle-app h3 {
    font-size: 30px;
}

#sparkle-app h4 {
    font-size: 14px;
}

#sparkle-app small {
    font-size: 10px;
}

/* Paragraph copy is 14px / 21px on every page and every width, hero subheadings included
   (Sparkle, via Paul 2026-09-28; it was 16px on desktop from 2026-09-25, and 12px before that).
   Labels that happen to be <p> (breed, Member Since, salon location, hints, footer, See Details
   and plan rows) stay small; they are listed below.
   All text is Sparkle's black (#393D46) unless a rule says otherwise: Bootstrap's default
   (#212529) showed through on a few labels and names. */
body#sparkle-app {
    color: var(--spk-black);
    --bs-body-color: #393D46;
}
#sparkle-app p {
    font-size: 14px;
    line-height: 21px;
}
#sparkle-app p.spark-profile-pet-since,
#sparkle-app p.spark-profile-pet-breed,
#sparkle-app p.spark-salon-location,
#sparkle-app p.spark-field-hint,
#sparkle-app p.spark-sidebar-user-name,
#sparkle-app .spark-footer p,
#sparkle-app .spark-recommendad-care-content p,
#sparkle-app .spark-plan-category-content p {
    font-size: 12px;
    line-height: 18px;
}
/* The same sizes are repeated at the end of this file, so they win over rules in between. */

#sparkle-app p strong {
    font-weight: var(--font-bold);
}

#sparkle-app .spark-hiden {display: none !important;}
#sparkle-app .spark-show {display: block !important;}

#sparkle-app .spark-color-red{color: var(--spk-red);}
#sparkle-app .spark-color-green{color: var(--spk-green);}
#sparkle-app .spark-color-yellow{color: var(--spk-yellow);}

#sparkle-app .spark-sub-title {font-size: 20px; font-weight: var(--font-light); line-height: 30px;}




#sparkle-app .spark-medium {font-size: 14px; font-weight: var(--font-normal); line-height: 21px; font-family: "Poppins", sans-serif;}
#sparkle-app .spark-medium strong{font-weight: var(--font-bold);}

#sparkle-app .spark-medium-12 {font-size: 12px; font-weight: var(--font-medium); line-height: 18px; font-family: "Poppins", sans-serif;}

#sparkle-app .spark-body-content .spark-hero h4{font-weight: var(--font-normal); font-family: "Poppins", sans-serif; line-height: 21px;}
/* The dashboard's hero sits outside .spark-body-content, so "How can we help you today?" was bold (Paul, 2026-09-25). */
#sparkle-app #js-dashboard-main .spark-hero h4{font-weight: var(--font-normal); font-family: "Poppins", sans-serif; line-height: 21px;}



/* A pet / profile page hosted in the dashboard's right panel (layouts/module sets .sparkle-in-frame,
   Paul 2026-09-25). The frame is right-column width, so the page is in its phone layout: drop its
   header, footer and side gutters so it lines up with the column like the dashboard's own panes. */
html.sparkle-in-frame, html.sparkle-in-frame body { background: #fff; }
html.sparkle-in-frame #sparkle-app .spark-main header,
html.sparkle-in-frame #sparkle-app .spark-desktop-card > header,
html.sparkle-in-frame #sparkle-app footer.spark-footer { display: none !important; }
html.sparkle-in-frame #sparkle-app .spark-main { min-height: 0; padding: 0; }
html.sparkle-in-frame #sparkle-app .spark-desktop-body,
html.sparkle-in-frame #sparkle-app .spark-body-content { padding-left: 0; padding-right: 0; padding-bottom: 24px; }
/* The frame starts at the dashboard's header line; Back sits 23px under it, level with the left column's
   first label, as the dashboard's own right-panel Back does (responsive.css, Paul 2026-09-25). */
html.sparkle-in-frame #sparkle-app .spark-back-btn-wrap { margin-top: 23px; }
/* The dashboard's left column already has Visit History, Documents, Settings, Help and Sign Out, so
   the profile's own rows for them aren't repeated beside it (Paul 2026-09-25, 2026-09-28). */
html.sparkle-in-frame #sparkle-app .spark-profile-menu-help,
html.sparkle-in-frame #sparkle-app .spark-profile-menu-dup { display: none; }

/* Paragraph copy on desktop: 14px / 21px, the same as phones (see the paragraph note above). Last in
   the file so it wins over the rules above; the right panel on desktop frames a page in its phone layout. */
@media (min-width: 768px) {
    #sparkle-app p,
    #sparkle-app p.spark-medium,
    #sparkle-app .spark-hero h4,
    #sparkle-app .spark-body-content .spark-hero h4,
    #sparkle-app #js-dashboard-main .spark-hero h4 {
        font-size: 14px;
        line-height: 21px;
    }
}
html.sparkle-in-frame #sparkle-app p,
html.sparkle-in-frame #sparkle-app p.spark-medium,
html.sparkle-in-frame #sparkle-app .spark-hero h4,
html.sparkle-in-frame #sparkle-app .spark-body-content .spark-hero h4 {
    font-size: 14px;
    line-height: 21px;
}
html.sparkle-in-frame #sparkle-app p.spark-profile-pet-since,
html.sparkle-in-frame #sparkle-app p.spark-profile-pet-breed,
html.sparkle-in-frame #sparkle-app p.spark-salon-location,
html.sparkle-in-frame #sparkle-app p.spark-field-hint,
html.sparkle-in-frame #sparkle-app .spark-recommendad-care-content p,
html.sparkle-in-frame #sparkle-app .spark-plan-category-content p {
    font-size: 12px;
    line-height: 18px;
}

/* Phones: room under the last element of every page. The footer is hidden below 990px, so a page
   ended right at its last button, and iPhone Safari's floating toolbar (iOS 26) sat on top of it
   with nothing left to scroll — Continue on Date + Time was unreachable (Paul 2026-09-27, iPhone
   17 Pro Max). Not inside the dashboard's right-panel frame, which has no browser bar of its own. */
@media (max-width: 767px) {
    html:not(.sparkle-in-frame) #sparkle-app .spark-main {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}