/* =============================================
   Travel Guardian — Material Design
   Color Palette: White · Blue · Green · Black (text only)
   ============================================= */

/* ---- Global base font ---- */
html, body { font-size: 16px; }

/* Prevent horizontal overflow on all devices */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }

/* ── Global touch responsiveness: eliminate 300ms tap delay everywhere ── */
* {
    -webkit-tap-highlight-color: transparent; /* remove grey flash on all taps */
}
a, button, input, select, textarea, label,
[role="button"], [tabindex],
.rz-button, .rz-button-base,
.rz-dropdown, .rz-autocomplete,
.rz-slider, .rz-checkbox, .rz-switch,
.rz-menuitem-link, .rz-panelmenu-item,
.tgp-place-card, .autocomplete-suggestion,
.tgp-quick-btn, .pd-action-btn, .tgp-fav-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* Prevent text selection on tap for interactive card-like elements */
.tgp-place-card, .tgp-quick-btn, .tgp-fav-card {
    user-select: none;
    -webkit-user-select: none;
}
/* Autocomplete suggestion rows: large tap target + instant active state */
.autocomplete-suggestion {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}
.autocomplete-suggestion:active {
    background: #E3F2FD !important;
}

:root {
    /* Blue — primary/accent */
    --tgp-blue:           #1976D2;
    --tgp-blue-dark:      #1565C0;
    --tgp-blue-light:     #42A5F5;
    --tgp-blue-subtle:    #E3F2FD;

    /* Green — success/verified */
    --tgp-green:          #43A047;
    --tgp-green-dark:     #2E7D32;
    --tgp-green-light:    #66BB6A;
    --tgp-green-subtle:   #E8F5E9;

    /* Neutral — backgrounds (NO black backgrounds) */
    --tgp-white:          #FFFFFF;
    --tgp-bg:             #FAFAFA;
    --tgp-bg-2:           #F5F5F5;
    --tgp-separator:      #E0E0E0;
    --tgp-separator-2:    #EEEEEE;

    /* Text — black/dark for text ONLY */
    --tgp-text-primary:   #212121;
    --tgp-text-secondary: #424242;
    --tgp-text-hint:      #757575;
    --tgp-text-disabled:  #9E9E9E;

    /* Keep --tgp-black alias for backward compat (text use only) */
    --tgp-black:          #212121;
    --tgp-label:          #212121;
    --tgp-label-2:        #424242;
    --tgp-label-3:        #757575;
    --tgp-label-4:        #9E9E9E;

    /* Material Design Elevation Shadows */
    --tgp-shadow-sm:  0 2px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --tgp-shadow-md:  0 4px 8px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
    --tgp-shadow-lg:  0 8px 16px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
    --tgp-shadow-xl:  0 16px 32px rgba(0,0,0,0.12), 0 6px 12px rgba(0,0,0,0.08);

    /* Border radius */
    --tgp-radius-sm:  6px;
    --tgp-radius-md:  10px;
    --tgp-radius-lg:  14px;
    --tgp-radius-xl:  20px;

    /* Radzen Override — Primary = Blue */
    --rz-primary:              #1976D2;
    --rz-primary-light:        #42A5F5;
    --rz-primary-lighter:      #E3F2FD;
    --rz-primary-dark:         #1565C0;
    --rz-primary-darker:       #0D47A1;
    --rz-primary-color:        #1976D2;

    /* Radzen Override — Success = Green */
    --rz-success:              #43A047;
    --rz-success-light:        #66BB6A;
    --rz-success-lighter:      #E8F5E9;
    --rz-success-dark:         #2E7D32;
    --rz-success-darker:       #1B5E20;

    /* Radzen Override — Info = Material Blue */
    --rz-info:                 #1976D2;
    --rz-info-light:           #42A5F5;
    --rz-info-lighter:         #E3F2FD;

    /* Radzen Override — Warning = Amber */
    --rz-warning:              #FFA000;

    /* Radzen Override — Danger = Material Red */
    --rz-danger:               #D32F2F;

    /* Bootstrap overrides */
    --bs-primary:              #1976D2;
    --bs-primary-rgb:          25, 118, 210;
    --bs-success:              #43A047;
    --bs-success-rgb:          67, 160, 71;
    --bs-body-font-family:     'Roboto', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --bs-body-bg:              #FAFAFA;
    --bs-body-color:           #212121;
}

/* ---- Base Typography & Layout ---- */
html, body {
    font-family: 'Roboto', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--tgp-bg);
    color: var(--tgp-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tgp-text-primary);
}

h1 { font-size: clamp(2.31rem, 5.29vw, 3.63rem); }
h2 { font-size: clamp(1.85rem, 3.97vw, 2.65rem); }
h3 { font-size: clamp(1.59rem, 3.31vw, 1.99rem); }
h4 { font-size: 1.52rem; }

a, .btn-link {
    color: var(--tgp-blue-dark);
    text-decoration: none;
}
a:hover { color: var(--tgp-blue-dark); text-decoration: underline; }

h1:focus { outline: none; }

/* ---- Radzen Layout Global Fixes ---- */
.rz-layout { background-color: var(--tgp-bg) !important; }

/* ---- Zero all edge padding on body content — cards fill full width ---- */
.rz-body > div.rz-p-4 {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.rz-body > div {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---- Material Cards ---- */
.rz-card {
    border-radius: var(--tgp-radius-md) !important;
    border: 1px solid var(--tgp-separator) !important;
    box-shadow: var(--tgp-shadow-sm) !important;
    background: var(--tgp-white) !important;
}

/* ---- White Header ---- */
.rz-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--tgp-separator) !important;
    box-shadow: var(--tgp-shadow-sm) !important;
}

/* ---- White Sidebar ---- */
.rz-sidebar {
    background: var(--tgp-white) !important;
    border-right: 1px solid var(--tgp-separator) !important;
}

/* ---- Material Primary Buttons (Blue) ---- */
.btn-primary,
.rz-button-primary,
.rz-btn-primary {
    background: var(--tgp-blue) !important;
    border-color: var(--tgp-blue) !important;
    color: #ffffff !important;
    border-radius: var(--tgp-radius-sm) !important;
    font-weight: 600 !important;
}
.btn-primary:hover,
.rz-button-primary:hover {
    background: var(--tgp-blue-dark) !important;
    border-color: var(--tgp-blue-dark) !important;
    color: #ffffff !important;
}

/* ---- Success Buttons (Green) ---- */
.btn-success, .rz-button-success {
    background: var(--tgp-green) !important;
    border-color: var(--tgp-green) !important;
    border-radius: var(--tgp-radius-sm) !important;
    font-weight: 600 !important;
    color: #fff !important;
}
.btn-success:hover, .rz-button-success:hover {
    background: var(--tgp-green-dark) !important;
    border-color: var(--tgp-green-dark) !important;
}

/* ---- Button Focus Rings ---- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--tgp-blue) !important;
}

/* ---- Input fields ---- */
.rz-textbox, .rz-autocomplete, .rz-inputtext,
input.form-control, textarea.form-control {
    border-radius: var(--tgp-radius-sm) !important;
    border: 1.5px solid var(--tgp-separator) !important;
    background: var(--tgp-white) !important;
    font-family: 'Roboto', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.rz-textbox:focus, .rz-inputtext:focus, input.form-control:focus {
    border-color: var(--tgp-blue) !important;
    box-shadow: 0 0 0 3px rgba(25,118,210, 0.18) !important;
}
/* ---- Dropdown — single border, no double outline ---- */
.rz-dropdown {
    border: 1.5px solid var(--tgp-separator) !important;
    border-radius: var(--tgp-radius-sm) !important;
    background: var(--tgp-white) !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Roboto', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.rz-dropdown .rz-inputtext,
.rz-dropdown .rz-dropdown-label {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-right: 2rem !important;
}
.rz-dropdown:focus-within,
.rz-dropdown.rz-state-focused {
    border-color: var(--tgp-blue) !important;
    box-shadow: 0 0 0 3px rgba(25,118,210, 0.18) !important;
}

/* ---- Badge tweaks ---- */
.rz-badge { border-radius: 20px !important; font-weight: 600 !important; font-size: 0.86rem !important; }

/* ---- Panel Menu (Sidebar Nav) ---- */
.rz-panel-menu .rz-menuitem-link {
    border-radius: var(--tgp-radius-sm) !important;
    margin: 2px 8px !important;
    font-weight: 500 !important;
    color: var(--tgp-text-primary) !important;
    transition: background 0.15s, color 0.15s !important;
}
.rz-panel-menu .rz-menuitem-link:hover,
.rz-panel-menu .rz-menuitem-link.rz-state-active {
    background: var(--tgp-blue-subtle) !important;
    color: var(--tgp-blue-dark) !important;
}
.rz-panel-menu .rz-menuitem-link .rz-menuitem-icon {
    color: var(--tgp-blue-dark) !important;
}

/* ---- Footer ---- */
.rz-footer {
    background: var(--tgp-white) !important;
    border-top: 1px solid var(--tgp-separator) !important;
}

/* ---- Content area ---- */
.content { padding-top: 1.1rem; }

/* ---- Form validation ---- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--tgp-green); }
.invalid { outline: 1px solid #D32F2F; }
.validation-message { color: #D32F2F; }

/* ---- Error Boundary ---- */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--tgp-radius-sm);
}
.blazor-error-boundary::after { content: "An error has occurred." }

.darker-border-checkbox.form-check-input { border-color: #929292; }

/* ---- Material Page Headers (LIGHT — no dark backgrounds) ---- */
.apple-page-header,
.md-page-header {
    background: var(--tgp-white) !important;
    border-radius: var(--tgp-radius-lg) !important;
    padding: 1.75rem 2rem !important;
    margin-bottom: 1.5rem !important;
    border-left: 4px solid var(--tgp-blue) !important;
    box-shadow: var(--tgp-shadow-md) !important;
    color: var(--tgp-text-primary) !important;
}
.apple-page-header h2, .apple-page-header h3,
.md-page-header h2, .md-page-header h3 {
    color: var(--tgp-text-primary) !important;
    margin-bottom: 0.25rem !important;
    font-size: 1.99rem !important;
    letter-spacing: -0.02em;
}
.apple-page-header p, .md-page-header p {
    color: var(--tgp-text-hint) !important;
    margin: 0 !important;
    font-size: 1.25rem;
}

/* ---- Material Hero Section (LIGHT) ---- */
.apple-hero,
.md-hero {
    background: linear-gradient(145deg, #E3F2FD 0%, #E3F2FD 60%, #EBF5FB 100%);
    border-radius: var(--tgp-radius-xl) !important;
    padding: 3rem 2rem !important;
    margin-bottom: 2rem !important;
    box-shadow: var(--tgp-shadow-md) !important;
    position: relative;
    overflow: hidden;
    border: 1px solid #90CAF9 !important;
}
.apple-hero::before, .md-hero::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: var(--tgp-blue);
    border-radius: 50%;
    opacity: 0.10;
    pointer-events: none;
}
.apple-hero::after, .md-hero::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -30px;
    width: 200px; height: 200px;
    background: var(--tgp-green);
    border-radius: 50%;
    opacity: 0.08;
    pointer-events: none;
}

/* ---- Material Feature Cards ---- */
.apple-feature-card {
    border-radius: var(--tgp-radius-lg) !important;
    border: 1px solid var(--tgp-separator) !important;
    box-shadow: var(--tgp-shadow-sm) !important;
    background: var(--tgp-white) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    overflow: hidden !important;
}
.apple-feature-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--tgp-shadow-md) !important;
}

/* ---- Icon Circles ---- */
.apple-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    font-size: 37px;
    margin-bottom: 1rem;
}
.apple-icon-circle.orange,
.apple-icon-circle.blue  { background: var(--tgp-blue-subtle);  color: var(--tgp-blue-dark); }
.apple-icon-circle.green { background: var(--tgp-green-subtle); color: var(--tgp-green-dark); }
.apple-icon-circle.black { background: #F5F5F5;                 color: var(--tgp-text-primary); }

/* ---- Sign-in Card ---- */
.apple-auth-card {
    border-radius: var(--tgp-radius-xl) !important;
    border: 1px solid var(--tgp-separator) !important;
    box-shadow: var(--tgp-shadow-lg) !important;
    background: var(--tgp-white) !important;
    padding: 2.5rem !important;
    max-width: 440px;
    margin: 0 auto;
}

/* ---- Stat Items ---- */
.apple-stat-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--tgp-separator);
    gap: 0.75rem;
}
.apple-stat-row:last-child { border-bottom: none; }
.apple-stat-label {
    flex: 1;
    color: var(--tgp-text-hint);
    font-size: 1.32rem;
}
.apple-stat-value {
    font-weight: 600;
    color: var(--tgp-text-primary);
    font-size: 1.32rem;
}

/* ---- PWA Specific ---- */
.pwa-standalone {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
.pwa-browser { position: relative; }

#pwa-install-button { transition: all 0.3s ease; }
#pwa-install-button:hover { background: var(--tgp-blue-dark) !important; transform: scale(1.05); }

@media (display-mode: standalone) {
    .browser-only { display: none !important; }
    .rz-header { padding-top: env(safe-area-inset-top); }
}

@media (max-width: 768px) {
    #pwa-install-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        top: auto;
        font-size: 14px;
        padding: 8px 12px;
    }
    .rz-body { padding-bottom: 80px !important; }
}

/* ---- Bottom Tab Bar (Mobile Nav) ---- */
.tgp-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #FFFFFF;
    border-top: 1px solid var(--tgp-separator);
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}
.tgp-bottom-nav-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    height: 58px;
    padding: 0;
    width: 100%;
}
.tgp-tab-item {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    color: var(--tgp-text-hint);
    cursor: pointer;
    background: none;
    border: none;
    padding: 5px 2px 4px;
    text-decoration: none;
    transition: color 0.12s, background 0.08s;
    gap: 3px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    user-select: none;
    text-align: center;
    will-change: background;
}
.tgp-tab-item:hover, .tgp-tab-item.active {
    color: var(--tgp-blue-dark);
    text-decoration: none;
}
.tgp-tab-item:active {
    background: rgba(25,118,210,0.10);
    border-radius: 10px;
}
.tgp-tab-item.active .material-icons { color: var(--tgp-blue); }
.tgp-tab-item .material-icons { font-size: 28px; transition: color 0.15s; }
.tgp-tab-label { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; line-height: 1; }

@media (max-width: 768px) {
    .tgp-bottom-nav { display: flex !important; }
    .rz-sidebar { display: none !important; }
    /* Hide desktop footer — bottom nav replaces it on mobile */
    .rz-footer { display: none !important; }
    /* Content clears the bottom nav (58px) + safe-area */

    /* ── Zero side padding — cards fill full screen width ── */
    .rz-body > div.rz-p-4,
    .rz-body > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }
    /* Radzen utility padding overrides on mobile */
    .rz-p-4  { padding: 0.5rem 0 !important; }
    .rz-px-4 { padding-left: 0 !important; padding-right: 0 !important; }
    .rz-py-4 { padding-top:  0.5rem !important; padding-bottom: 0.5rem !important; }
    .rz-card, .place-card-clickable { border-radius: 0 !important; }

    /* ── Readable text on mobile ── */
    html, body { font-size: 18px; }
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.45rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    p, li, label, .rz-text-body1, .rz-text-body2 { font-size: 1rem !important; }
    /* Radzen caption — keep legible on mobile */
    .rz-text-caption, [class*="rz-text-caption"] { font-size: 0.88rem !important; }
    small, .small { font-size: 0.85rem !important; }
    /* Allow inline small font styles to be readable; only override very small ones */
    [style*="font-size:0.7"], [style*="font-size: 0.7"],
    [style*="font-size:0.8"], [style*="font-size: 0.8"] { font-size: 0.88rem !important; }

    /* ── Page/section headers: tighter padding ── */
    .apple-page-header,
    .md-page-header {
        padding: 0.875rem 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    .apple-page-header h2, .apple-page-header h3,
    .md-page-header h2, .md-page-header h3 {
        font-size: 1.59rem !important;
    }

    /* ── Hero: narrower vertical spacing ── */
    .apple-hero, .md-hero {
        padding: 1.5rem 1rem !important;
        margin-bottom: 0.875rem !important;
    }

    /* ── Cards: flat on mobile — remove decorative chrome ── */
    .rz-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }
    .apple-feature-card {
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    /* Feature tiles become flat list rows */
    .tgp-feature-tile {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid var(--tgp-separator) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 1rem 1rem !important;
        margin: 0 !important;
    }
    .tgp-feature-tile:last-child { border-bottom: none !important; }
    .tgp-feature-icon { margin-bottom: 0 !important; flex-shrink: 0; }
    .tgp-feature-tile h4 { font-size: 1rem !important; margin-bottom: 0.2rem !important; }
    .tgp-feature-tile p  { font-size: 0.9rem !important; margin: 0 !important; color: var(--tgp-text-secondary) !important; }

    /* ── Header: slim on mobile ── */
    .rz-header { height: 50px !important; }
    .tgp-brand-name { font-size: 1rem; }

    /* ── Home page: full-bleed on mobile ── */
    .tgp-hero {
        border-radius: 0 !important;
        margin-left: 0 !important; margin-right: 0 !important;
        margin-bottom: 0.5rem !important;
        padding: 1.25rem 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .tgp-signin-card {
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 1rem !important;
    }
    .tgp-welcome-block {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        padding: 0.875rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    .tgp-cta-buttons { -webkit-flex-direction: column !important; flex-direction: column !important; gap: 0.5rem !important; padding: 0 1rem !important; }
    .tgp-cta-buttons .rz-button { width: 100% !important; min-width: unset !important; }
    .tgp-features-grid { gap: 0 !important; margin-bottom: 0 !important; }
    .tgp-hero-subtitle { font-size: 0.95rem !important; margin-bottom: 1rem !important; }
    /* Bottom nav clear */
    .rz-body { padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important; }
}

/* ── iPhone & small phones (≤430px covers SE/mini/14/15/Pro Max) ── */
@media (max-width: 430px) {
    html, body { font-size: 17px !important; }
    h1 { font-size: 1.55rem !important; font-weight: 700 !important; }
    h2 { font-size: 1.3rem !important; font-weight: 700 !important; }
    h3 { font-size: 1.12rem !important; font-weight: 700 !important; }
    h4 { font-size: 1.02rem !important; font-weight: 700 !important; }
    p, li, label, .rz-text-body1, .rz-text-body2 { font-size: 0.97rem !important; }
    .rz-text-caption, [class*="rz-text-caption"] { font-size: 0.85rem !important; }
    small, .small { font-size: 0.82rem !important; }
    /* Tighten up inline very-small font sizes */
    [style*="font-size:0.7"], [style*="font-size: 0.7"],
    [style*="font-size:0.8"], [style*="font-size: 0.8"] { font-size: 0.85rem !important; }

    /* Tighter hero & signin card */
    .tgp-hero { padding: 1rem 0.875rem !important; }
    .tgp-signin-card { padding: 0.875rem !important; }
    .tgp-hero-subtitle { font-size: 0.9rem !important; }

    /* Compact feature tiles */
    .tgp-feature-tile { padding: 0.75rem 0.875rem !important; gap: 0.75rem !important; }
    .tgp-feature-icon { width: 36px !important; height: 36px !important; }
    .tgp-feature-icon .material-icons { font-size: 20px !important; }
    .tgp-feature-tile h4 { font-size: 0.95rem !important; }
    .tgp-feature-tile p  { font-size: 0.85rem !important; }

    /* Compact bottom nav */
    .tgp-bottom-nav-inner { height: 52px !important; }
    .tgp-tab-item .material-icons { font-size: 24px !important; }
    .tgp-tab-label { font-size: 14px !important; font-weight: 700 !important; }
    .rz-body { padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important; }

    /* AppBar title sizing */
    .tgp-appbar-title { font-size: 1rem !important; }
}

/* ---- Spin animation ---- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.spin { animation: spin 1s linear infinite; }

/* ---- Offline indicator ---- */
.offline-indicator {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #D32F2F;
    color: white;
    text-align: center;
    padding: 10px;
    z-index: 9998;
    display: none;
    font-weight: 600;
    font-size: 1.2rem;
}
.offline-indicator.show { display: block; }

/* ---- DataGrid Tweaks ---- */
.rz-grid-table { border-radius: var(--tgp-radius-md) !important; overflow: hidden; }
.rz-grid-table thead th { background: var(--tgp-bg-2) !important; font-weight: 600 !important; color: var(--tgp-text-secondary) !important; font-size: 1.06rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }

/* ---- Progress Bar ---- */
.rz-progressbar .rz-progressbar-value { background: var(--tgp-blue) !important; border-radius: 8px !important; }

/* ---- Slider ---- */
.rz-slider-range { background: var(--tgp-blue) !important; }
.rz-slider-handle { border-color: var(--tgp-blue) !important; box-shadow: 0 0 0 3px rgba(25,118,210,0.2) !important; }

/* ---- Notification toast ---- */
.rz-notification { border-radius: var(--tgp-radius-md) !important; }

/* ---- Material place card ---- */
.place-card-clickable {
    border-radius: var(--tgp-radius-md) !important;
    border: 1.5px solid var(--tgp-separator) !important;
    background: var(--tgp-white) !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
.place-card-clickable:hover {
    border-color: var(--tgp-blue) !important;
    box-shadow: 0 4px 16px rgba(25,118,210,0.15) !important;
    transform: translateY(-1px) !important;
}

/* ---- Booking status badges ---- */
.status-pending   { background: var(--tgp-blue-subtle)  !important; color: var(--tgp-blue-dark)      !important; }
.status-active    { background: var(--tgp-green-subtle) !important; color: var(--tgp-green-dark)     !important; }
.status-completed { background: #F5F5F5                 !important; color: var(--tgp-text-secondary) !important; }
.status-cancelled { background: rgba(211,47,47,0.08)    !important; color: #D32F2F                   !important; }