/* Brook Mays Rental Site — Crescendo Design System */

/* ===========================================
   Skip-to-content link (WCAG 2.4.1)
   Hidden until focused via keyboard Tab.
   =========================================== */
.skip-to-content {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    z-index: 10000;
    /* Reset button styles */
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.skip-to-content:focus {
    position: fixed !important;
    top: 8px;
    left: 8px;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 12px 24px;
    background: var(--cr-primary, #A31E23);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   Visually-hidden utility (WCAG — screen-reader only)
   Equivalent to Bootstrap's sr-only / visually-hidden.
   Use for text that must be read by screen readers but hidden visually,
   e.g. empty table-header captions (<th><span class="sr-only">Actions</span></th>).
   =========================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===========================================
   CSS Variables (Crescendo Tokens)
   Tenant-specific values set via .tenant-brookmays / .tenant-fishburn in crescendo.css
   These are fallback defaults for pages outside the tenant wrapper.
   =========================================== */
:root {
    --cr-primary: #A31E23;
    --cr-primary-dark: #8A191D;
    --cr-primary-light: rgba(163, 30, 35, 0.08);
    --cr-accent: #C4C7C8;
    --cr-bg-off: #FAFAFA;
    --cr-charcoal: #1A1A1A;
    --cr-text-grey: #6B6B6B;
    --cr-white: #FFFFFF;
    --cr-border-radius: 2px;
    --cr-info-bg: #f5f5f5;
}

/* Internal page header styles are inline on the <header> element in RentalLayout.razor */

.tenant-brookmays {
    --cr-primary-light: rgba(163, 30, 35, 0.08);
    --cr-info-bg: #f5f5f5;
}

.tenant-fishburn {
    --cr-primary-light: rgba(139, 105, 20, 0.08);
    --cr-info-bg: #FBF8F3;
}

/* ===========================================
   Base Styles
   =========================================== */
html, body {
    font-family: 'Inter', 'Roboto', sans-serif;
    background-color: var(--cr-bg-off);
    color: var(--cr-charcoal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', 'Roboto', serif;
    font-weight: 600;
}

/* ===========================================
   Link Styles
   =========================================== */
a {
    color: var(--cr-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ===========================================
   Button Overrides
   =========================================== */
.mud-button-filled.mud-button-primary {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
}

.mud-button-filled.mud-button-primary:hover {
    filter: brightness(1.1);
}

/* ===========================================
   Card Styles — inherit from theme
   =========================================== */
.mud-card-content {
    padding: 16px;
}

/* ===========================================
   Form Styles — inherit border-radius from theme
   =========================================== */
.mud-input-label {
    font-family: 'Inter', sans-serif;
}

/* ===========================================
   Crescendo Utility Classes
   =========================================== */

/* Accent border (left) using primary color */
.cr-accent-border {
    border-left: 4px solid var(--cr-primary) !important;
}

/* Light primary tint background */
.cr-light-bg {
    background-color: var(--cr-primary-light) !important;
}

/* Info panel (neutral off-white) */
.cr-info-panel {
    background-color: var(--cr-info-bg) !important;
}

/* Selected state for option cards */
.cr-selected {
    border: 2px solid var(--cr-primary) !important;
    background-color: var(--cr-primary-light) !important;
}

/* Text color utilities */
.text-primary {
    color: var(--cr-primary) !important;
}

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

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

.bg-secondary {
    background-color: var(--cr-accent) !important;
}

/* ===========================================
   General Utility Classes
   =========================================== */
.shadow-sm {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.shadow-md {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cursor-pointer {
    cursor: pointer;
}

.h-100 {
    height: 100%;
}

.w-100 {
    width: 100%;
}

.flex-grow-1 {
    flex-grow: 1;
}

/* ===========================================
   Animations
   =========================================== */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================
   BM-branded info notices.
   Replaces Material's flat blue MudAlert Severity.Info
   with a tan/parchment surface + Hollyberry-red left rule,
   matching the warm-serif editorial system. Applies to:
     • .school-info-strip   — Pearson school context banner (MudAlert)
     • .bm-info-notice      — funnel-wide help/notice panels.
       Used on BOTH <MudAlert> (Important Notice on Make Payment)
       AND <MudPaper> (help panels on Faq / SchoolSearch / Cart /
       Make Payment / Contact). The selectors below are deliberately
       loose so either render path gets the same brand chrome. */
.school-info-strip,
.bm-info-notice {
    background-color: #FBF7EE !important;   /* soft parchment */
    color: #1A1A1A !important;              /* brand text-primary */
    border-left: 4px solid #A31E23;          /* Hollyberry rule */
    border-radius: 4px;
}

/* MudAlert Severity.Info sets a blue text color on inner .mud-typography /
   .mud-alert-message descendants that bleeds through the parent override.
   Force every descendant text element back to brand text-primary. */
.school-info-strip .mud-typography,
.school-info-strip .mud-alert-message,
.bm-info-notice .mud-typography,
.bm-info-notice .mud-alert-message,
.school-info-strip p,
.bm-info-notice p {
    color: #1A1A1A !important;
}

.school-info-strip .mud-alert-icon,
.bm-info-notice .mud-alert-icon {
    color: #A31E23 !important;               /* Hollyberry icon */
}

.school-info-strip a,
.bm-info-notice a,
.school-info-strip strong,
.bm-info-notice strong {
    color: #A31E23 !important;
}

/* ===========================================
   Page-title scale-down on small mobile (≤480 px).
   Default Mud Typo.h3 = 3rem = 48 px, which forces
   "Frequently Asked Questions" to wrap into 3 lines
   on 375 px wide. Bring it down to 2rem (32 px) so
   page titles fit on 1-2 graceful lines.
   =========================================== */
@media (max-width: 480px) {
    main h1.mud-typography-h3 {
        font-size: 2rem;
        line-height: 1.15;
    }
}

/* ===========================================
   Responsive Utilities
   =========================================== */
@media (max-width: 599px) {
    .hide-on-mobile {
        display: none !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .full-width-mobile {
        width: 100% !important;
    }
}

@media (min-width: 600px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* ===========================================
   Page-Specific Styles
   =========================================== */

/* Progress Stepper */
.mud-stepper .mud-step-label {
    font-size: 0.75rem;
}

/* Checkout Cards */
.checkout-section {
    margin-bottom: 24px;
}

/* Sticky Summary */
.sticky-summary {
    position: sticky;
    top: 80px;
}

@media (max-width: 959px) {
    .sticky-summary {
        position: relative;
        top: 0;
    }
}

/* ===========================================
   Print Styles
   =========================================== */
@media print {
    .no-print {
        display: none !important;
    }

    .mud-appbar,
    .rental-footer {
        display: none !important;
    }

    body {
        background: white;
    }
}

/* ===========================================
   Google Places Autocomplete Styles
   =========================================== */

/* Container for the autocomplete dropdown */
.google-autocomplete-dropdown {
    background-color: #fff;
    position: absolute;
    z-index: 1000;
    border-radius: 2px;
    border-top: 1px solid #d9d9d9;
    font-family: 'Inter', Arial, sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    overflow: hidden;
    display: none;
}

.google-autocomplete-dropdown::after {
    content: "";
    padding: 1px 1px 1px 0;
    height: 18px;
    box-sizing: border-box;
    text-align: right;
    display: block;
    background-image: url('https://rental.brookmays.com/images/template/powered_by_google_on_white.png');
    background-position: right;
    background-repeat: no-repeat;
    background-size: 120px 14px;
}

/* Individual prediction item */
.google-autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    border-top: 1px solid #e6e6e6;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    text-align: left;
    font-size: 13px;
    color: #515151;
    display: flex;
    align-items: center;
    gap: 8px;
}

.google-autocomplete-item:first-child {
    border-top: none;
}

.google-autocomplete-item:hover,
.google-autocomplete-item-active {
    background-color: #f1f1f1;
}

/* Location pin icon */
.google-pac-icon {
    width: 15px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background-image: url('https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png');
    background-position: -1px -161px;
    background-size: 34px 280px;
    flex-shrink: 0;
}

.google-pac-item-query {
    font-size: 13px;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
}

.google-pac-item-query span {
    margin-right: 3px;
}

.google-pac-matched {
    font-weight: 600;
}

/* SSN masked input — hides digits with dots when hidden */
.ssn-masked input {
    -webkit-text-security: disc;
    text-security: disc;
}

/* Powered by Google badge (shown at bottom of form) */
.powered-by-google {
    margin: 0.5em 0;
    height: 18px;
}

/* Address input wrapper for relative positioning */
.address-input-wrapper {
    position: relative;
}

/* ===========================================
   Director Recruitment Card
   On /select-instrument, when a primary music director is recorded for the
   school in Melody.SchoolTeachers, the .school-info-strip gains the
   .director-card class and renders a richer layout: circular avatar (photo
   or initials), eyebrow / name / role+program meta, optional enrollment
   stat, and optional welcome note.
   Chrome (parchment background + Hollyberry-red left rule) is inherited
   from .bm-info-notice (shipped in PR #9003).
   =========================================== */
.school-info-strip.director-card.mud-alert {
    padding: 18px 20px;
}

/* MudAlert wraps its child in a flex row with an icon column we don't use.
   Hide the icon slot when our content provides its own avatar. */
.school-info-strip.director-card.mud-alert .mud-alert-icon {
    display: none;
}

.director-card-content {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.director-photo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    background: #A31E23;
    overflow: hidden;
}

.director-photo-img {
    object-fit: cover;
    object-position: center;
}

.director-photo-initials {
    color: #FFFFFF;
    font-family: 'Playfair Display', 'DM Serif Display', serif;
    font-size: 22px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.director-text {
    flex: 1;
    min-width: 0;
}

.director-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #A31E23;
    margin-bottom: 4px;
}

.director-name {
    font-family: 'Playfair Display', 'DM Serif Display', serif;
    font-size: 22px;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 1.15;
    margin-bottom: 2px;
}

.director-meta {
    font-size: 13px;
    color: #595959;
    line-height: 1.5;
}

.director-meta .dot {
    margin: 0 6px;
    color: rgba(163, 30, 35, 0.4);
}

.director-stat {
    font-size: 13px;
    color: #1A1A1A;
    border-top: 1px solid rgba(163, 30, 35, 0.15);
    padding-top: 8px;
    margin-top: 10px;
}

.director-stat strong {
    font-family: 'Playfair Display', 'DM Serif Display', serif;
    font-weight: 500;
    color: #A31E23;
    margin-right: 2px;
}

.director-note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(163, 30, 35, 0.15);
}

.director-note-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #A31E23;
    margin-bottom: 6px;
}

.director-note p {
    font-family: 'Playfair Display', 'DM Serif Display', serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.55;
    color: #1A1A1A;
    margin: 0;
}

/* Mobile — tighten gutters but keep the avatar */
@media (max-width: 600px) {
    .director-card-content { gap: 14px; }
    .director-photo { width: 48px; height: 48px; }
    .director-photo-initials { font-size: 19px; }
    .director-name { font-size: 19px; }
}

/* ===========================================
   Motion Language v1 — site-wide patterns
   Hero fade-in cascade already ships in crescendo.css (.cr-hero-* uses
   crFadeUp with staggered delays). This block adds the remaining patterns
   from the audit so the rest of the funnel gets the same level of intent.

   Patterns (per agency audit Tier-C item):
     • bmFadeUp        — opacity+10px-up reveal, 240ms (general use)
     • bmHoverLift     — utility class for cards / link tiles not yet covered
     • bmBlurUp        — image loading state (solid placeholder → sharp)
     • prefers-reduced-motion guard at bottom

   These compose with the existing .category-card hover (PR #9003) and the
   .cr-hero-* hero animations.
   =========================================== */
@keyframes bmFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bm-fade-up {
    animation: bmFadeUp 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Stagger helpers — apply to siblings so a list reveals top-down. */
.bm-fade-up.bm-delay-1 { animation-delay: 80ms; }
.bm-fade-up.bm-delay-2 { animation-delay: 160ms; }
.bm-fade-up.bm-delay-3 { animation-delay: 240ms; }
.bm-fade-up.bm-delay-4 { animation-delay: 320ms; }

/* Generic hover-lift utility for any clickable surface that should respond
   like .category-card does. Shadow grows + 2 px Y rise, 180 ms timing. */
.bm-hover-lift {
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.bm-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Image blur-up. Stage 1: solid brand-tint placeholder shows while the
   actual <img> loads. Stage 2: 240 ms opacity fade when `loaded` class is
   applied. Eliminates the harsh "image pop" parents see on slow networks.

   Usage:
       <img class="bm-blur-up" src="..." onload="this.classList.add('loaded')" />
*/
.bm-blur-up {
    background-color: var(--cr-dove-grey, #C4C7C8);
    background-image: linear-gradient(135deg,
        rgba(163, 30, 35, 0.05) 0%,
        rgba(196, 199, 200, 0.4) 50%,
        rgba(163, 30, 35, 0.05) 100%);
    opacity: 0;
    transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bm-blur-up.loaded {
    opacity: 1;
    background-image: none;
    background-color: transparent;
}

/* Default Mud focus-visible ring uses primary; mute it slightly for cards
   so keyboard navigation through the funnel isn't visually noisy. */
.bm-hover-lift:focus-visible {
    outline: 2px solid rgba(163, 30, 35, 0.6);
    outline-offset: 2px;
}

/* ===========================================
   Round 15 — Unified focus-visible ring
   Apply the same branded focus ring to every interactive surface in the
   funnel so keyboard navigation feels consistent. Anchors, buttons, all
   the funnel-specific card classes, drawer label, and the hamburger
   button all get a 2 px Hollyberry outline with a 2 px offset. Using
   :focus-visible (not :focus) means mouse clicks DON'T trigger the
   ring — only true keyboard navigation does, matching modern UX.
   =========================================== */
.crescendo-nav a:focus-visible,
.crescendo-nav .cr-hamburger:focus-visible,
.cr-nav-cta:focus-visible,
.cr-btn-primary:focus-visible,
.cr-btn-secondary:focus-visible,
.category-card:focus-visible,
.instrument-select-card:focus-visible,
.item-card:focus-visible,
.instrument-skip-option:focus-visible,
.btn-primary-rounded:focus-visible,
.footer-link:focus-visible,
.footer-band__item:focus-visible,
.cart-empty-link:focus-visible,
.rental-main a:focus-visible {
    outline: 2px solid var(--cr-primary, #A31E23);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip-to-content already has a strong focus state (becomes visible).
   Add a subtle shadow so it stands out against the page when activated. */
.skip-to-content:focus-visible {
    outline: 2px solid var(--cr-white, #FFFFFF);
    outline-offset: 2px;
}

/* ===========================================
   Round 16 — final polish from cross-viewport audit
   Three targeted refinements from a systematic walk of every page at
   1440/768/375 — addressing the residue not covered by earlier rounds.
   =========================================== */

/* FAQ expansion-panel body text — Mud's default body2 line-height is 1.43
   which is tight for long-form answers. Bump to 1.7 + a max-width so the
   eye doesn't have to track too far across a wide tablet/desktop. */
.mud-expansion-panel-content .mud-typography-body2 {
    line-height: 1.7;
    max-width: 68ch;
}

/* /school-search input placeholder runs past the visible field on mobile
   ("Start typing your school nai…"). Force ellipsis + slightly smaller
   placeholder font so the prompt always fits. */
@media (max-width: 480px) {
    .mud-input-input::placeholder {
        font-size: 0.875rem;
        text-overflow: ellipsis;
    }
}

/* Footer-anchored info panels (FAQ "Still have questions?" / MakePayment
   "Need Help?") sit too close to the peek bar at the bottom of the page.
   A small bottom margin lifts them so the page reads finished, not
   abruptly cut off. */
.bm-info-notice:last-child {
    margin-bottom: 1.5rem;
}

/* ===========================================
   Motion Language v1 — accessibility guard
   Mirror of the crescendo.css block. Disables animations and shortens
   transitions when the user has set OS-level reduced-motion. Applies to
   every Rental26 surface since rental.css ships everywhere.
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .bm-fade-up,
    .bm-blur-up {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        background-image: none !important;
    }

    .bm-hover-lift:hover {
        transform: none !important;
    }
}

/* ============================================================================
   TEMPLATE GRAMMAR v1 — 2026-05-19 coordinated pass
   Replaces the prior ad-hoc layout rules (3-column footer, flex-spacer header,
   inconsistent page widths, mixed alignment in the empty-cart card) with one
   coherent grammar applied across every page in the funnel.

   Three rules:
     1. Header  — three zones: brand-LEFT, primary-nav (just after the brand,
                  not pinned right), utility-RIGHT (lang + cart + CTA).
                  Eliminates the dead-center gap.
     2. Footer  — one tight band. Three horizontal rows, all centered:
                  phone+email+Hablamos / Home+Terms+BMM-site / © + version.
                  Kills the Need Help filler + duplicate Contact Us column.
     3. Page    — every page uses MaxWidth="Medium" (~960 px) + 24 px mobile
                  gutter. Every h1 centered + body left-within-container.
                  Empty-states center all child elements.

   Per Ray 2026-05-19 design review.
   ============================================================================ */

/* --- 1. Header (unified with crescendo-nav 2026-05-19) ------------------- */
/* RentalLayout now uses the same <nav class="crescendo-nav"> markup as
   Home.razor, so the styling lives entirely in crescendo.css. This block
   only adds the cart-icon override that slots into .cr-nav-buttons. */
.crescendo-nav .rental-nav-icon {
    padding: 8px;
}

/* --- 2. Footer tight band ------------------------------------------------- */
.rental-footer.rental-footer--tight {
    background-color: #FFFFFF;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 1.75rem 1rem 1.25rem;
    margin-top: 3rem;
}

.rental-footer.rental-footer--tight .footer-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.75rem;
    font-size: 13px;
    color: #595959;
    line-height: 1.6;
    padding: 0.25rem 0;
}

.rental-footer.rental-footer--tight .footer-band--legal {
    color: #8A8A8A;
    font-size: 11px;
    margin-top: 0.5rem;
}

.rental-footer.rental-footer--tight .footer-band__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.rental-footer.rental-footer--tight a.footer-band__item:hover,
.rental-footer.rental-footer--tight a.footer-link:hover {
    color: #A31E23;
}

.rental-footer.rental-footer--tight .footer-band__sep {
    color: rgba(163, 30, 35, 0.35);
    font-weight: 700;
    user-select: none;
}

.rental-footer.rental-footer--tight .footer-band__lang {
    color: #1A1A1A;
    font-style: italic;
}

.rental-footer.rental-footer--tight .footer-link {
    color: #595959;
    text-decoration: none;
    font-weight: 500;
}

.rental-footer.rental-footer--tight .footer-version-link {
    color: #8A8A8A;
    text-decoration: none;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 10px;
}

.rental-footer.rental-footer--tight .footer-version-link:hover {
    color: #A31E23;
}

/* Mobile — separators hide and band wraps to stacked centered rows. */
@media (max-width: 600px) {
    .rental-footer.rental-footer--tight .footer-band__sep {
        display: none;
    }

    .rental-footer.rental-footer--tight .footer-band {
        flex-direction: column;
        gap: 0.4rem;
    }

    .rental-footer.rental-footer--tight .footer-band--legal {
        flex-direction: row;
        gap: 0.5rem;
    }
}

/* --- 3. Page width + alignment baseline ---------------------------------- */
/* MudContainer is the host; this rule enforces consistent mobile gutters
   for any container nested under .rental-main. The MaxWidth="Medium" choice
   on each funnel page (Cart, SelectInstrument, etc.) sets the desktop width. */
.rental-main .mud-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Empty-state card pattern — every empty state on every funnel page centers
   its icon + heading + sub + button as a stack. Replaces the mixed
   left/right/center layout in the prior Cart empty-state. */
.rental-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: 0.75rem;
}

.rental-empty-state .rental-empty-state__icon {
    color: rgba(163, 30, 35, 0.55);
}

.rental-empty-state__title {
    font-family: 'Playfair Display', 'DM Serif Display', serif;
    font-size: 24px;
    font-weight: 500;
    color: #1A1A1A;
    margin: 0;
}

.rental-empty-state__sub {
    font-size: 14px;
    color: #595959;
    max-width: 360px;
    margin: 0 0 0.5rem;
}

/* Instrument grid — left-justify last row so 3-of-4 (or 1-of-2 on mobile)
   orphan rows don't center-align awkwardly. min-height on cards so single-
   line and two-line labels co-exist with consistent row heights. */
.rental-main .mud-grid {
    /* MudGrid is flex-row + flex-wrap; default justify-content is start. Make
       it explicit so future changes don't drift. */
    justify-content: flex-start !important;
}

.category-card {
    min-height: 220px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 600px) {
    .category-card {
        min-height: 200px;
    }
}

/* ===========================================
   Round 12 — Primary CTA button language
   .btn-primary-rounded is used on the funnel's primary actions (ADD TO
   CART on /select-items, /select-accessories). It was defined inline in
   each razor file with only border-radius/padding/font-size — no hover
   language. The landing page's .cr-btn-primary has a refined hover
   (translateY(-2px) + soft shadow + 400 ms ease) that signals premium
   tactile feedback. Bring the funnel buttons into the same family so
   every primary CTA across the site reacts consistently.
   =========================================== */
.btn-primary-rounded {
    transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 400ms cubic-bezier(0.165, 0.84, 0.44, 1),
                background-color 200ms ease;
    will-change: transform;
}
.btn-primary-rounded:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(163, 30, 35, 0.25), 0 4px 8px rgba(163, 30, 35, 0.15);
}
.btn-primary-rounded:active:not(:disabled) {
    transform: translateY(0);
    transition-duration: 80ms;
}

/* Arrow icon slides right on hover, same as .cr-btn-primary's svg
   treatment. Targets EndIcon spans rendered by Mud as .mud-button-icon-end. */
.btn-primary-rounded .mud-button-icon-end,
.btn-primary-rounded .mud-button-icon-start {
    transition: transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn-primary-rounded:not(:disabled):hover .mud-button-icon-end {
    transform: translateX(4px);
}
.btn-primary-rounded:not(:disabled):hover .mud-button-icon-start {
    transform: translateX(-2px);
}

/* ===========================================
   Round 7 — agency-grade visual hierarchy
   The /select-items product cards used a tiny 60×60 thumbnail that buried
   the actual instrument under heavy text. Bumping to a 140-px hero image
   surface (110 px on tablet, 96 px on small mobile) makes the product the
   star of the card. Layout gets a wider left rail + generous gutter so the
   image breathes and pricing text doesn't crowd it.

   Hover-lift on .instrument-select-card matches the existing .category-card
   pattern so every clickable card in the funnel telegraphs interactivity.

   Step-page H1s on inner funnel pages (everything that isn't the landing
   hero) come down from Typo.h3 ~3rem to a more disciplined 2.25rem so the
   product/grid below it owns more of the fold.
   =========================================== */

/* Product image surface on /select-items */
.instrument-card-image {
    width: 140px;
    height: 140px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 960px) {
    .instrument-card-image {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 600px) {
    .instrument-card-image {
        width: 96px;
        height: 96px;
    }
}

/* Card layout — give the left rail enough room for the bigger image. */
.instrument-select-card .instrument-card-layout {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Round 11 — refined pricing line. The intro price gets a subtle highlight
   so it reads as the call-out without leaning on superscript markers. The
   recurring price stays in the primary Hollyberry color but at the same
   weight as the intro for balance. Fineprint sits as a calm caption below
   so disclosure is inline, not a separate footnote block. */
.instrument-card-price {
    line-height: 1.4;
}
.instrument-card-price-intro {
    font-weight: 600;
}
.instrument-card-price-sep {
    color: rgba(163, 30, 35, 0.5);
    padding: 0 0.125rem;
}
.instrument-card-price-fineprint {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    color: var(--cr-text-grey, #595959);
    display: block;
}

/* MudText Typo.caption defaults to an inline <span>, which makes the
   disclosure ("Tax included · First payment due at delivery") and the
   contract term ("52-Month Agreement") run together on one line.
   Force every caption inside an instrument card's details column to
   stack as its own block. */
.instrument-card-details .mud-typography-caption {
    display: block;
}

.instrument-select-card .instrument-card-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Hover-lift parity with .category-card — premium tactile signal. */
.instrument-select-card {
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
.instrument-select-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Mobile (≤600 px) — stack the card vertically. At 375 px the side-by-side
   layout cramps text into one-word-per-line wraps and the pricing breaks
   awkwardly. Vertical stack gives the image full width as a hero, then
   product info + pricing flow below at full width. */
@media (max-width: 600px) {
    .instrument-select-card .instrument-card-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .instrument-select-card .instrument-card-left {
        justify-content: center;
        gap: 1rem;
    }
    .instrument-select-card .instrument-card-details {
        text-align: center;
    }
    /* Stack pricing on its own line(s) so the introductory + recurring rate
       don't smash into each other at 375 px. */
    .instrument-select-card .instrument-card-details .mud-typography-h6 {
        font-size: 1.0625rem;
        line-height: 1.35;
    }
}

/* Mobile main content needs bottom padding when the MobileCartPeekBar is
   present, otherwise the fixed peek bar overlays the bottom of the page.
   86 px clears the bar (~80 px) + safe margin. The peek bar is hidden on
   md+ via d-md-none so this padding doesn't waste vertical space there. */
@media (max-width: 899px) {
    .rental-main {
        padding-bottom: 86px;
    }
}

/* ===========================================
   Round 11 — Cart mobile density
   MudTable's Breakpoint.Sm mode converts each row into a vertical stack
   with DataLabel/value pairs. Default Mud styling gives each row ~85 px
   of vertical space per cell which makes a 2-item cart take half the
   screen. Tighten the cell padding, inline the DataLabel + value on a
   single line, and condense whitespace so a typical cart fits the
   viewport without aggressive scrolling.
   =========================================== */
@media (max-width: 599px) {
    .mud-table-cell.mud-table-cell-custom-group {
        padding: 0.5rem 0.75rem;
    }
    .mud-table-row .mud-table-cell {
        padding: 0.375rem 0.75rem;
        min-height: 32px;
    }
    /* Inline label + value pairs (Qty: 1, Price: $5.00, Total: $5.00). */
    .mud-table-row .mud-table-cell::before {
        font-weight: 500;
        color: var(--cr-text-grey, #595959);
        font-size: 0.8125rem;
    }
    /* Tighten the first cell (Item) which carries the image + name */
    .mud-table-row .mud-table-cell:first-child {
        padding-top: 0.75rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
        margin-bottom: 0.25rem;
    }
    /* Last cell (Actions / delete button) sits tighter against the row */
    .mud-table-row .mud-table-cell:last-child {
        padding-top: 0;
        padding-bottom: 0.75rem;
        border-bottom: 0;
    }
}

/* ===========================================
   Round 11 — Landing rhythm tightening
   Sections on the landing alternate padding-top/bottom between 4rem
   (trust bar) and 8rem (everything else). The cumulative effect on a
   tall scroll is acceptable but feels slightly inconsistent. Bring the
   trust bar up to 6rem so the rhythm reads as a more disciplined
   editorial sequence: hero → trust 6rem → how-it-works 8rem → why 8rem
   → cta 8rem → footer 4rem.
   =========================================== */
.cr-trust-bar {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

@media (max-width: 968px) {
    .cr-trust-bar {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* "I don't need an instrument" — demoted from full equal-weight card to a
   subtle chip-style row anchored below the products. Still tappable, still
   has a selected state, but visually clearly secondary so the product cards
   own the page. Centered, muted typography, no card chrome. */
.instrument-skip-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem auto 0;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--cr-text-grey, #595959);
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                color 180ms cubic-bezier(0.4, 0, 0.2, 1);
    align-self: center;
}
.instrument-skip-option:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--cr-charcoal, #1A1A1A);
}
.instrument-skip-option.is-selected {
    background-color: rgba(25, 118, 210, 0.08);
    color: #1976d2;
    font-weight: 500;
}

/* "Returns Accepted Anytime" — was rendering as a slightly off-brand green
   info strip (default MudAlert Severity.Success). Bring it into the
   .bm-info-notice family so all callout strips on the page share grammar:
   parchment surface, Hollyberry rule, brand-text body. Keep the green
   checkmark icon as the only accent — it carries the "all good" semantic. */
.select-items-returns.mud-alert {
    background-color: #FBF7EE !important;
    color: #1A1A1A !important;
    border-left: 4px solid #A31E23;
    border-radius: 4px;
}
.select-items-returns.mud-alert .mud-typography,
.select-items-returns.mud-alert .mud-alert-message {
    color: #1A1A1A !important;
}
.select-items-returns.mud-alert .mud-alert-icon {
    color: #2E7D32 !important;
}
.select-items-returns.mud-alert strong {
    color: #1A1A1A !important;
    font-weight: 600;
}

/* Cart "Empty Cart" link — already text-only on neutral bg, but the all-caps
   transformation gives it the visual weight of a destructive primary action.
   Drop the uppercase so it reads as a quiet utility link, not a warning. */
.cart-empty-link.mud-button {
    text-transform: none !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* Step-page heading scale-down. Landing hero keeps its huge editorial size;
   inner funnel pages tighten so products own the fold. Scoped to .rental-main
   so it can never bleed into the / hero. */
.rental-main h1.mud-typography-h3,
.rental-main h1.mud-typography-h4 {
    font-size: 2.25rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

@media (max-width: 600px) {
    .rental-main h1.mud-typography-h3,
    .rental-main h1.mud-typography-h4 {
        font-size: 1.75rem;
    }
}

/* ===========================================
   Round 18 — Final agency-grade polish bundle
   A consolidated batch of micro-interactions, focus treatments, and
   chrome refinements that take the funnel from "well-designed" to
   "actively delightful." All CSS-only, no markup changes.
   =========================================== */

/* --- Product card image zoom on hover ----------------------------------
   Subtle scale on the image inside .instrument-select-card / .item-card
   on hover. The card already lifts (round 7) — the image now also pushes
   forward slightly, mimicking a product magnifier. Scoped so the image
   moves but the card chrome stays put. */
.instrument-select-card .instrument-card-image,
.item-card img {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.instrument-select-card:hover .instrument-card-image,
.item-card:hover img {
    transform: scale(1.05);
}

/* --- Search input focus polish ----------------------------------------
   /school-search MudTextField focus ring lifts and the border glows
   subtly. Replaces Mud's plain border-color shift with a soft
   Hollyberry halo at 200 ms. */
.mud-input-control.mud-input-control-margin-dense:focus-within,
.mud-input-outlined.mud-input-control:focus-within {
    transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.school-search-field .mud-input-control:focus-within,
.mud-input-outlined-border:focus-within {
    box-shadow: 0 0 0 4px rgba(163, 30, 35, 0.08);
}

/* --- Cart Order Summary refined chrome --------------------------------
   The Order Summary panel was a plain Mud paper. Add a subtle Hollyberry
   top accent bar so it feels like a "receipt header," paired with
   tighter section dividers and stronger Total typography. The chrome
   reads as bespoke without changing structure. */
.mud-grid > .mud-grid-item > .mud-paper:has(.cart-summary-heading) {
    border-top: 3px solid var(--cr-primary, #A31E23);
    border-radius: 0 0 4px 4px;
}

/* --- Footer brand-mark hover ------------------------------------------
   Tighten the footer brand mark (Texas logo). Adds a slow subtle fade
   on hover so the footer feels alive but not jumpy. */
.rental-footer img,
.cr-footer img {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rental-footer img:hover,
.cr-footer img:hover {
    opacity: 0.7;
}

/* --- Print stylesheet -------------------------------------------------
   When users print /cart (proof of order) hide the navigation, hover
   shadows, and peek bar. Keep the receipt content + branding visible.
   A real "agency-grade" rental site cares about how the page prints. */
@media print {
    .crescendo-nav,
    .rental-footer,
    .cr-footer,
    .mobile-cart-peek-bar-wrapper,
    .skip-to-content,
    .cr-hero,
    .btn-primary-rounded,
    .cart-empty-link {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .mud-paper {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    .bm-info-notice,
    .school-info-strip {
        background: #fff !important;
        border-left-color: #000 !important;
    }
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    /* Show URL after external links so the print copy is useful */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #666;
    }
    /* Don't print URLs after in-app navigation */
    a[href^="/"]::after,
    a[href^="#"]::after,
    a[href^="tel:"]::after,
    a[href^="mailto:"]::after {
        content: none;
    }
}

/* --- Selection highlight ---------------------------------------------
   Default ::selection is browser-blue. Brand it Hollyberry-on-cream so
   highlighting text feels native to the site, not generic OS chrome. */
::selection {
    background: rgba(163, 30, 35, 0.18);
    color: var(--cr-charcoal, #1A1A1A);
}
::-moz-selection {
    background: rgba(163, 30, 35, 0.18);
    color: var(--cr-charcoal, #1A1A1A);
}

/* --- Smooth scroll for anchor jumps ----------------------------------
   "#how" / "#why" links on the landing nav jump abruptly. Smooth-scroll
   matches the rest of the motion language (180-400ms transitions). */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}