/* ========================================== */
    /* ARCHIVAL RECORD STYLES (BOOTSTRAP 5)       */
    /* ========================================== */
    .sa-archival-container {
        font-family: 'Inter', sans-serif;
        color: #2b3035;
        background-color: #f8f9fa; 
        padding-bottom: 60px;
    }
    .sa-archival-body {
        font-family: 'Playfair Display', serif;
        color: #111111; 
    }
    
    /* Center-aligned line divider */
    .sa-divider-center {
        display: flex;
        align-items: center;
        text-align: center;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: #868e96;
        margin-bottom: 1rem;
    }
    .sa-divider-center::before,
    .sa-divider-center::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #dee2e6;
    }
    .sa-divider-center::before { margin-right: 1.5em; }
    .sa-divider-center::after { margin-left: 1.5em; }

    /* Left-aligned line divider */
    .sa-divider-left {
        display: flex;
        align-items: center;
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: #6c757d;
        margin-bottom: 1rem;
        margin-top: 1.5rem;
    }
    .sa-divider-left::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #dee2e6;
        margin-left: 1.5em;
    }

    /* "Plate" Image Boxes */
    .sa-plate-box {
        position: relative;
        background-color: #ffffff;
        border: 1px solid #ced4da;
        padding: 1.5rem 1rem 1rem 1rem;
        margin-bottom: 1rem;
    }
    .sa-plate-label {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        padding: 0 15px;
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 0.9rem;
        color: #495057;
        white-space: nowrap;
    }
    .sa-plate-caption-serif {
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 0.85rem;
        color: #6c757d;
        text-align: center;
        margin-top: 0.75rem;
        margin-bottom: 0;
    }

    /* Dimensional Graphic Background */
    .sa-graph-bg {
        background-color: #ffffff;
        background-image: linear-gradient(#e9ecef 1px, transparent 1px), linear-gradient(90deg, #e9ecef 1px, transparent 1px);
        background-size: 20px 20px;
        position: relative;
    }

    /* Action Box */
    .sa-valuation-box {
        background-color: #ffffff;
        border: 1px solid #ced4da;
        padding: 1.5rem;
    }
    .sa-btn-primary {
        background-color: #111111;
        color: #ffffff;
        border: none;
        border-radius: 0;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding: 1rem;
        transition: background-color 0.2s;
        text-decoration: none;
        display: inline-block;
        text-align: center;
    }
    .sa-btn-primary:hover {
        background-color: #333333;
        color: #ffffff;
    }
    .sa-btn-outline {
        background-color: transparent;
        border: 1px solid #adb5bd;
        color: #495057;
        border-radius: 0;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding: 1rem;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-block;
        text-align: center;
    }
    .sa-btn-outline:hover {
        border-color: #111111;
        color: #111111;
        background-color: #f8f9fa;
    }

    /* Interactive elements */
    .sa-gallery-trigger {
        cursor: pointer;
        transition: opacity 0.2s;
    }
    .sa-gallery-trigger:hover {
        opacity: 0.85;
    }

/* Read More Expandable Description */
    .sa-desc-content {
        position: relative;
        overflow: hidden;
        /* REDUCED FROM 520px to 140px (About 5 lines of text) */
        max-height: 520px; 
        transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .sa-desc-content.expanded {
        max-height: none;
    }
    .sa-desc-fade {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        /* REDUCED FROM 120px to 60px for a tighter gradient */
        height: 60px;
        background: linear-gradient(to bottom, rgba(248,249,250,0), rgba(248,249,250,1) 90%);
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

.sa-read-more-btn {
        background: none;
        border: none;
        padding: 0;
        margin-top: 8px;
        font-family: 'Inter', sans-serif;
        color: #111111; 
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* ========================================== */
    /* BOTTOM FORM SECTION STYLES                 */
    /* ========================================== */
    .sa-v8-offer-section { max-width: 800px; margin: 40px auto; padding: 0 20px; }
    .sa-v8-offer-box { background-color: #ffffff; border: 1px solid #ced4da; padding: 40px; }
    .sa-v8-form-title { font-family: 'Playfair Display', serif; font-size: 2rem; color: #111111; margin-bottom: 10px; }
    .sa-v8-form-desc { font-size: 0.9rem; color: #6c757d; margin-bottom: 30px; line-height: 1.5; }
    .sa-v8-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
    .sa-v8-form-group { display: flex; flex-direction: column; }
    .sa-v8-form-group.full-width { grid-column: 1 / -1; }
    .sa-v8-input-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #495057; margin-bottom: 6px; }
    .sa-v8-input { background-color: #f8f9fa; border: 1px solid #ced4da; padding: 12px; font-family: 'Inter', sans-serif; font-size: 0.9rem; color: #2b3035; outline: none; transition: border-color 0.3s; }
    .sa-v8-input:focus { border-color: #111111; background-color: #fff; }
    .sa-v8-input::placeholder { color: #adb5bd; }
    textarea.sa-v8-input { resize: vertical; min-height: 100px; }
    .sa-v8-form-submit { align-self: flex-end; background: #111111; color: #FFF; border: none; padding: 14px 30px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: background 0.3s; margin-top: 5px; }
    .sa-v8-form-submit:hover { background: #333333; }

    /* Modal Styles */
    .sa-v8-gallery-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #FFFFFF; z-index: 9999; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
    .sa-v8-gallery-modal.open { opacity: 1; visibility: visible; }
    .sa-v8-modal-header { position: sticky; top: 0; left: 0; width: 100%; padding: 15px 30px; background-color: rgba(255, 255, 255, 0.95); display: flex; justify-content: flex-start; z-index: 10; border-bottom: 1px solid #ced4da; }
    .sa-v8-close-modal-btn { background: transparent; border: none; font-size: 0.9rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; transition: background 0.2s; color:#111111; }
    .sa-v8-close-modal-btn:hover { background: #f8f9fa; }
    .sa-v8-modal-scroll-area { max-width: 800px; margin: 0 auto; padding: 30px 20px 80px 20px; display: flex; flex-direction: column; gap: 30px; }
    .sa-v8-modal-scroll-area img { width: 100%; height: auto; display: block; border: 1px solid #ced4da; padding: 5px;}

    @media (max-width: 991px) {
        .sa-v8-form-grid { grid-template-columns: 1fr; gap: 12px; }
        .sa-v8-form-submit { width: 100%; }
    }



/* ========================================== */
/* EDITORIAL BODY TEXT & LEAD PARAGRAPH       */
/* ========================================== */
.sa-archival-body,
.sa-lead-paragraph {
    font-family: 'Georgia', 'Garamond', serif; 
    font-style: normal !important; /* The !important forces the italics off */
    font-size: 1rem;
    color: #333333; 
    line-height: 1.45; 
    letter-spacing: 0.005em;
}

/* ========================================== */
/* EDITORIAL DROP CAP (2-LINE SPAN)           */
/* ========================================== */
.sa-drop-cap {
    float: left;
    font-size: 3.2rem;     
    line-height: 0.85;
    
    /* 1. TOP & BOTTOM: Control exactly how many lines fit next to the letter */
    margin-top: -2px;      /* Use margin (not padding) to nudge the letter up or down */
    padding-bottom: 0px;   /* Removed the 5px padding that was making the letter too tall */
    margin-bottom: -8px;   /* <-- THE MAGIC DIAL: Make this more negative to let Line 3 slide under! */
    
    /* 2. RIGHT: Keep the adjacent text from colliding */
    padding-right: 4px;    
    
    /* 3. LEFT: Add a safe zone so the left serif doesn't get sliced off... */
    padding-left: 4px;     
    /* ...but pull it back -4px so it still aligns perfectly flush with the paragraph! */
    margin-left: -4px;     

    font-family: 'Playfair Display', serif;
    color: #111111;
}


/* ========================================== */
    /* CUSTOM GLASSMORPHISM LIGHTBOX              */
    /* ========================================== */
    .sa-glass-modal {
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(17, 17, 17, 0.4); 
        backdrop-filter: blur(12px); 
        -webkit-backdrop-filter: blur(12px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }
    .sa-glass-modal.open {
        opacity: 1;
        visibility: visible;
    }
    .sa-glass-panel {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
.sa-glass-content-wrapper {
        position: relative;
        display: inline-block; 
        max-width: 90%;
        max-height: 90vh; /* Expanded from 80vh to use the extra space */
    }
    
.sa-glass-content-wrapper img {
        max-height: 90vh; 
        max-width: 100%;
        object-fit: contain;
        display: block; 
        padding: 30px; 
        /* Swapped to a dark translucent charcoal */
        background-color: rgba(0, 0, 0, 0.4); 
        border: 1px solid rgba(255, 255, 255, 0.15); 
        border-radius: 8px; 
        box-shadow: 0 30px 60px rgba(0,0,0,0.8); 
    }


    /* The Full-Width 1-Line Caption Card */
    .sa-glass-info-card {
        position: absolute; /* Takes the card out of flow so the image centers perfectly */
        top: 100%; /* Hangs directly off the bottom of the image */
        left: 0;
        margin-top: 15px; 
        width: 100%; /* Matches the image width exactly */
        box-sizing: border-box; /* Ensures padding doesn't break the 100% width */
        background-color: rgba(255, 255, 255, 0.6); 
        backdrop-filter: blur(20px); 
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 6px; 
        padding: 14px 20px; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        
        /* Flexbox forced onto 1 horizontal line */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 15px; 
    }
    
    .sa-glass-archive-ref {
        font-family: 'Playfair Display', serif; /* Matched to price font */
        font-size: 1.15rem; /* Matched to price size */
        font-style: italic; /* Matched to price style */
        color: #495057;
        white-space: nowrap; 
        flex-shrink: 0; 
        margin: 0;
    }
    
    .sa-glass-title-row {
        flex-grow: 1; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        text-align: left;
        padding: 0 10px; 
    }
    
    .sa-glass-title-row strong {
        font-family: 'Playfair Display', serif;
        font-size: 1.15rem; 
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #111111;
    }
    
    .sa-glass-price {
        font-family: 'Playfair Display', serif;
        font-size: 1.15rem;
        font-style: italic;
        color: #495057;
        margin: 0; 
        white-space: nowrap; 
        flex-shrink: 0; 
    }



    
    .sa-glass-close {
        position: absolute;
        top: -35px;
        right: 0;
        background: none;
        border: none;
        color: #ffffff;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.2s;
    }
    .sa-glass-close:hover { opacity: 1; }

    /* Navigation Arrows */
    .sa-glass-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.2);
        color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        font-size: 1.5rem;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10000;
        transition: all 0.2s ease;
    }
    .sa-glass-nav:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.6);
    }
    .sa-glass-nav-left { left: 30px; }
    .sa-glass-nav-right { right: 30px; }

    @media (max-width: 991px) {
        .sa-glass-info-card {
            flex-direction: column;
            gap: 10px;
            padding: 15px;
        }
        .sa-glass-title-row { text-align: center; width: 100%; }
        .sa-glass-nav { width: 40px; height: 40px; font-size: 1.2rem; }
        .sa-glass-nav-left { left: 10px; }
        .sa-glass-nav-right { right: 10px; }
    }


.sa-read-more-btn {
        /* Core Badge Styling */
        background-color: #f8f9fa; 
        border: 1px solid #e9ecef; 
        border-radius: 6px; 
        padding: 8px 16px;
        
        /* LAYOUT UPDATES: Tighter top margin, pushed to the right */
        margin-top: 8px;
        display: block;
        margin-left: auto;
        
        /* Typography */
        font-family: 'Inter', sans-serif;
        color: #6c757d; 
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-decoration: none; 
        
        /* Interaction */
        cursor: pointer;
        transition: all 0.2s ease;
    }

    /* Subtle hover effect (Keep this as is) */
    .sa-read-more-btn:hover {
        background-color: #e9ecef;
        color: #495057;
        border-color: #ced4da;
    }


/* ========================================== */
    /* DRAWER BACKDROP BLUR & LAYERING            */
    /* ========================================== */
    .offcanvas-backdrop.show {
        opacity: 1 !important; 
        background-color: rgba(17, 17, 17, 0.25) !important; 
        backdrop-filter: blur(5px); 
        -webkit-backdrop-filter: blur(5px);
        /* Bumped up to cover the bottom app bar and top headers */
        z-index: 1060 !important; 
    }

    #inquiryDrawer {
        background-color: transparent !important;
        border: none !important;
        /* Highest z-index so the Chat Header sits over everything */
        z-index: 1070 !important; 
    }


/* ========================================== */
    /* OUTLINED FLOATING LABELS                   */
    /* ========================================== */
    .sa-floating-label {
        position: absolute;
        top: -8px; 
        left: 12px;
        background-color: #ffffff !important; /* Bulletproofs the line break */
        padding: 0 6px;
        font-family: 'Inter', sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #868e96; /* Darkened for better readability */
        z-index: 10; /* Guarantees it sits above the focus ring */
        pointer-events: none; 
    }
    
.sa-floating-input {
        padding: 10px 12px !important; /* Tightened to reduce height */
    }
    
    .sa-floating-input:focus {
        border-color: #111111 !important;
        /* Using 'inset' forces the shadow inward so it doesn't bleed into the label */
        box-shadow: inset 0 0 0 1px #111111 !important; 
        outline: none;
    }



/* ========================================== */
    /* SEGMENTED INTENT TOGGLE                    */
    /* ========================================== */
    .sa-intent-toggle {
        display: flex;
        width: 100%;
        border: 1px solid #2b3035;
        border-radius: 6px;
        overflow: hidden; /* Ensures the background color doesn't bleed past the rounded corners */
    }
    
    .sa-intent-label {
        flex: 1;
        text-align: center;
        padding: 12px 10px;
        margin: 0;
        cursor: pointer;
        font-family: 'Playfair Display', serif;
        font-size: 1rem;
        color: #2b3035;
        background-color: #ffffff;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    
    /* Adds the crisp dividing line in the middle */
    .sa-intent-label:first-of-type {
        border-right: 1px solid #2b3035;
    }
    
    /* The active (checked) state */
    .btn-check:checked + .sa-intent-label {
        background-color: #25292d; /* Deep charcoal */
        color: #ffffff;
    }





/* ========================================== */
    /* MOBILE ACCORDION STYLES                    */
    /* ========================================== */
    .sa-mobile-accordion-item {
        border: none;
        border-bottom: 1px solid #e9ecef;
        background-color: transparent;
        border-radius: 0 !important;
    }
    .sa-mobile-accordion-btn {
        font-family: 'Inter', sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #111111;
        background-color: transparent !important;
        padding: 1.2rem 0;
        box-shadow: none !important;
    }
    .sa-mobile-accordion-btn:not(.collapsed) {
        color: #111111;
        background-color: transparent;
        box-shadow: none;
    }
    .sa-mobile-accordion-btn::after {
        background-size: 0.85rem;
    }
    .sa-mobile-accordion-body {
        padding: 0 0 1.5rem 0;
        background-color: transparent;
    }





/* ========================================== */
    /* BROWSER AUTOFILL OVERRIDE                  */
    /* ========================================== */
    .sa-floating-input:-webkit-autofill,
    .sa-floating-input:-webkit-autofill:hover, 
    .sa-floating-input:-webkit-autofill:active {
        /* Forces the background white */
        -webkit-box-shadow: inset 0 0 0 50px #ffffff !important;
        /* Forces the text color back to our standard dark gray */
        -webkit-text-fill-color: #2b3035 !important;
    }

    /* Ensures our black focus ring still works on autofilled fields */
    .sa-floating-input:-webkit-autofill:focus {
        -webkit-box-shadow: inset 0 0 0 1px #111111, inset 0 0 0 50px #ffffff !important;
        -webkit-text-fill-color: #2b3035 !important;
    }



/* We hide the old desktop meta bar on mobile */
@media (max-width: 991px) {
    .desktop-meta-bar { display: none !important; }
}
/* ==========================================
   APP-LIKE MOBILE REORDERING & FULL BLEED
   ========================================== */
@media (max-width: 991px) {
    
    /* 1. Mobile Flex Stacking */
    .app-mobile-stack {
        display: flex;
        flex-direction: column;
    }
    
    .app-order-1 { order: 1 !important; margin-bottom: 0 !important; } /* Main Photo */
    .app-order-2 { order: 2 !important; } /* Name & Desc */
    .app-order-3 { order: 3 !important; } /* Dealer Details */
    .app-order-4 { order: 4 !important; } /* Anything else */

    /* 2. Kill Top Padding & Lock X-Axis */
.sa-archival-container {
        padding-top: 0 !important;
        padding-bottom: 10px !important; /* Kills the 60px bottom gap */
        overflow-x: hidden !important; 
    }

/* 3. THE BULLETPROOF FULL-BLEED HACK (Bootstrap Native) */
    .app-swipe-wrapper {
        position: relative !important; /* <--- THIS ANCHORS THE ICONS */
        margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
        margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
        border-bottom: 1px solid #e9ecef;
    }
    
    .app-swipe-gallery {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
        -ms-overflow-style: none; 
        overscroll-behavior-x: auto;
    }
    
    .app-swipe-gallery::-webkit-scrollbar {
        display: none; 
    }
    
    .app-swipe-item {
        /* Changed from 100vw to 100% so it perfectly matches the newly widened wrapper */
        flex: 0 0 100% !important; 
        scroll-snap-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent; /* Changed from #f8f9fa so gaps blend into the page */
    }
    
    .app-swipe-item img {
        width: 100%;
        height: auto;
        /* Bumped to 85vh. This allows tall antiques (like chairs/clocks) 
           to expand wider and kiss the horizontal edges without taking up 3 screens of scrolling. */
        max-height: 85vh; 
        object-fit: contain;
    }

    /* Hide standard desktop thumbnail grids on mobile */
    .desktop-thumbnails {
        display: none !important; 
    }


    /* 4. Disable Fancybox Lightbox on Mobile */
    .app-swipe-item a {
        pointer-events: none !important;
        cursor: default;
    }

    
}



/* ========================================== */
/* META ACTION LINKS (PDF, SHARE, SAVE)       */
/* ========================================== */
.sa-meta-action {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem; /* Bumped up from 0.6rem for better readability */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #adb5bd;
    transition: all 0.2s ease;
    line-height: 1;
    cursor: pointer;
    
    /* Touch Target Expansion (44px rule) */
    padding: 10px 6px; 
    margin: -10px -6px; 
}

.sa-meta-action i {
    font-size: 1.35rem; /* Bumped up from 1rem for a bolder visual */
    margin-right: 6px;
    color: #adb5bd;
    transition: color 0.2s ease;
}

/* Hover States (Replaces inline JS) */
.sa-meta-action:hover {
    color: #111111 !important;
}
.sa-meta-action:hover i {
    color: #111111 !important;
}

/* Active Saved State Override */
#local-saved.d-flex i {
    color: #111111;
}






/* ========================================== */
    /* MOBILE ACCORDION STYLES                    */
    /* ========================================== */
    .sa-mobile-accordion {
        border-top: 1px solid #e9ecef;
    }
    .sa-mobile-accordion .accordion-item {
        border: none;
        border-bottom: 1px solid #e9ecef;
        background-color: transparent;
        border-radius: 0 !important;
    }
    .sa-mobile-accordion .accordion-button {
        font-family: 'Inter', sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #111111;
        background-color: transparent !important;
        padding: 1.25rem 0;
        box-shadow: none !important;
    }
    .sa-mobile-accordion .accordion-button:not(.collapsed) {
        color: #111111;
    }
    .sa-mobile-accordion .accordion-button::after {
        background-size: 0.8rem;
    }
    .sa-mobile-accordion .accordion-body {
        padding: 0 0 1.5rem 0;
        background-color: transparent;
    }



/* ========================================== */
    /* MOBILE BUBBLE CARD STYLES                  */
    /* ========================================== */
    .sa-mobile-card {
        background-color: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        margin-bottom: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        overflow: hidden;
    }
    .sa-mobile-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        cursor: pointer;
        /* Disables text highlighting when tapping quickly */
        user-select: none; 
        -webkit-user-select: none;
    }
    .sa-mobile-card-title {
        font-family: 'Inter', sans-serif;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: #6c757d;
        margin: 0;
    }
    .sa-mobile-card-icon {
        font-size: 1.1rem;
        color: #adb5bd;
        transition: transform 0.3s ease;
    }
    /* Flips the arrow upside down when the card is open */
    .sa-mobile-card-header[aria-expanded="true"] .sa-mobile-card-icon {
        transform: rotate(-180deg);
        color: #111111;
    }
    .sa-mobile-card-body {
        padding: 0 20px 20px 20px;
    }