/* ─── Desktop / Tablet layout shell ─────────────────────────────────────────
   Mobile  : < 768px  — zero changes, all existing styles apply as-is
   Tablet  : 768px+   — centered card with gray page background
   Desktop : 1024px+  — wider card
   ─────────────────────────────────────────────────────────────────────────── */

/* Desktop sidebar nav hidden on mobile */
#sparkle-app .spark-desktop-sidebar-nav {
    display: none;
}

/* Line break that only applies on mobile (see landing hero headline) */
#sparkle-app .spark-mobile-break {
    display: none;
}




@media (max-width: 767px) {
    #sparkle-app .spark-desktop-sidebar{
        display: none;
    }
    #sparkle-app .spark-mobile-break {
        display: inline;
    }
}
@media (min-width: 768px) {
    /* Page background */
    html,
    body {
        background-color: #ffffff;
    }

    /* Outer shell — centers the card on the page */
    #sparkle-app .spark-main {
        min-height: 100vh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 32px 16px 64px;
        box-sizing: border-box;
        padding-top: 0;
    }

    /* The card */
    #sparkle-app .spark-desktop-card {
        background-color: #fff;
        /* border-radius: 16px; */
        /* box-shadow: 0 4px 24px rgba(0,0,0,0.08); */
        width: 100%;
        max-width: 860px;
    }

    /* Top nav bar inside the card */
    #sparkle-app .spark-desktop-card > header {
        width: 1152px;
        height: 110px;
        margin: 0 auto;
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #sparkle-app .spark-desktop-card > header nav {
        width: 100%;
    }

    /* Full-screen mobile nav — never show on desktop */
    /* #sparkle-app .full-width-navigation {
        display: none !important;
    } */

    /* Hamburger button — hide on desktop */
    /* #sparkle-app .spark-menu-bar {
        display: none;
    } */

    /* ── Dashboard two-column layout ─────────────────────────────────────── */

    /* Wrapper that creates the two-column split */
    #sparkle-app .spark-desktop-body {
        display: flex;
        align-items: stretch;
        min-height: 600px;
        width: 715px;
        margin: 0 auto;
        padding: 0;
    }

    /* LEFT: js-dashboard-main acts as the persistent sidebar on desktop */
    #sparkle-app .spark-desktop-left {
        width: 329px;
        flex-shrink: 0;
        /* border-right: 1px solid var(--spk-bdr-gray); */
        /* overflow-y: auto; */
    }

    /* LEFT inner padding — matches design frame */
    #sparkle-app .spark-desktop-left #js-dashboard-main {
        display: block !important;
        /* padding: 24px 24px 32px; */
    }

    /* Remove spark-body-content side padding inside left pane (uses own padding) */
    #sparkle-app .spark-desktop-left .spark-body-content {
        padding-left: 0;
        padding-right: 0;
    }

    /* Hide mobile callout menu on desktop — sidebar nav replaces it */
    #sparkle-app .spark-desktop-left .spark-callout-wrap-dashboard {
        display: none;
    }

    /* RIGHT: sub-panels area */
    #sparkle-app .spark-desktop-right {
        flex: 1;
        min-width: 0;
    }

    /* Right-side spark-body-content padding */
    #sparkle-app .spark-desktop-right .spark-body-content {
        /* padding-left: 32px;
        padding-right: 32px; */
        padding: 0;
        padding-top: 78px;
    }

    /* Desktop sidebar nav (Visit History, Documents, etc.) */
    #sparkle-app .spark-desktop-sidebar-nav {
        display: block;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #sparkle-app .spark-desktop-sidebar-nav li a,
    #sparkle-app .spark-desktop-sidebar-nav li button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 0;
        font-size: 14px;
        font-weight: var(--font-semibold);
        font-family: "Poppins", sans-serif;
        color: var(--spk-black);
        text-decoration: none;
        background: transparent;
        border: none;
        border-top: 1px solid var(--spk-bdr-gray);
        cursor: pointer;
        text-align: left;
        box-sizing: border-box;
    }

    #sparkle-app .spark-desktop-sidebar-nav li a:hover,
    #sparkle-app .spark-desktop-sidebar-nav li button:hover {
        color: var(--spk-txt-gray-dark);
    }

    #sparkle-app .spark-desktop-sidebar-nav li a svg,
    #sparkle-app .spark-desktop-sidebar-nav li button svg {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
    }

    /* Sign Out link in desktop left pane */
    #sparkle-app .spark-desktop-signout {
        margin-top: 8px;
        border-top: 1px solid var(--spk-bdr-gray);
        padding-top: 8px;
    }

    #sparkle-app .spark-main header .spark-nav-inner {
        padding-left: 0;
        padding-right: 0;
    }

    /* Paul 2026-09-25: Back → heading is 24px on every page and width (button.css), so the hero
       under a Back keeps its 20px on desktop too. Only the booking page's first step has no Back
       above its headline (its Back is hidden until a step opens), so it stays flush there. */
    #sparkle-app.sparkle-booking #js-dashboard-step .spark-hero-top-pad-20 {
        padding-top: 0;
    }

    /* Paul 2026-09-25: "Welcome back, {name}." on one line on desktop — the 329px left column
       wrapped it. It runs over the empty space above the right column, which starts below the
       header line. */
    #sparkle-app.sparkle-dashboard #js-dashboard-main .spark-hero h1 {
        white-space: nowrap;
    }

    #sparkle-app .spark-desktop-body {
        position: relative;
    }
    #sparkle-app .spark-desktop-body::before {
        position: absolute;
        width: 1px;
        height: 100%;
        background-color: #d5d7da;
        content: "";
        top: 78px;
        left: 369px;
    }
    #sparkle-app .spark-desktop-body::after {
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #d5d7da;
        content: "";
        top: 78px;
        left: 0;
    }

    #sparkle-app
        .spark-desktop-left
        #js-dashboard-main
        .spark-hero
        + .spark-action-required-wrap
        .spark-divid-line:first-child,
    #sparkle-app.sparkle-dashboard .spark-desktop-left #js-dashboard-main .spark-divid-line.spark-dashboard-responsive-divid-line {
        background-color: transparent;
    }
    /* Paul 2026-09-25 (Figma): the left column's first label ("My Profile") sits 24px under the header
       line and on the same line as the right panel's Back. This (transparent) divider lands 22px under
       the line — the hero's last margin collapses into its top margin — so 22 + 1 + 1 = 24. */
    #sparkle-app.sparkle-dashboard .spark-desktop-left #js-dashboard-main .spark-divid-line.spark-dashboard-responsive-divid-line {
        margin-bottom: 1px;
    }
    /* …and the right panel's Back 23px under the line, centred on that label (the panel starts at the line). */
    #sparkle-app.sparkle-dashboard .spark-desktop-right .spark-back-btn-wrap {
        margin-top: 23px;
    }
    #sparkle-app.sparkle-dashboard .spark-desktop-left #js-dashboard-main .spark-divid-line.spark-dashboard-responsive-divid-line-v2 {
        background-color: transparent;
    margin-bottom: 0;
    margin-top: 18px;
    }

    #sparkle-app .spark-callout-wrap-dashboard ul li a:last-child {
        border-bottom: none !important;
    }

    #sparkle-app .spark-member-join-card {
        margin-bottom: 24px;
    }

    #sparkle-app .container {
        width: 715px;
        max-width: 715px;
    }

    /* One column width for every single-column page (2026-09-23). Previously repeated
       per page class, which meant a new page silently had no width at all — /login/phone
       was full-bleed because its rule was scoped to .sparkle-index. The two opt-outs
       below are both more specific, so source order does not matter. */
    #sparkle-app .spark-body-content {
        width: 450px;
        margin: 0 auto;
    }

    /* Two-pane pages size their own content; the right pane is only 310-375px. */
    #sparkle-app .spark-desktop-body .spark-body-content {
        width: auto;
        margin: 0;
    }

    /* The landing page is a wide 50/50 split, not a column. */
    #sparkle-app.sparkle-index .spark-body-content {
        width: auto;
        margin: 0;
    }

    #sparkle-app.sparkle-home .spark-body-content {
        padding: 0;
    }


    /* The landing page opts out above, so its inline sign-in panels set their own width. */
    #sparkle-app.sparkle-index #js-phone-panel,
    #sparkle-app.sparkle-index #js-otp-panel {
        width: 450px;
        margin: 0 auto;
    }


    #sparkle-app .spark-desktop-right {
        width: 310px;
        flex: unset;
    }

    #sparkle-app .spark-desktop-left {
        width: 329px;
    }

     #sparkle-app .spark-desktop-body {
    justify-content: space-between;
  }

    /* Hide left-column copies on desktop — right panel takes over */
    #sparkle-app .spark-action-left-only,
    #sparkle-app .spark-upcoming-left-only,
    #sparkle-app .spark-book-btn-left-only {
        display: none;
    }
    #sparkle-app #js-dashboard-action-required-panel .js-action-alert:first-child .spark-divid-line {
        display: none;
    }

}

@media (max-width: 990px) {
    #sparkle-app.sparkle-index .spark-body-content .spark-panel-content-wrapper .sty-spark-landing-image-wrapper, 
    #sparkle-app .spark-footer{
        display: none;
    } 
}

@media (min-width: 991px) {

    html, body{
        height: 100%;
    }
    body#sparkle-app{
        display: flex;
  flex-direction: column;
  height: 100%;
    }

    #sparkle-app .spark-main{
        flex: 1;
    min-height: unset;
    }

     #sparkle-app .container {
    width: 945px;
    max-width: 945px;
    padding: 0 16px;
  }

  #sparkle-app .spark-desktop-body{
    width: 785px;
  }

  #sparkle-app .spark-body-content{
    padding: 0;
  }
    #sparkle-app .spark-desktop-card {
        max-width: 991px;
    }

    #sparkle-app .spark-desktop-right {
        width: 375px;
        flex: unset;
    }

    #sparkle-app .spark-desktop-left {
        width: 329px;
    }

    #sparkle-app .spark-desktop-body {
        justify-content: space-between;
    }

    #sparkle-app h1 {
        font-size: 48px;
        line-height: 56px;
    }

    #sparkle-app .spark-profile-swap-wrap h1 {
        font-size: 36px;
        line-height: 44px;
    }

    #sparkle-app.sparkle-index .spark-body-content .spark-panel-content-wrapper .sty-spark-landing-image-wrapper{
        display: block;
    } 
    #sparkle-app.sparkle-index .spark-body-content .spark-panel-content-wrapper{
        display: flex;
    } 

      #sparkle-app.sparkle-index .spark-body-content .spark-panel-content-wrapper .sty-panel-content-wrapper{
        width: 50%;
        padding-right: 110px;
      }
     #sparkle-app.sparkle-index .spark-body-content .spark-panel-content-wrapper .sty-spark-landing-image-wrapper{
        width: 50%;
        
      }

      #sparkle-app.sparkle-index .spark-body-content .spark-panel-content-wrapper .sty-spark-landing-image-wrapper img{
        width: 100%;
      }

      #sparkle-app .spark-footer{
        margin-bottom: 24px;
      }
      #sparkle-app .spark-footer .spark-foote-divide-wrap{
        display: flex;
        margin-bottom: 24px;
      }

      #sparkle-app .spark-footer .spark-foote-divide-wrap .spark-footer-item{
        width: 50%;
      }
      #sparkle-app .spark-footer .spark-foote-divide-wrap .spark-footer-item.spark-item-rigth{
        text-align: right;
      }
        #sparkle-app .spark-footer .spark-foote-divide-wrap .spark-footer-item .spark-footer-action{
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: right;
      }

    #sparkle-app .spark-footer .spark-foote-divide-wrap .spark-footer-item .spark-footer-action a ,  #sparkle-app .spark-footer .spark-foote-divide-wrap .spark-footer-item p{
        font-size: 11px;
        line-height: 20px;
        font-weight: var(--font-normal);
        color: var(--spk-txt-gray-medium);
    }

    #sparkle-app .spark-footer .spark-foote-divide-wrap .spark-footer-item .spark-footer-action a{
        position: relative;
        padding: 0 15px;
    }
    #sparkle-app .spark-footer .spark-foote-divide-wrap .spark-footer-item .spark-footer-action a:last-child{
        padding-right: 0;
    }
    #sparkle-app .spark-footer .spark-foote-divide-wrap .spark-footer-item .spark-footer-action a:before{
        position: absolute;
        content: "";
        width: 1px;
        height: 15px;
        background-color: var(--spk-txt-gray-medium);
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        
    }

      #sparkle-app .spark-footer .spark-foote-divide-wrap .spark-footer-item .spark-footer-action a:first-child:before{
        display: none;
    }

    body#sparkle-app.sparkle-profile .spark-profile-left h1{
        font-size: 48px;
    line-height: 56px;
    }

    #sparkle-app .spark-desktop-right h1{
        font-size: 36px;
    line-height: 44px;
    }

    #sparkle-app.sparkle-index .spark-btn-group.spark-btn-group-login-social a.btn{
        display: none;
    }
    #sparkle-app.sparkle-index .spark-btn-group.spark-btn-group-login-social a.btn:first-child{
        display: flex;
    }
}

@media (min-width: 1170px) {
    #sparkle-app .container{
        width: 1152px;
        max-width: 1152px;
        padding: 0;
    }

     #sparkle-app .spark-desktop-card {
        max-width: 1152px;
        height: 100%;
    }

    #sparkle-app .spark-body-content{
        padding: 0;
    }

    #sparkle-app.sparkle-index .spark-body-content .spark-panel-content-wrapper .sty-panel-content-wrapper{
        padding-right: 201px;
    }
}

/* Dashboard right panel hosting a pet / profile page (dashboard.js mountFrame, Paul 2026-09-25).
   The framed page brings its own Back, so the pane's is hidden; the frame is sized to its content. */
#sparkle-app .spark-pane-framed > .spark-back-btn-wrap { display: none; }
#sparkle-app iframe.spark-pane-frame { display: block; width: 100%; min-height: 480px; border: 0; }