/* =============================================================================
   Local360Connect — l360-unify.css
   LOAD LAST: place the <link> immediately AFTER the closing </style> in
   includes/tailwind_head.php (the inline block there currently wins over every
   file loaded before it, so this file must come after it).

   What this file does (one decision per conflict, nothing optional):
   0. Defines every CSS variable that was referenced but never defined
   1. One radius scale: 8 small / 12 controls / 16 cards / 24 sheets+hero
   2. One accent: brand #111111. Blue #0071E3 stays for links/call only.
      Purple (#5A2FD4), 0062FF, 2563EB, 3B82F6, indigo and navy are removed.
   3. One focus style, one form-control spec (44px, 3:1 border, 16px on mobile)
   4. One button spec (44px, 12px radius, 16px padding)
   5. One card spec (16px radius, #EAEAEA border, no permanent GPU layers)
   6. One type hierarchy + Telugu rules (line-height, no negative tracking)
   7. Restores 44px touch targets and an 11px type floor inside .page-card
   8. Neutral footer, semantic badges, one skeleton, tom-select aligned
   ============================================================================= */


/* ─── 0. TOKENS ─────────────────────────────────────────────────────────── */
:root {
    /* 0.1 Referenced in tokens.css / tailwind_head.php but never defined */
    --color-text-sub:        #4B5563;
    --color-text-sub-rgb:    75 85 99;
    --color-text-muted:      #6B7280;     /* 4.6:1 on #FAFAFA */
    --color-muted:           #6B7280;     /* was #9CA3AF = 2.4:1 (fails AA) */
    --color-secondary:       #4B5563;
    --color-secondary-rgb:   75 85 99;
    --color-info:            #0284C7;
    --color-info-rgb:        2 132 199;
    --shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.04);
    --ease-decel:            cubic-bezier(0, 0, 0.2, 1);
    --ease-spring:           cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --font-base-size:        16px;

    --card-radius:           16px;
    --card-pad-sm:           12px;
    --card-pad:              16px;
    --card-pad-lg:           24px;
    --card-border:           #EAEAEA;
    --card-shadow:           0 1px 2px rgba(0, 0, 0, 0.04);
    --card-shadow-hover:     0 8px 24px rgba(0, 0, 0, 0.07);
    --card-duration:         200ms;

    /* 0.2 Radius — tokens.css and local360-tokens.css disagreed (lg 20 vs 16,
       md 12 vs 10) and Tailwind's rounded-lg (20px) was larger than
       rounded-2xl (16px). Three steps now. */
    --radius-xs: 6px;   --l360-radius-xs: 6px;
    --radius-sm: 8px;   --l360-radius-sm: 8px;
    --radius-md: 12px;  --l360-radius-md: 12px;
    --radius-lg: 16px;  --l360-radius-lg: 16px;
    --radius-xl: 16px;  --l360-radius-xl: 24px;
    --radius-2xl: 16px;
    --radius-3xl: 24px; --l360-radius-3xl: 24px;
    --radius-card: 16px;
    --radius-card-lg: 16px;
    --radius-hero: 24px;
    --radius-button: 12px;
    --radius-input: 12px;
    --radius-pill: 9999px; --l360-radius-pill: 9999px;

    /* 0.3 Accent + control tokens */
    --l360-color-accent: #111111;          /* was #059669 here, #111 in tokens.css */
    --color-accent: #111111;
    --control-border: #919191;             /* 3.15:1 on white, 3.02:1 on #FAFAFA */
    --control-border-hover: #6B7280;
    --l360-text-placeholder: #6B7280;
    --focus-ring: rgba(17, 17, 17, 0.10);
}

/* Tailwind's default ring colour is blue (rgba(59,130,246,.5)) */
*, ::before, ::after, ::backdrop { --tw-ring-color: rgba(17, 17, 17, 0.20); }

/* Elevation: Tailwind shadow-sm/md/lg/xl collapsed to two values */
.shadow, .shadow-sm, .hover\:shadow-sm:hover { --tw-shadow: var(--shadow-sm); --tw-shadow-colored: var(--shadow-sm); }
.shadow-md, .hover\:shadow-md:hover           { --tw-shadow: var(--shadow-md); --tw-shadow-colored: var(--shadow-md); }
.shadow-lg, .hover\:shadow-lg:hover           { --tw-shadow: var(--shadow-lg); --tw-shadow-colored: var(--shadow-lg); }
.shadow-xl, .hover\:shadow-xl:hover           { --tw-shadow: var(--shadow-xl); --tw-shadow-colored: var(--shadow-xl); }

/* Container: stepped Tailwind max-widths (375…1536) fought --site-max-width */
.container, .site-container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; }


/* ─── 1. FOCUS — one style, no purple, no border-radius:4px ──────────────── */
html :focus-visible:not(input):not(select):not(textarea) {
    outline: 2px solid var(--color-brand) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}
.l360-site-footer :focus-visible,
.on-dark :focus-visible { outline-color: #FFFFFF !important; }

html :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--color-brand) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
    outline: none !important;
}
html input:is([type="checkbox"], [type="radio"]):focus-visible,
.l360-checkbox:focus-visible,
.l360-radio:focus-visible {
    outline: 2px solid var(--color-brand) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}
#pgProgressBar { box-shadow: none; }


/* ─── 2. FORM CONTROLS — .apple-input (48px, 1.5px #F3F4F6) vs .l360-input
         (44px, 1px #EAEAEA) were two different inputs. One spec. ──────────── */
.l360-input, .apple-input, .l360-textarea, .l360-select,
select:not(.select-native) {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--control-border);
    border-radius: 12px;
    transition: border-color 150ms var(--ease-apple), box-shadow 150ms var(--ease-apple);
}
textarea.l360-input, .l360-textarea, textarea.apple-input { padding: 12px 14px; min-height: 96px; line-height: 1.5; }
select:not(.select-native), .l360-select { padding-right: 40px; }
.l360-input:hover, .apple-input:hover, .l360-textarea:hover, .l360-select:hover,
select:not(.select-native):hover { border-color: var(--control-border-hover); }
.l360-input::placeholder, .apple-input::placeholder, .l360-textarea::placeholder { color: #6B7280; opacity: 1; }
.l360-input:disabled, .apple-input:disabled, .l360-select:disabled, select:not(.select-native):disabled {
    background-color: var(--gray-50); color: var(--gray-400); border-color: var(--gray-200);
}
.l360-input.has-error, .l360-select.has-error, .l360-textarea.has-error { border-color: var(--l360-danger); }

.l360-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);          /* tokens.css had #D1D5DB (1.5:1) */
    letter-spacing: 0;
}

/* iOS Safari zooms the viewport when a focused field is < 16px */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select, textarea, .ts-control, .ts-control > input { font-size: 16px; }
}


/* ─── 3. BUTTONS — .btn / .btn-primary / .btn-apple / .btn-dark / .btn-v2-* /
         .l360-btn: 4 radii (8, 10, 12, pill) and a gap/padding bug
         (var(--space-1,8px) resolves to 4px, var(--space-2,16px) to 8px). ─── */
.btn, .btn-apple, .btn-primary, .btn-dark,
.btn-v2-primary, .btn-v2-secondary, .btn-v2-ghost, .btn-v2-destructive,
.l360-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    height: 44px; min-height: 44px;
    padding: 0 16px;
    font-family: var(--font-sans);
    font-size: 0.875rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 12px;
}
.btn-v2-icon, .l360-btn-icon { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 12px; }

.btn-sm, .l360-btn-sm { height: 40px; min-height: 40px; padding: 0 12px; font-size: 0.8125rem; }
.btn-lg, .l360-btn-lg { height: 52px; min-height: 52px; padding: 0 20px; font-size: 1rem; }
.btn-v2-icon.btn-sm   { width: 40px; padding: 0; }
.btn-v2-icon.btn-lg   { width: 52px; padding: 0; }

/* Filled = one look (brand, btn-primary, btn-apple, btn-dark were all #111) */
.btn-apple, .btn-primary, .btn-dark, .btn-v2-primary, .l360-btn-primary {
    background: var(--color-brand); color: #FFFFFF; box-shadow: none;
}
.btn-apple:hover, .btn-primary:hover, .btn-dark:hover, .btn-v2-primary:hover, .l360-btn-primary:hover {
    background: #262626; color: #FFFFFF;
}
.btn-secondary, .btn-v2-secondary, .l360-btn-secondary, .l360-btn-outline {
    background: var(--color-surface); color: var(--color-text); border-color: #D1D5DB; box-shadow: none;
}
.btn-secondary:hover, .btn-v2-secondary:hover, .l360-btn-secondary:hover, .l360-btn-outline:hover {
    background: var(--gray-50); border-color: #9CA3AF;
}
.btn-v2-ghost { background: transparent; color: var(--color-text-sub); }
.btn-v2-ghost:hover { background: var(--gray-100); color: var(--color-text); }
.btn-v2-destructive { background: var(--l360-danger); color: #FFFFFF; box-shadow: none; }
.btn-v2-destructive:hover { background: #A82727; }
.btn:disabled, .btn[aria-disabled="true"], .l360-btn:disabled { opacity: 0.5; }

/* tailwind_head.php shrinks every button to 36px / 12px text on mobile */
@media (max-width: 767px) {
    .page-card :is(.btn, .btn-apple, .btn-primary, .btn-dark, .btn-v2-primary, .btn-v2-secondary, .l360-btn) {
        height: 44px !important;
        padding-left: 16px !important; padding-right: 16px !important;
        font-size: 0.875rem !important;
    }
    .page-card :is(.btn-sm, .l360-btn-sm) { height: 40px !important; font-size: 0.8125rem !important; }
    /* interactive icon buttons: .page-card shrinks h-10/w-10 to 28px */
    .page-card :is(a, button).h-10 { height: 2.5rem !important; }
    .page-card :is(a, button).w-10 { width: 2.5rem !important; }
    .page-card :is(a, button).h-11 { height: 2.75rem !important; }
    .page-card :is(a, button).w-11 { width: 2.75rem !important; }
    .page-card :is(a, button).h-12 { height: 3rem !important; }
    .page-card :is(a, button).w-12 { width: 3rem !important; }
}

/* Brand CTAs that failed contrast with white text */
.bg-\[\#25D366\], .bg-\[\#25D366\] :is(span, svg, i) { color: #0B0B0B !important; }   /* white on 25D366 = 2.0:1 */
.bg-\[\#D97706\], .bg-amber-600 { background-color: #B45309; }                          /* white 3.2:1 → 5.0:1 */


/* ─── 4. CARDS — .card/.apple-card (tokens.css), .card/.card-sm/md/lg
         (tailwind_head inline), .l360-card (components), .l360-biz-card and
         .l360-offer-card (identical, 20px), .l360-cat-card: 4 borders, 3 radii,
         3 hover treatments, will-change + translateZ on every card. ────────── */
.card, .apple-card, .card-flat, .card-sm, .card-md, .card-lg,
.l360-card, .l360-biz-card, .l360-offer-card, .l360-cat-card {
    background-color: var(--color-surface);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    isolation: isolate;                 /* keeps rounded clipping in Safari without a GPU layer */
    will-change: auto;
    transform: none;
    -webkit-transform: none;
    transition: transform var(--card-duration) var(--ease-apple),
                box-shadow var(--card-duration) var(--ease-apple),
                border-color var(--card-duration) var(--ease-apple);
}
@media (hover: hover) {
    .card:hover, .apple-card:hover, .card-sm:hover, .card-md:hover, .card-lg:hover,
    .l360-card:hover, .l360-biz-card:hover, .l360-offer-card:hover, .l360-cat-card:hover {
        transform: translateY(-2px);
        -webkit-transform: translateY(-2px);
        border-color: #D1D5DB;           /* was blue-tinted rgba(0,98,255)/(37,99,235) */
        box-shadow: var(--card-shadow-hover);
    }
}
@media (hover: none) {
    .card:hover, .apple-card:hover, .l360-card:hover, .l360-biz-card:hover,
    .l360-offer-card:hover, .l360-cat-card:hover { transform: none; }
}
/* press feedback: .96 scale on a 300px card is a lurch */
.apple-card:active, .card-sm:active, .active-scale:active { transform: scale(0.985) !important; }
.btn:active { transform: scale(0.97) !important; }

@media (max-width: 767px) {
    .page-card .card, .page-card .apple-card, .page-card .card-sm,
    .page-card .card-md, .page-card .card-lg { border-radius: 16px !important; }   /* was 12px on mobile only */
}

/* GPU layers on every sticky/fixed/scroller (and transform makes them the
   containing block for position:fixed descendants). Keep it on named carousels. */
.overflow-x-auto, .snap-x, .sticky, .fixed {
    will-change: auto; transform: none; -webkit-transform: none; backface-visibility: visible;
}
#trendingCarouselContainer, #premiumCarouselContainer, #newBizCarouselContainer,
#offersCarouselContainer, #eventsCarouselContainer, #moviesCarouselContainer,
.l360-carousel-container { will-change: scroll-position; transform: translateZ(0); }


/* ─── 5. SKELETONS — .skeleton (#e8e8ed/#d2d2d7) and .skeleton-shimmer
         (#f5f5f7/#e8e8ed) used Apple's blue-grey, not the neutral palette. ─── */
.skeleton, .skeleton-shimmer {
    background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
    background-size: 200% 100%;
    animation: shimmerSweep 1.5s infinite linear;
}


/* ─── 6. TYPE ────────────────────────────────────────────────────────────── */
/* weights: .text-hero was 800, h1 700, display token 700 → 700 */
.text-hero { font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
/* three different section titles (20/800/#0f172a, 17/600, components) → one */
.l360-section-title, .section-title {
    font-size: 1.125rem; font-weight: 700; line-height: 1.25;
    letter-spacing: -0.02em; color: var(--color-text);
}
@media (min-width: 640px) { .l360-section-title, .section-title { font-size: 1.25rem; } }

/* sub-11px text (text-[8px] … text-[10.5px]) → 11px floor */
.text-\[8px\], .text-\[9px\], .text-\[9\.5px\], .text-\[10px\], .text-\[10\.5px\] { font-size: 0.6875rem; }

/* ─── 6.1 IDEAL READING BODY TYPOGRAPHY (Announcement Standard) ─── */
/* Sitewide body text specification matching announcement.php benchmark (16px, 1.625 leading, #374151) */
.l360-prose,
.l360-description,
.reading-body,
.article-body,
#articleBody,
.announcement-body {
    font-size: 1rem !important; /* 16px */
    line-height: 1.625 !important;
    color: #374151 !important;
}

.l360-prose p,
.l360-description p,
.reading-body p,
.article-body p,
#articleBody p,
.announcement-body p {
    font-size: 1rem !important; /* 16px */
    line-height: 1.625 !important;
    color: #374151 !important;
    margin-bottom: 1rem;
}

.l360-prose li,
.l360-description li,
.reading-body li,
.article-body li,
#articleBody li {
    font-size: 1rem !important; /* 16px */
    line-height: 1.625 !important;
}

html.dark :is(.l360-prose, .l360-description, .reading-body, .article-body, #articleBody, .announcement-body),
html.dark :is(.l360-prose p, .l360-description p, .reading-body p, .article-body p, #articleBody p, .announcement-body p),
html.dark :is(.l360-prose li, .l360-description li, .reading-body li, .article-body li, #articleBody li) {
    color: #CBD5E1 !important;
}

/* Ensure mobile retains comfortable 16px text size */
@media (max-width: 767px) {
    .page-card .text-xs   { font-size: 0.75rem !important; line-height: 1.35 !important; }
    .page-card .text-sm   { font-size: 0.875rem !important; line-height: 1.45 !important; }
    .page-card .text-base { font-size: 1rem !important; line-height: 1.55 !important; }
}

/* Telugu: tight line-height clips vowel signs, negative tracking collides
   conjuncts, and 10–11px is too small for the script */
html[lang="te"] body { line-height: 1.65; }
html[lang="te"] :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4, .text-hero, .l360-section-title, .section-title, .card-title) {
    line-height: 1.4; letter-spacing: 0;
}
html[lang="te"] :is(.card-sub, .text-label, .text-caption, .text-meta, .l360-label, .l360-helper, .text-body) {
    line-height: 1.55; letter-spacing: 0;
}
html[lang="te"] :is(.btn, button, .l360-btn, .l360-chip, .tracking-tight, .tracking-tighter, .tracking-tightest) { letter-spacing: 0 !important; }
html[lang="te"] :is(.text-xs, .text-caption, .text-\[10px\], .text-\[11px\]) { font-size: 0.75rem; }
html[lang="te"] .page-card .text-xs { font-size: 0.75rem !important; }
html[lang="te"] .l360-card-body h3 { line-height: 1.45 !important; }
html[lang="te"] .l360-carousel-card {              /* fixed 232px height clips 2-line Telugu titles */
    height: auto !important; min-height: 232px !important; max-height: none !important;
}


/* ─── 7. ACCENT CLEAN-UP — remove stray blues/indigo ─────────────────────── */
.hero-wash { background-image: linear-gradient(to bottom, rgba(17,17,17,0.045), rgba(17,17,17,0.015) 55%, transparent); }
.bg-gradient-hero   { background: linear-gradient(135deg, #111111 0%, #2B2B2B 100%) !important; }
.bg-gradient-slate  { background: linear-gradient(135deg, #0B0B0B 0%, #1A1A1A 100%) !important; }
.bg-gradient-gold   { background: linear-gradient(135deg, #B45309 0%, #92400E 100%) !important; }
.bg-gradient-crimson{ background: linear-gradient(135deg, #C53030 0%, #9B2424 100%) !important; }

.l360-search-pill { border-color: var(--card-border); box-shadow: var(--shadow-md); }
.l360-search-pill:focus-within {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-md);
}


/* ─── 8. BADGES — green appeared as #16803C, #16a34a, #047857, #059669;
         red as #C53030, #dc2626, rose gradient. Semantic tokens only. ─────── */
.badge-verified, .l360-badge-verified {
    background-color: var(--l360-success-bg); color: var(--l360-success);
    border: 1px solid var(--l360-success-border);
    font-size: 0.6875rem; font-weight: 700;
}
.swiggy-rating-badge {                       /* white on #16a34a was 3.3:1 at 11px */
    background-color: var(--l360-success); color: #FFFFFF; box-shadow: none;
    font-size: 0.6875rem; font-weight: 700;
}
.l360-discount-badge, .swiggy-offer-badge {
    background: var(--l360-danger); color: #FFFFFF; box-shadow: none;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em;
}
.badge-new { font-size: 0.6875rem; }


/* ─── 9. FOOTER — navy (#090d16 / #060910 / #04060b) + #0071E3 hover was the
         only dark surface and the only navy. Neutral near-black, no blue. ─── */
.l360-site-footer          { background-color: #111111 !important; border-top-color: rgba(255,255,255,0.08) !important; }
.l360-footer-cities-strip  { background-color: #0B0B0B; }
.l360-footer-bottom        { background-color: #050505; }
.l360-footer-brand-desc,
.l360-footer-link-item a,
.l360-city-badge           { color: #A3A3A3 !important; }          /* 7.5:1 */
.l360-footer-link-item a svg,
.l360-footer-link-item a i { color: #8A8A8A !important; }
.l360-footer-bottom-inner  { color: #8A8A8A; }                     /* was #64748b = 4.3:1 */
.l360-footer-bottom a      { color: #A3A3A3; }
.l360-footer-link-item a:hover svg,
.l360-footer-link-item a:hover i { color: #FFFFFF !important; }
.l360-social-btn:hover,
.l360-city-badge:hover {
    background-color: #FFFFFF !important; border-color: #FFFFFF !important;
    color: #111111 !important; box-shadow: none !important;
}


/* ─── 10. TOM-SELECT — 56px / 18px / 8px radius / slate-50 / blue focus
          against 44px / 14–16px / 12px / white / brand inputs. `ring:` in the
          custom file is not a CSS property (focus ring never rendered). ───── */
.ts-wrapper .ts-control {
    min-height: 44px; padding: 0 14px;
    background-color: var(--color-surface);
    border: 1px solid var(--control-border);
    border-radius: 12px;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.ts-wrapper .ts-control > input,
.ts-wrapper .ts-control .item { font-size: 0.875rem; font-weight: 500; color: var(--color-text); }
.ts-wrapper .ts-control .item { font-weight: 600; }
.ts-wrapper .ts-dropdown {
    border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.ts-wrapper .ts-dropdown .option,
.ts-wrapper .ts-dropdown .optgroup-header,
.ts-wrapper .ts-dropdown .no-results,
.ts-wrapper .ts-dropdown .create { padding: 12px 14px; font-size: 0.875rem; color: var(--color-text-sub); }
.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .active { background-color: var(--gray-100); color: var(--color-text); }
@media (max-width: 767px) {
    .ts-wrapper .ts-control > input, .ts-wrapper .ts-control .item,
    .ts-wrapper .ts-dropdown .option { font-size: 16px; }
}

/* ─── 11. PROFILE STICKY STRIPS ALIGNMENT ───────────────────────────────── */
:root {
    --site-header-height: 56px;
}
@media (min-width: 1024px) {
    :root {
        --site-header-height: 64px;
    }
}

/* Top Spy Scroll Strip (#bizTabBar) */
#bizTabBar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--site-header-height, 56px) !important;
    z-index: 40 !important;
}
@media (min-width: 1024px) {
    #bizTabBar {
        top: 64px !important;
    }
}

/* Target section scroll margin so headers stop cleanly below fixed nav & sticky tab bar */
#sec-about, #sec-products, #sec-gallery, #sec-reviews, #sec-offers, #sec-faq, #sec-nearby, [id^="sec-pb_"], [id^="sec-"] {
    scroll-margin-top: calc(var(--site-header-height, 56px) + 64px) !important;
}
@media (min-width: 1024px) {
    #sec-about, #sec-products, #sec-gallery, #sec-reviews, #sec-offers, #sec-faq, #sec-nearby, [id^="sec-pb_"], [id^="sec-"] {
        scroll-margin-top: calc(64px + 64px) !important;
    }
}

/* Bottom Action Strip (#bizStickyBar) */
#bizStickyBar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 90 !important;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)) !important;
}

/* ─── 12. MOBILE RESPONSIVE DIALOGS, MODALS & TOASTS ────────────────────── */
dialog {
    margin: auto !important;
    max-height: 90dvh !important;
    max-height: 90vh;
    border: none;
    overscroll-behavior: contain;
}
dialog::backdrop {
    background-color: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
@media (max-width: 640px) {
    dialog {
        width: calc(100% - 1.5rem) !important;
        max-width: calc(100% - 1.5rem) !important;
        max-height: 88dvh !important;
        max-height: 88vh;
        border-radius: 1.25rem !important;
    }
}

/* Toast and notification banner mobile safety */
.l360-toast, [id$="Toast"], [id$="toast"] {
    max-width: calc(100% - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}