/* ═══════════════════════════════════════════════════════════════
   ReviewFloAI — Apple-Inspired Design System Overrides
   Source of truth: reviewflo-brand-guide.html
   Load AFTER all YNEX stylesheets
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────
   CSS Variables
   ──────────────────────────────────────── */
:root {
    /* Brand */
    --rf-black: #1D1D1F;
    --rf-blue: #0071E3;
    --rf-blue-hover: #0077ED;
    --rf-blue-bg: rgba(0, 113, 227, 0.07);
    /* Neutrals */
    --rf-text: #1D1D1F;
    --rf-text-secondary: #48484A;
    --rf-text-tertiary: #86868B;
    --rf-text-placeholder: #AEAEB2;
    --rf-border: #E8E8ED;
    --rf-surface: #F5F5F7;
    --rf-bg: #FFFFFF;
    --rf-card: #FFFFFF;
    /* Status */
    --rf-success: #34C759;
    --rf-success-text: #1B7A34; /* readable green for words, like "Flo is mentioning it" */
    --rf-warning: #FF9500;
    --rf-warning-bg: rgba(255, 149, 0, 0.1); /* soft amber box: pills, tiles, "If you fix one thing" */
    --rf-warning-text: #B26A00; /* readable orange for words, like "Not saved yet" */
    --rf-error: #FF3B30;
    --rf-error-text: #B4231A; /* readable red for words, like "Health or legal" */
    --rf-info: #5AC8FA;
    --rf-ai: #8b5cf6;
    /* Flo brand (logo colors). Flo only: --flo-gradient is never used on buttons. */
    --flo-1: #06B6D4; /* cyan, the "f" in the logo */
    --flo-2: #0EA5E9; /* sky, the "l" */
    --flo-3: #3B82F6; /* blue, the "o" */
    --flo-gradient: linear-gradient(135deg, var(--flo-1) 0%, var(--flo-2) 50%, var(--flo-3) 100%);
    /* Radius */
    --rf-radius-sm: 8px;
    --rf-radius-md: 12px;
    --rf-radius-lg: 16px;
    --rf-radius-xl: 20px;
    --rf-radius-full: 980px;
    /* Shadows */
    /*--rf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);*/
    --rf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    --rf-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --rf-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    /* Typography */
    --rf-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* YNEX overrides */
    --primary-color: #0071E3;
    --primary-rgb: 0, 113, 227;
    --side-menu-width: 270px;
}


/* ════════════════════════════════════════════
   BASE / GLOBAL
   ════════════════════════════════════════════ */

body {
    background-color: var(--rf-bg) !important;
    color: var(--rf-text);
    font-family: var(--rf-font);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ════════════════════════════════════════════
   PRIMARY COLOR → APPLE BLUE
   ════════════════════════════════════════════ */

.btn-primary,
[data-bs-theme] .btn-primary {
    background-color: var(--rf-blue) !important;
    border-color: var(--rf-blue) !important;
    border-radius: var(--rf-radius-full) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: all 0.2s ease;
}

    .btn-primary:hover,
    [data-bs-theme] .btn-primary:hover {
        background-color: var(--rf-blue-hover) !important;
        border-color: var(--rf-blue-hover) !important;
    }

    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active {
        background-color: var(--rf-blue-hover) !important;
        border-color: var(--rf-blue-hover) !important;
        box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;
    }

.btn-primary-light,
.btn-outline-primary {
    color: var(--rf-blue) !important;
    border-color: var(--rf-blue) !important;
    border-radius: var(--rf-radius-full) !important;
    font-weight: 600;
    background: transparent;
}

    .btn-primary-light:hover,
    .btn-outline-primary:hover {
        background-color: var(--rf-blue-bg) !important;
        color: var(--rf-blue) !important;
        border-color: var(--rf-blue) !important;
    }

/* Ghost / light button */
.btn-light,
.btn-outline-light {
    border-radius: var(--rf-radius-full) !important;
}

/* Danger soft button */
.btn-outline-danger,
.btn-danger-light {
    border-radius: var(--rf-radius-full) !important;
}

/* All buttons get capsule radius */
.btn {
    border-radius: var(--rf-radius-full);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: all 0.2s ease;
}

/* Small buttons */
.btn-sm {
    padding: 6px 16px;
    font-size: 13px;
}

.btn-wave {
    border-radius: var(--rf-radius-full) !important;
}

.text-primary {
    color: var(--rf-blue) !important;
}

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

.bg-primary-transparent,
.bg-primary-transparent {
    background-color: var(--rf-blue-bg) !important;
    color: var(--rf-blue) !important;
}

.border-primary {
    border-color: var(--rf-blue) !important;
}

/* Links — color only, no underline */
a {
    color: var(--rf-blue);
    text-decoration: none;
}

    a:hover {
        color: var(--rf-blue-hover);
        text-decoration: none;
    }

/* Focus ring */
.form-control:focus,
.form-select:focus {
    border-color: var(--rf-blue);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

.form-control,
.form-select {
    border-radius: var(--rf-radius-md);
    border: 1.5px solid var(--rf-border);
    color: var(--rf-text);
    font-size: 14px;
}

    .form-control::placeholder {
        color: var(--rf-text-placeholder);
    }


/* ════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════ */

/*.card.custom-card {
    border: none;
    border-radius: var(--rf-radius-lg) !important;*/
    /*box-shadow: var(--rf-shadow-sm);*/
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);*/
    /*background: var(--rf-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}*/

.card.custom-card {
    border: none !important;
    border-radius: var(--rf-radius-lg) !important;
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);*/
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    background: var(--rf-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .card.custom-card:hover {
        /* Only for clickable cards — see .review-card below */
    }

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 16px 20px;
    border-top-left-radius: var(--rf-radius-lg);
    border-top-right-radius: var(--rf-radius-lg);
}

.card-body {
    padding: 20px;
}

.card-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--rf-text) !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}
    /* Remove teal accent line from card titles */
    .card-title::before {
        display: none !important;
    }


/* ════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════ */

.app-header {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.main-header {
    background: transparent !important;
}

/* Profile dropdown */
.header-profile-dropdown {
    border-radius: var(--rf-radius-md) !important;
    box-shadow: var(--rf-shadow-md) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    min-width: 200px;
}


/* ════════════════════════════════════════════
   STATUS COLORS — Apple HIG
   ════════════════════════════════════════════ */

/* Success */
.bg-success {
    background-color: var(--rf-success) !important;
}

.bg-success-transparent {
    background-color: rgba(52, 199, 89, 0.1) !important;
    color: var(--rf-success) !important;
}

.text-success {
    color: var(--rf-success) !important;
}

/* Words in green use the readable shade. Bright --rf-success stays for shapes like Guard's shield. */
.text-success {
    color: var(--rf-success-text) !important;
}

/* A small dot that carries the meaning next to a label: green = good, amber = worth a look */
.rf-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: 1px;
}

.rf-dot-ok {
    background: var(--rf-success);
}

.rf-dot-warn {
    background: var(--rf-warning);
}

/* Warning */
.bg-warning {
    background-color: var(--rf-warning) !important;
}

.bg-warning-transparent {
    background-color: var(--rf-warning-bg) !important;
    color: var(--rf-warning) !important;
}

.text-warning {
    color: var(--rf-warning) !important;
}

.bg-warning-subtle {
    background-color: rgba(255, 149, 0, 0.07) !important;
}

/* Danger / Error */
.bg-danger {
    background-color: var(--rf-error) !important;
}

.bg-danger-transparent {
    background-color: rgba(255, 59, 48, 0.07) !important;
    color: var(--rf-error) !important;
}

.text-danger {
    color: var(--rf-error) !important;
}

/* Info */
.bg-info-transparent {
    background-color: rgba(90, 200, 250, 0.1) !important;
    color: #0A84FF !important;
}

/* AI / Purple */
.bg-purple {
    background-color: var(--rf-ai) !important;
}

.bg-purple-transparent {
    background-color: rgba(175, 82, 222, 0.1) !important;
    color: var(--rf-ai) !important;
}

.alert-purple {
    background-color: rgba(175, 82, 222, 0.07);
    border-color: rgba(175, 82, 222, 0.15);
    border-left: 4px solid var(--rf-ai);
    color: #7C3AED;
}


/* ════════════════════════════════════════════
   BADGES & PILLS
   ════════════════════════════════════════════ */

.badge {
    border-radius: var(--rf-radius-full);
    font-weight: 600;
    letter-spacing: 0.01em;
}

    .badge.rounded-pill {
        border-radius: var(--rf-radius-full);
    }


/* ════════════════════════════════════════════
   PROGRESS BARS
   ════════════════════════════════════════════ */

.progress {
    border-radius: var(--rf-radius-full);
    background: var(--rf-surface);
}

.progress-bar.bg-primary {
    background: #0071E3 !important;
}


/* ════════════════════════════════════════════
   NAV TABS
   ════════════════════════════════════════════ */

.nav-tabs .nav-link.active {
    color: var(--rf-blue);
    border-bottom-color: var(--rf-blue);
}

.nav-tabs .nav-link {
    color: var(--rf-text-tertiary);
    font-weight: 500;
}

    .nav-tabs .nav-link:hover {
        color: var(--rf-text);
    }


/* ════════════════════════════════════════════
   AVATARS
   ════════════════════════════════════════════ */

.avatar {
    border-radius: var(--rf-radius-md);
}

.avatar-rounded {
    border-radius: 50%;
}


/* ════════════════════════════════════════════
   REVIEW CARDS (Inbox)
   ════════════════════════════════════════════ */

/* Rest: flat white. Hover: a soft lift, the blue words underline, the arrow nudges right.
   Tap: a quick press-in. Blue is for the words you act on, never the frame.
   Used by every review list: Needs your OK, Following up, All reviews. */
.review-card {
    cursor: pointer;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.1s ease;
    border: 1.5px solid transparent !important;
    margin-bottom: 16px !important;
}

    /* inline-block so the arrow can move, and so the underline stops at the words */
    .review-card .rf-link i {
        display: inline-block;
        transition: transform 0.15s ease;
    }

    /* Tap: works in light and dark */
    .review-card:active {
        filter: brightness(0.97);
    }

@media (hover: hover) {
    .review-card:hover {
        box-shadow: var(--rf-shadow-md) !important;
        transform: translateY(-1px);
    }

        .review-card:hover .rf-link {
            text-decoration: underline;
        }

            .review-card:hover .rf-link i {
                transform: translateX(2px);
            }
}

/* Phone or computer set to "Reduce motion": keep the shadow, skip the movement */
@media (prefers-reduced-motion: reduce) {
    .review-card,
    .review-card .rf-link i {
        transition: none;
    }

        .review-card:hover,
        .review-card:hover .rf-link i {
            transform: none;
        }
}

/* ════════════════════════════════════════════
   STAR RATING
   ════════════════════════════════════════════ */

.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

    .star-rating .ti-star-filled {
        color: var(--rf-warning);
    }

    .star-rating .ti-star {
        color: #D1D1D6;
    }

.star-rating-sm {
    font-size: 14px;
}

.star-rating-md {
    font-size: 18px;
}

.star-rating-lg {
    font-size: 24px;
}

.star-value {
    margin-left: 6px;
    font-weight: 600;
    color: var(--rf-text);
}

.star-rating-sm .star-value {
    font-size: 12px;
}

.star-rating-md .star-value {
    font-size: 14px;
}

.star-rating-lg .star-value {
    font-size: 16px;
}

/* ════════════════════════════════════════════
   STAR PICKER (Quick Reply)
   ════════════════════════════════════════════ */

.rf-star {
    font-size: 1.75rem;
    line-height: 1;
    color: #D1D1D6;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

    .rf-star:hover:not(:disabled) {
        color: #DAA520 !important;
        transform: scale(1.15);
    }

    .rf-star:disabled {
        cursor: default;
        opacity: 0.8;
    }

.rf-star-active {
    color: #DAA520;
}

/* ════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn 0.2s ease;
}

.modal-card {
    animation: scaleIn 0.2s ease;
    margin: 1rem;
    border-radius: var(--rf-radius-xl) !important;
    box-shadow: var(--rf-shadow-lg);
}

.modal-content {
    border-radius: var(--rf-radius-xl) !important;
    border: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ════════════════════════════════════════════
   ACCORDION (Help page)
   ════════════════════════════════════════════ */

.accordion-button:not(.collapsed) {
    background-color: var(--rf-blue-bg);
    color: var(--rf-blue);
}

.accordion-button:focus {
    box-shadow: none;
    border-color: var(--rf-blue);
}

.accordion-item {
    border-radius: var(--rf-radius-md) !important;
    border-color: var(--rf-border);
}


/* ════════════════════════════════════════════
   VIDEO ITEM (Help page)
   ════════════════════════════════════════════ */

.video-item {
    transition: border-color 0.15s ease;
}

    .video-item:hover {
        border-color: var(--rf-blue) !important;
    }


/* ════════════════════════════════════════════
   ALERTS
   ════════════════════════════════════════════ */

.alert {
    border-radius: var(--rf-radius-md);
}

.alert-success {
    background-color: rgba(52, 199, 89, 0.08);
    border-color: rgba(52, 199, 89, 0.15);
    color: #1B7A34;
}

.alert-warning {
    background-color: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.15);
    color: #8A5200;
}


/* ════════════════════════════════════════════
   PAGE TITLE
   ════════════════════════════════════════════ */

.page-title {
    font-weight: 800;
    font-size: 2.5rem;
    letter-spacing: -0.04em;
    color: var(--rf-text);
    line-height: 1.1;
}


/* ════════════════════════════════════════════
   SPINNER
   ════════════════════════════════════════════ */

.spinner-border.text-primary {
    color: var(--rf-blue) !important;
}


/* ════════════════════════════════════════════
   SWEETALERT
   ════════════════════════════════════════════ */

.swal2-cancel {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: var(--rf-text) !important;
    border-radius: var(--rf-radius-full) !important;
}

.swal2-popup {
    border-radius: var(--rf-radius-xl) !important;
}


/* ════════════════════════════════════════════
   DROPDOWN MENUS
   ════════════════════════════════════════════ */

.dropdown-menu {
    border-radius: var(--rf-radius-md) !important;
    box-shadow: var(--rf-shadow-md) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--rf-surface);
    color: var(--rf-text);
}


/* ════════════════════════════════════════════
   BG-LIGHT OVERRIDE
   ════════════════════════════════════════════ */

.bg-light {
    background-color: var(--rf-surface) !important;
}


/* ════════════════════════════════════════════
   TEXT UTILITIES
   ════════════════════════════════════════════ */

.text-muted {
    color: var(--rf-text-tertiary) !important;
}

.fw-semibold {
    letter-spacing: -0.01em;
}

h1, .h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

h2, .h2 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

h3, .h3 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h4, h5, h6,
.fw-bold {
    letter-spacing: -0.02em;
}


/* ════════════════════════════════════════════
   PASSWORD TOGGLE
   ════════════════════════════════════════════ */

.password-wrapper {
    position: relative;
}

    .password-wrapper input {
        padding-right: 40px;
    }

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--rf-text-tertiary);
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
}

    .password-toggle:hover {
        color: var(--rf-text);
    }


/* ════════════════════════════════════════════
   CURSOR / UTILITY
   ════════════════════════════════════════════ */

.cursor-pointer {
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .cursor-pointer:hover {
        box-shadow: var(--rf-shadow-md);
    }


/* ════════════════════════════════════════════
   SCROLLBAR
   Subtle, Apple-style thin scrollbar
   ════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.25);
    }


/* ════════════════════════════════════════════
   INBOX SEARCH CARD
   ════════════════════════════════════════════ */

.shadow-md {
    /*box-shadow: var(--rf-shadow-sm) !important;*/
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}


/* ════════════════════════════════════════════
   BORDER-DOTTED (Inbox status footer)
   ════════════════════════════════════════════ */

.border-dotted {
    border-top: 1px dashed rgba(0, 0, 0, 0.08) !important;
}

/* ════════════════════════════════════════════
   LOGO FIX — prevent sidebar clipping
   ════════════════════════════════════════════ */

.main-sidebar-header .header-logo {
    overflow: visible !important;
    padding-left: 8px !important;
}

    .main-sidebar-header .header-logo .desktop-logo {
        white-space: nowrap !important;
    }


/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */

.footer {
    background: #FFFFFF !important;
    border-top: none !important;
}


/* Remove border between logo and sidebar nav */
.main-sidebar-header {
    border-bottom: none !important;
}
/* Sidebar badges: orange means it needs you, soft gray means we're waiting on a guest */ .side-menu__item .badge.rf-badge-quiet {
    background: rgba(255, 255, 255, 0.18) !important;
}
.side-menu__item .badge {
    background: rgb(182, 68, 0) !important;
    color: white !important;
}

.main-sidebar-header {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 20px !important;
}


/* ── App Links ── */
/* Reusable link style: no underline by default, underline on hover (text only, not icons) */
.rf-link {
    text-decoration: none;
    color: #0071E3;
}

    .rf-link:hover {
        color: #0077ED;
    }

    .rf-link span {
        text-decoration: none;
    }

    .rf-link:hover span {
        text-decoration: underline !important;
    }

    .rf-link:hover {
        text-decoration: underline;
    }

        .rf-link:hover i {
            text-decoration: none;
        }


/* ── Apple-style nav arrows ── */
.rf-nav-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--rf-blue);
    background: var(--rf-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .rf-nav-arrow i {
        font-size: 22px;
        font-weight: 700;
        color: #ffffff;
    }

    .rf-nav-arrow:hover {
        background: #0062cc;
        border-color: #0062cc;
    }

        .rf-nav-arrow:hover i {
            color: #ffffff;
        }

    .rf-nav-arrow:disabled,
    .rf-nav-arrow:disabled:hover {
        background: var(--rf-surface);
        border-color: var(--rf-border);
        cursor: default;
        opacity: 1;
    }

        .rf-nav-arrow:disabled i,
        .rf-nav-arrow:disabled:hover i {
            color: var(--rf-text-placeholder);
        }

/* ── Apple-style search input ── */
.rf-search {
    position: relative;
}

    .rf-search input {
        padding-left: 36px;
        padding-right: 36px;
        border-radius: 8px;
    }

    .rf-search .rf-search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: #86868b;
        pointer-events: none;
    }

    .rf-search .rf-search-clear {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: #c7c7cc;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
    }

        .rf-search .rf-search-clear:hover {
            background: #d2d2d7;
        }

        .rf-search .rf-search-clear i {
            font-size: 12px;
            color: white;
        }



/* ── Apple-style button press ── */
.btn-primary:active {
    background-color: #0062cc !important;
    border-color: #0062cc !important;
    box-shadow: none !important;
    transform: none !important;
}


/* ── Rewrite input group ── */
.input-group > .form-control:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .btn:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}


/* ── Neutral filter dropdowns ── */
.rf-filter {
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    color: #1d1d1f;
    background-color: white;
    font-size: 13px;
    padding: 6px 28px 6px 10px;
}

    .rf-filter:focus {
        border-color: #86868b;
        box-shadow: none;
        outline: none;
    }

/* ── Modal close button — match nav arrow style ── */
.modal-card .btn-icon.btn-light {
    background: #e8e8ed;
    border: none;
    border-radius: 50%;
}

    .modal-card .btn-icon.btn-light:hover {
        background: #f5f5f7;
    }


/* ── Modal backdrop blur — Apple style ── */
.modal-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.3) !important;
}

/* ── SweetAlert backdrop blur — Apple style ── */
.swal2-container {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

/* ── SweetAlert button — match primary button height ── */
.swal2-confirm {
    padding: 8px 24px !important;
    font-size: 15px !important;
    border-radius: 6px !important;
}


/* ── Button hover — Apple style darken ── */
.btn-primary:hover {
    background-color: #0062cc !important;
    border-color: #0062cc !important;
}

.btn-outline-primary:hover {
    background-color: #0062cc !important;
    border-color: #0062cc !important;
    color: white !important;
}

/* Apple-style placeholder text */
::placeholder {
    /*color: #6e6e73 !important;*/
    color: var(--bs-secondary-color);
    opacity: 1 !important;
    font-weight: 400 !important;
    font-size: 15px !important;
}

/* Larger inputs globally */
.form-control,
.form-select {
    padding: 10px 10px;
    font-size: 15px;
}


/*.progress-bar.bg-primary {
    background: linear-gradient(90deg, #0071E3, #AF52DE) !important;
}
*/
/* Apple-style status tabs */
.rf-status-tabs {
    display: inline-flex;
    background: #ffffff;
    border-radius: 980px;
    padding: 3px;
    gap: 2px;
    border: 1px solid #E8E8ED;
}

.rf-status-tab {
    padding: 8px 20px;
    border-radius: 980px;
    font-size: 16px;
    font-weight: 500;
    color: #86868B;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}

    .rf-status-tab:hover {
        color: #1D1D1F;
        background: rgba(0, 0, 0, 0.04);
    }

    .rf-status-tab.active {
        background: #0071E3;
        color: #ffffff;
        font-weight: 600;
    }

        .rf-status-tab.active:hover {
            background: #0062cc;
            color: #ffffff;
        }

    .rf-status-tab .badge {
        font-size: 11px;
        padding: 2px 7px;
        vertical-align: middle;
    }

    /* Colored badges by status */
    .rf-status-tab[href*="pending"] .badge {
        background: rgb(182, 68, 0) !important;
        color: #ffffff;
    }

    .rf-status-tab[href*="waiting"] .badge {
        background: rgb(182, 68, 0) !important;
        color: #ffffff;
    }

    .rf-status-tab[href*="done"] .badge {
        background: #30D158 !important;
        color: #ffffff;
    }

    /* Active pill badges stay visible on dark bg */
    .rf-status-tab.active .badge {
        opacity: 0.95;
    }

/* Stat-grid cards equal height at all widths (tablet 4-up, mobile 2-up) */
.rf-stat-grid > [class*="col-"] {
    display: flex;
}

    .rf-stat-grid > [class*="col-"] > .card {
        width: 100%;
    }

/* Hide the decorative icon chip on the 4 stat boxes (mobile + tablet only) */
@media (max-width: 991.98px) {
    .rf-stat-grid .rf-card-icon-muted {
        display: none;
    }
}

/* Mobile: full width, smaller text */
@media (max-width: 576px) {
    .rf-status-tabs {
        display: flex;
        width: 100%;
    }

    .rf-status-tab {
        flex: 1;
        text-align: center;
        padding: 8px 10px;
        font-size: 13px;
    }
}


/*.review-card {
    border: 1px solid #E8E8ED !important;
}*/


/*.page {
    background: linear-gradient(180deg, #ffffff 0%, #e8f0fe 40%, #d4e4fc 100%) !important;
    min-height: 100vh;
}*/
/*
.page {
    background: linear-gradient(180deg, rgba(0, 113, 227, 0.01) 0%, rgba(0, 51, 153, 0.22) 100%) !important;
}*/

.page {
    /*background: #FAFBFC !important;*/
    background: #FAFAFB !important;
    /*background: #FFFFFF !important;*/
    min-height: 100vh;
}

.app-header {
    background: transparent !important;
    box-shadow: none !important;
}

.footer {
    background: transparent !important;
    box-shadow: none !important;
    border-top: none !important;
}


/*.app-sidebar {
    border-right: none !important;
}*/

.app-sidebar .main-sidebar-header {
    border-right: none !important;
    border-bottom: none !important;
}

.app-sidebar {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

    .app-sidebar .main-sidebar-header,
    .app-sidebar::before,
    .app-sidebar::after {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

.authentication {
    background: #FAFAFB;
    min-height: 100vh;
}

    /* ════ AUTH PAGES — smaller logo, less top margin ════ */
    .authentication .my-5.d-flex.justify-content-center {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

        .authentication .my-5.d-flex.justify-content-center img {
            height: 44px !important;
        }

/*body:has(.authentication) {
    background: linear-gradient(180deg, rgba(0,113,227,0.15) 0%, rgba(0,113,227,0.05) 50%, transparent 100%) !important;
    min-height: 100vh;
}*/

/*body:has(.authentication) {
    background: #F5F5F7 !important;
    min-height: 100vh;
}*/

body:has(.authentication) {
    background: #FAFAFB !important;
    min-height: 100vh;
}

.authentication {
    background: transparent !important;
}



.rf-filter {
    min-width: 160px;
    cursor: pointer;
    border: 1px solid #D2D2D7;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

    .rf-filter:hover {
        border-color: #1D1D1F;
    }

    .rf-filter:focus {
        border-color: #1D1D1F;
        box-shadow: none;
    }


/* Apple-style card title icons */
.rf-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
}

/*.app-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #e8f0fe 100%) !important;
}

    .app-sidebar .main-sidebar-header {
        background: transparent !important;
    }
*/

/*    .app-sidebar .side-menu__item.active,
    .app-sidebar .side-menu__item:hover {
        background: rgba(255, 255, 255, 0.7) !important;
        border-radius: 8px;
    }*/

/*.app-sidebar {
    background: #f0f4ff !important;
}

    .app-sidebar .main-sidebar-header {
        background: transparent !important;
    }

*/


.review-card-detail {
    /*box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;*/
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06) !important;*/
    box-shadow: none !important;

}

/* SweetAlert overrides */
.swal2-confirm {
    font-size: 16px !important;
    padding: 10px 32px !important;
    border-radius: 980px !important;
    background-color: #0071E3 !important;
    background-image: none !important;
    border: none !important;
    font-weight: 600 !important;
}

.swal2-close {
    font-size: 28px !important;
}


/* SweetAlert title */
.swal2-title {
    font-size: 22px !important;
    font-weight: 700 !important;
}

/* SweetAlert subtitle */
.swal2-html-container {
    font-size: 16px !important;
}

/* SweetAlert close X — nudge down and left */
.swal2-close {
    margin-right: 8px !important;
    margin-top: 8px !important;
}


.form-check-input[role="switch"]:checked {
    background-color: #0071E3 !important;
    border-color: #0071E3 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='white'/%3E%3Cpath d='M8 12l3 3 5-5' stroke='%230071E3' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-position: right center !important;
}



/* ============================================
   Scroll To Top - Maverick-style override
   Black circle → gray on hover
   ============================================ */
.scrollToTop {
    background: #555 !important;
    color: white !important;
    border: 1px solid #555 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .scrollToTop:hover {
        background: #999 !important;
        color: white !important;
        border-color: #999 !important;
    }


/* Hide scroll-to-top when SweetAlert is open */
.swal2-container ~ .scrollToTop,
body.swal2-shown .scrollToTop,
html.swal2-shown .scrollToTop {
    display: none !important;
}


/* ════════════════════════════════════════════
   DARK SIDEBAR
   ════════════════════════════════════════════ */

[data-menu-styles="dark"] .app-sidebar {
    background: linear-gradient(180deg, #001d3d 0%, #003566 55%, #004d7a 100%) !important;
}

    [data-menu-styles="dark"] .app-sidebar .main-sidebar-header {
        background: transparent !important;
    }

    [data-menu-styles="dark"] .app-sidebar .side-menu__label,
    [data-menu-styles="dark"] .app-sidebar .side-menu__item {
        font-size: 15px !important;
    }

        [data-menu-styles="dark"] .app-sidebar .side-menu__item:hover,
        [data-menu-styles="dark"] .app-sidebar .side-menu__item.active {
            background: rgba(255, 255, 255, 0.08) !important;
            border-radius: 8px;
        }

    [data-menu-styles="dark"] .app-sidebar .side-menu__icon {
        font-size: 18px !important;
    }


/* ════════════════════════════════════════════
   DARK BLUE SIDEBAR 
   ════════════════════════════════════════════ */
/*
    [data-menu-styles="dark"] .app-sidebar,
    [data-menu-styles="dark"] .app-sidebar .main-sidebar-header {
        background: #153050 !important;
    }*/

[data-menu-styles="dark"] .app-sidebar {
    background: linear-gradient(180deg, #0a1628, #122d54) !important;
}

    [data-menu-styles="dark"] .app-sidebar .main-sidebar-header {
        background: transparent !important;
    }


        /* ── Sidebar text → white ── */
        [data-menu-styles="dark"] .app-sidebar .side-menu__label,
        [data-menu-styles="dark"] .app-sidebar .side-menu__item,
        [data-menu-styles="dark"] .app-sidebar .side-menu__icon,
        [data-menu-styles="dark"] .app-sidebar .category-name,
        [data-menu-styles="dark"] .app-sidebar .side-menu__angle {
            color: rgba(255, 255, 255, 0.85) !important;
        }

            [data-menu-styles="dark"] .app-sidebar .side-menu__item:hover .side-menu__label,
            [data-menu-styles="dark"] .app-sidebar .side-menu__item:hover .side-menu__icon,
            [data-menu-styles="dark"] .app-sidebar .side-menu__item.active .side-menu__label,
            [data-menu-styles="dark"] .app-sidebar .side-menu__item.active .side-menu__icon {
                color: #ffffff !important;
            }



.rf-status-tab:not(.active) .badge {
    background: #86868B !important;
    color: #ffffff;
}

/* ════════════════════════════════════════════
   GLOWING CARD ICONS
   ════════════════════════════════════════════ */

.rf-card-icon-glow {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ════════════════════════════════════════════
   DARK AI CARD
   ════════════════════════════════════════════ */

.rf-card-dark {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    border: none !important;
}

    .rf-card-dark .card-header {
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .rf-card-dark .card-title {
        color: #ffffff !important;
    }

    .rf-card-dark .progress {
        background: rgba(255,255,255,0.25) !important;
    }

    .rf-card-dark .progress-bar,
    .rf-card-dark .progress-bar.bg-primary {
        background: #6D28D9 !important;
        box-shadow: none !important;
    }

    .rf-card-dark .text-muted,
    .rf-card-dark .rf-dark-sub {
        color: #ffffff !important;
    }


/* ════════════════════════════════════════════
   ACCORDION CARD HEADERS — hover hint
   ════════════════════════════════════════════ */

.card-header.cursor-pointer:hover {
    /* moved to ROWS, PILLS AND HOVERS at the bottom */
}

/* ════════════════════════════════════════════
   ACCORDION CHEVRON — scale on hover
   ════════════════════════════════════════════ */

.card-header.cursor-pointer .ti-chevron-down,
.card-header.cursor-pointer .ti-chevron-up {
    transition: transform 0.2s ease;
}

.card-header.cursor-pointer:hover .ti-chevron-down,
.card-header.cursor-pointer:hover .ti-chevron-up {
    /* moved to ROWS, PILLS AND HOVERS at the bottom */
}

/* ════════════════════════════════════════════
   DARK BLUE CARD (QR / Tools)
   ════════════════════════════════════════════ */

.rf-card-dark-blue {
    background: linear-gradient(135deg, #0a1628, #1a4b8c) !important;
    border: none !important;
}

    .rf-card-dark-blue .card-header {
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .rf-card-dark-blue .card-title {
        color: #ffffff !important;
    }

    .rf-card-dark-blue .progress {
        background: rgba(255,255,255,0.1) !important;
    }

    .rf-card-dark-blue .text-muted,
    .rf-card-dark-blue .rf-dark-sub {
        color: #ffffff !important;
    }


/* ════════════════════════════════════════════
   QR CARD — gradient with glass QR holder
   ════════════════════════════════════════════ */

.rf-card-qr {
    background: linear-gradient(135deg, #0071E3, #38bdf8) !important;
    border: none !important;
}

    .rf-card-qr .card-header {
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    }

    .rf-card-qr .card-title {
        color: #ffffff !important;
    }

    .rf-card-qr .text-muted {
        color: rgba(255,255,255,0.85) !important;
    }

    .rf-card-qr .fw-semibold {
        color: #ffffff;
    }

.rf-qr-glass {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 16px;
    display: inline-block;
}

/* ════════════════════════════════════════════
   DARK CARD (lighter purple variant)
   ════════════════════════════════════════════ */

.rf-card-dark-light {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    border: none !important;
}

    .rf-card-dark-light .card-header {
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    .rf-card-dark-light .card-title {
        color: #ffffff !important;
    }

    .rf-card-dark-light .text-muted,
    .rf-card-dark-light p,
    .rf-card-dark-light span {
        color: #ffffff !important;
    }


/* ════════════════════════════════════════════
   CURRENT PLAN HIGHLIGHT
   ════════════════════════════════════════════ */

/*.card.custom-card.border-primary {
    border: 2px solid var(--rf-blue) !important;
}*/

/* ════════════════════════════════════════════
   POST TO GOOGLE — rotating outer glow on hover
   ════════════════════════════════════════════ */

/*.rf-btn-post {
    position: relative;
    z-index: 1;
}

.rf-btn-post::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(90deg, #EA4335, #4285F4, #FBBC05, #34A853, #EA4335);
    background-size: 300% 100%;
    border-radius: var(--rf-radius-full);
    z-index: -1;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease;
    animation: rf-google-glow 3s linear infinite;
}

.rf-btn-post:hover::before {
    opacity: 0.7;
}

@keyframes rf-google-glow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}*/

/* ════════════════════════════════════════════
   POST TO GOOGLE — animated border on hover
   ════════════════════════════════════════════ */

.rf-btn-post {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

    .rf-btn-post::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
        padding: 2px;
        background: linear-gradient(90deg, #EA4335, #4285F4, #FBBC05, #34A853, #EA4335);
        background-size: 300% 100%;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.3s ease;
        animation: rf-google-border 3s linear infinite;
    }

    .rf-btn-post:hover::before {
        opacity: 1;
    }

@keyframes rf-google-border {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

/* ════════════════════════════════════════════
   PLAN CARDS — gray border on the unselected option
   Beats the global `.custom-card { border:none !important }`.
   The selected card keeps its blue `.border-primary` box below;
   this only paints the plain (non-current) plan card gray.
   ════════════════════════════════════════════ */
.card.custom-card.rf-plan-card:not(.border-primary) {
    border: 1px solid #E8E8ED !important;
}

.card.custom-card.border-primary {
    border: none !important;
    position: relative;
    z-index: 1;
}

/* ════════════════════════════════════════════
   CURRENT PLAN — gradient border highlight
   ════════════════════════════════════════════ */

.card.custom-card.border-primary {
    border: none !important;
    position: relative;
    z-index: 1;
}

    .card.custom-card.border-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--rf-radius-lg);
        padding: 2px;
        background: #0071E3;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
    }
/* ════ SIDEBAR PLAN BADGE — Trustpilot style, no box ════ */
.sidebar-plan-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 16px 18px;
    background: transparent;
}

.plan-label {
    font-size: 0.875rem;
    color: #fff;
}

    .plan-label strong {
        color: #fff;
    }

.plan-upgrade-link {
    display: block;
    font-size: 0.8125rem;
    color: #5eb0ff;
    text-decoration: none;
    margin-top: 6px;
}

    .plan-upgrade-link:hover {
        color: #8fc0ff;
        text-decoration: underline;
    }

/* Hide when sidebar is collapsed to icon-only */
[data-toggled="icon-overlay-close"] .sidebar-plan-badge,
[data-toggled="icon-text-close"] .sidebar-plan-badge,
[data-toggled="detached-close"] .sidebar-plan-badge {
    display: none;
}

/* ════ SETTINGS PAGE ════ */
.settings-row > .col-lg-7 {
    display: flex;
}

    .settings-row > .col-lg-7 > .card {
        flex: 1;
    }

.settings-row > .col-lg-5 {
    display: flex;
    flex-direction: column;
}

    .settings-row > .col-lg-5 > .card:last-child {
        flex: 1;
    }

/* ════ MOBILE (375px) ════ */
@media (max-width: 576px) {
    html, body {
        overflow-x: hidden;
    }

    .card-body {
        padding: 14px !important;
    }

    .card-header {
        padding: 12px 14px !important;
    }

/*    h2.fw-semibold {
        font-size: 1.4rem;
        margin-top: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }*/

    h2.fw-semibold {
        font-size: 1.4rem;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .card.custom-card {
        margin-bottom: 0.75rem !important;
    }

    /* Dashboard stat tiles stay 2-up at 375px instead of collapsing to 1-up */
    .rf-stat-grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Three-card self-serve row stacks 1-up — avoids a 2+1 orphan */
    .rf-stat-grid-3 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Tighten stat-card padding so the gap reads even against the g-3 gutter */
    .rf-stat-grid > [class*="col-"] > .card > .card-body {
        padding: 14px !important;
    }

    /* Keep stat sub-line on one line so paired cards match height (no stretch gap) */
    .rf-stat-grid .card-body .fs-14 {
        font-size: 12px !important;
    }

    /* Tighten vertical gap between stat rows and match the gap below the grid */
    .rf-stat-grid {
        --bs-gutter-y: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .main-content {
        padding-bottom: 1rem !important;
    }

    .rf-search {
        max-width: 100% !important;
        width: 100%;
    }

    .rf-nav-arrow {
        width: 34px;
        height: 34px;
    }

        .rf-nav-arrow i {
            font-size: 18px;
        }

    .rf-status-tabs {
        padding: 2px;
        gap: 2px;
        flex-shrink: 0;
        width: auto;
    }

    .rf-link {
        white-space: nowrap;
    }

    .rf-btn-post {
        width: 100% !important;
    }

    .text-danger.fs-14 {
        word-break: break-word;
    }

    .scrollToTop {
        display: none !important;
    }

}

/* ════ REWRITE BUTTON MOBILE ════ */
@media (max-width: 575.98px) {
    .rf-rewrite-group.input-group {
        flex-direction: column;
    }

        .rf-rewrite-group.input-group > .form-control {
            width: 100%;
            border-radius: 0.375rem !important;
            margin-bottom: 0.5rem;
        }

        .rf-rewrite-group.input-group > .btn {
            width: 100%;
            border-radius: 0.375rem !important;
        }
}

/* ════ QUALITY WARNINGS MOBILE ════ */
@media (max-width: 575.98px) {
    .alert.fs-14,
    .alert.fs-16 {
        word-break: break-word;
    }
}


/* ════ TEXTAREAS MOBILE ════ */
@media (max-width: 575.98px) {
    .card-body textarea.form-control[rows="5"] {
        min-height: 160px;
    }

    .card-body textarea.form-control[rows="3"] {
        min-height: 140px;
    }
}

/* ════ FEEDBACK INPUT MOBILE ════ */
@media (max-width: 575.98px) {
    .rf-rewrite-group > .form-control,
    .rf-rewrite-group > .form-control::placeholder {
        font-size: 13px;
    }
}


/* ════ RESOLVE BUTTONS MOBILE ════ */
@media (max-width: 575.98px) {
    .rf-resolve-buttons {
        flex-direction: column;
    }

        .rf-resolve-buttons .btn {
            width: 100%;
        }
}

/* ════ TRACK FOLLOW-UP DESCRIPTION ════ */
.rf-track-description {
    margin-left: 3.5em;
}


/* ════ POST/CANCEL BUTTON MOBILE ════ */
@media (max-width: 575.98px) {
    .rf-post-container .btn {
        width: 100%;
        min-width: unset !important;
    }
}

/* ════ QUICK REPLY MOBILE ════ */
@media (max-width: 575.98px) {
    .rf-btn-generate {
        width: 100%;
    }
}


/* ════ ANALYTICS MOBILE ════ */
@media (max-width: 575.98px) {
    .rf-btn-reply-gap {
        width: 100%;
    }
}

/* ════ BILLING BUTTONS MOBILE ════ */
@media (max-width: 575.98px) {
    .rf-billing-btn {
        width: 100%;
    }
}


/* ════ HELP BUTTON MOBILE ════ */
@media (max-width: 575.98px) {
    .rf-help-btn {
        width: 100%;
        text-align: center;
    }
}

/* ════ HIDE HAMBURGER ON DESKTOP ════ */
@media (min-width: 992px) {
    .header-content-left .header-element:nth-child(2) {
        display: none !important;
    }
}

/* ════ MOBILE SIDEBAR — push nav below logo ════ */
@media (max-width: 991.98px) {
    .app-sidebar .main-sidebar {
        padding-top: 60px;
    }
}

/* ════ GET REVIEWS BUTTONS MOBILE ════ */
@media (max-width: 575.98px) {
    .rf-get-reviews-btn {
        width: 100%;
    }
}

/* ════ MOBILE HEADER — small rf icon on light header ════ */
@media (max-width: 767.98px) {
    .app-header .desktop-logo,
    .app-header .desktop-dark,
    .app-header .desktop-white,
    .app-header .toggle-dark,
    .app-header .toggle-white {
        display: none !important;
    }

    .app-header .toggle-logo {
        display: block !important;
    }
}

/* ════ SETTINGS ════ */
.settings-row .col-lg-5 {
    align-self: flex-start;
}


/* ════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════ */

[data-theme-mode="dark"] body,
[data-theme-mode="dark"] .page {
    background: linear-gradient(180deg, #001d3d 0%, #003566 60%, #004d7a 100%) !important;
}

[data-theme-mode="dark"] .card.custom-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px);
}

[data-theme-mode="dark"] .card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme-mode="dark"] .card-title {
    color: #f5f5f7 !important;
}

[data-theme-mode="dark"] .app-header {
    background: rgba(10, 22, 40, 0.85) !important;
    backdrop-filter: blur(20px) !important;
}

[data-theme-mode="dark"] .footer {
    background: transparent !important;
}

/* Text */
[data-theme-mode="dark"] h1,
[data-theme-mode="dark"] h2,
[data-theme-mode="dark"] h3,
[data-theme-mode="dark"] h4,
[data-theme-mode="dark"] h5,
[data-theme-mode="dark"] .fw-semibold,
[data-theme-mode="dark"] .fw-bold {
    color: #f5f5f7 !important;
}

[data-theme-mode="dark"] .text-muted {
    color: #98989d !important;
}

[data-theme-mode="dark"] p,
[data-theme-mode="dark"] span,
[data-theme-mode="dark"] label {
    color: #e5e5e7;
}

/* Forms */
[data-theme-mode="dark"] .form-control,
[data-theme-mode="dark"] .form-select {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f5f5f7 !important;
}

    [data-theme-mode="dark"] .form-control:focus,
    [data-theme-mode="dark"] .form-select:focus {
        border-color: var(--rf-blue) !important;
    }

/* Review cards */
[data-theme-mode="dark"] .review-card {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
    [data-theme-mode="dark"] .review-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    }


/* Status tabs */
[data-theme-mode="dark"] .rf-status-tabs {
    background: #2a2a2a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme-mode="dark"] .rf-status-tab {
    color: #98989d;
}

    [data-theme-mode="dark"] .rf-status-tab:hover {
        color: #f5f5f7;
        background: rgba(255, 255, 255, 0.06);
    }

/* Progress bars */
[data-theme-mode="dark"] .progress {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Badges */
[data-theme-mode="dark"] .badge.bg-primary-transparent {
    background-color: rgba(0, 113, 227, 0.15) !important;
}

[data-theme-mode="dark"] .badge.bg-success-transparent {
    background-color: rgba(52, 199, 89, 0.15) !important;
}

[data-theme-mode="dark"] .badge.bg-warning-transparent {
    background-color: rgba(255, 149, 0, 0.15) !important;
}

[data-theme-mode="dark"] .badge.bg-danger-transparent {
    background-color: rgba(255, 59, 48, 0.12) !important;
}

[data-theme-mode="dark"] .badge.bg-secondary-transparent {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #98989d !important;
}

/* Alerts */
[data-theme-mode="dark"] .alert-success {
    background-color: rgba(52, 199, 89, 0.12) !important;
    border-color: rgba(52, 199, 89, 0.2) !important;
    color: #34C759 !important;
}

[data-theme-mode="dark"] .alert-warning {
    background-color: rgba(255, 149, 0, 0.12) !important;
    border-color: rgba(255, 149, 0, 0.2) !important;
    color: #FF9500 !important;
}

/* Dropdowns */
[data-theme-mode="dark"] .dropdown-menu {
    background: #2a2a2a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme-mode="dark"] .dropdown-item {
    color: #e5e5e7 !important;
}

    [data-theme-mode="dark"] .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.06) !important;
    }

/* Profile dropdown */
[data-theme-mode="dark"] .header-profile-dropdown {
    background: #2a2a2a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Borders */
[data-theme-mode="dark"] .border-bottom {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme-mode="dark"] .border-dotted {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme-mode="dark"] hr {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Star rating value */
[data-theme-mode="dark"] .star-value {
    color: #f5f5f7 !important;
}

/* Filters */
[data-theme-mode="dark"] .rf-filter {
    background: #2a2a2a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f5f5f7 !important;
}

/* Scrollbar */
[data-theme-mode="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

    [data-theme-mode="dark"] ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.25);
    }

/* Billing card border */
[data-theme-mode="dark"] .card.custom-card.border-danger {
    border-color: rgba(255, 59, 48, 0.3) !important;
}

/* Accordion */
[data-theme-mode="dark"] .accordion-item {
    background: #2a2a2a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme-mode="dark"] .accordion-button {
    background: #2a2a2a !important;
    color: #f5f5f7 !important;
}

    [data-theme-mode="dark"] .accordion-button:not(.collapsed) {
        background: rgba(0, 113, 227, 0.1) !important;
        color: var(--rf-blue) !important;
    }

/* Modal */
[data-theme-mode="dark"] .modal-content {
    background: #2a2a2a !important;
}

/* SweetAlert */
[data-theme-mode="dark"] .swal2-popup {
    background: #2a2a2a !important;
    color: #f5f5f7 !important;
}

[data-theme-mode="dark"] .swal2-title {
    color: #f5f5f7 !important;
}

[data-theme-mode="dark"] .swal2-html-container {
    color: #e5e5e7 !important;
}

/* ════ DARK MODE — preserve gradient cards ════ */
[data-theme-mode="dark"] .rf-card-dark {
    background: linear-gradient(135deg,#8b5cf6, #a78bfa) !important;
}

[data-theme-mode="dark"] .rf-card-dark-light {
    background: linear-gradient(135deg,#8b5cf6, #a78bfa) !important;
}

[data-theme-mode="dark"] .rf-card-dark-blue {
    background: linear-gradient(135deg, #0a1628, #1a4b8c) !important;
}

[data-theme-mode="dark"] .rf-card-qr {
    background: linear-gradient(135deg, #0071E3, #38bdf8) !important;
}


/* ════ DARK MODE MOBILE/TABLET LOGO ════ */
@media (max-width: 991.98px) {
    [data-theme-mode="dark"] .app-header .desktop-logo {
        display: none !important;
    }

    [data-theme-mode="dark"] .app-header .desktop-dark {
        display: block !important;
    }
}

/* ════ DARK MODE — force gradient cards over generic dark card ════ */
[data-theme-mode="dark"] .card.custom-card.rf-card-dark {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    border: none !important;
}

/* ════ DARK MODE — sidebar/body separator ════ */
[data-theme-mode="dark"] .app-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ════ DARK MODE — textarea/input contrast ════ */
[data-theme-mode="dark"] .card.custom-card .form-control,
[data-theme-mode="dark"] .card.custom-card .form-select,
[data-theme-mode="dark"] .card.custom-card textarea {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ════ DARK MODE — filter modal ════ */
[data-theme-mode="dark"] .modal-card,
[data-theme-mode="dark"] .modal-body {
    background: #1e2a3a !important;
    color: #f5f5f7 !important;
}

    [data-theme-mode="dark"] .modal-card label,
    [data-theme-mode="dark"] .modal-body label {
        color: #98989d !important;
    }

    [data-theme-mode="dark"] .modal-card .btn-outline-primary {
        color: var(--rf-blue) !important;
        border-color: var(--rf-blue) !important;
    }

/* ════ DARK MODE — mobile filter panel ════ */
[data-theme-mode="dark"] .mobile-filter-panel {
    background: #1e2a3a !important;
    color: #f5f5f7 !important;
}

    [data-theme-mode="dark"] .mobile-filter-panel label {
        color: #98989d !important;
    }


/* ════ DARK MODE — header avatar ════ */
[data-theme-mode="dark"] .app-header .avatar-sm {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* ════ DARK MODE — force purple gradient on insight card ════ */
[data-theme-mode="dark"] .card.custom-card.rf-card-dark-light {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    border: none !important;
}


/* ════ DARK MODE — hamburger icon visibility ════ */
[data-theme-mode="dark"] .header-content-left .sidemenu-toggle span,
[data-theme-mode="dark"] .header-content-left .sidemenu-toggle span::before,
[data-theme-mode="dark"] .header-content-left .sidemenu-toggle span::after {
    background-color: #ffffff !important;
}

[data-theme-mode="dark"] .header-content-left .animated-arrow span {
    background-color: #ffffff !important;
}




/* ════ MOBILE/TABLET — hamburger in default position (beside logo) ════ */
@media (max-width: 991.98px) {
    .header-content-left {
        display: flex;
        align-items: center;
    }

        .header-content-left .header-element:nth-child(2) {
            display: flex !important;
            align-items: center;
            margin-left: 6px;
        }

            .header-content-left .header-element:nth-child(2) .animated-arrow.hor-toggle {
                margin: 0 !important;
                display: flex;
                align-items: center;
            }
}


/* ════ MOBILE SIDEBAR — bigger text + blur backdrop ════ */
@media (max-width: 991.98px) {
    #sidebar .side-menu__label,
    .app-sidebar .side-menu__label {
        font-size: 17px !important;
    }

    #sidebar .side-menu__icon,
    .app-sidebar .side-menu__icon {
        font-size: 20px !important;
    }

    #sidebar .category-name,
    .app-sidebar .category-name {
        font-size: 11px !important;
    }

    #sidebar .side-menu__item,
    .app-sidebar .side-menu__item {
        padding: 12px 18px !important;
    }

    #responsive-overlay {
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        background: rgba(0, 0, 0, 0.4) !important;
    }
}

/* ════ MOBILE SIDEBAR — wider drawer ════ */
@media (max-width: 991.98px) {
    [data-toggled="open"] .app-sidebar,
    [data-toggled="open"] #sidebar {
        width: 300px !important;
    }
}

/* ════ MOBILE OVERLAY — close button ════ */
.rf-overlay-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1060;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px;
    transition: all 0.2s ease;
}

    .rf-overlay-close:hover {
        background: rgba(255, 255, 255, 0.35);
    }
/* ════ SWIPE ANIMATION — crossfade between reviews ════ */
@keyframes rf-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.rf-slide-left,
.rf-slide-right {
    animation: rf-fade-in 0.2s ease-out;
}

/* ════ PREVENT HEADER BLINK ON SWIPE ════ */
.rf-review-header {
    animation: none !important;
}


@media (min-width: 768px) and (max-width: 991.98px) {
    .horizontal-logo {
        padding: 0.3rem 0 !important;
    }
}


/* Admin dashboard — quiet stat tiles in the top context strip
   (Oldest waiting, Active today, Posted today, Customers) */
.rf-stat-tile {
    background: var(--bs-light, #f5f5f7);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.rf-stat-label {
    font-size: 13px;
    color: var(--bs-secondary-color, #6e6e73);
    margin-bottom: 4px;
}
/* small grey label above the number */
.rf-stat-num {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}
/* the big number itself */

/* Admin dashboard — soft icon chip on each "Your work today" row
   (the rounded square holding the alert/message/link/flag icon) */
.rf-work-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 22px;
    flex-shrink: 0;
}


/* ════ ADD-ANOTHER BUTTON FIX ════ */
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    color: #fff !important;
}

/* ════ ADD REVIEWS — ROW DIVIDER ════ */
.rf-review-divider {
    border-bottom: 2px solid #E8E8ED;
}

/* ════ BREADCRUMB — › divider + rf-link hover ════ */
.rf-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
}

.rf-breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
}

/* ════ SWEETALERT — buttons match app ════ */
.swal2-popup .swal2-actions .swal2-cancel.btn-outline-primary {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--bs-primary, #0071E3) !important;
    color: var(--bs-primary, #0071E3) !important;
    box-shadow: none !important;
}

    .swal2-popup .swal2-actions .swal2-cancel.btn-outline-primary:hover,
    .swal2-popup .swal2-actions .swal2-cancel.btn-outline-primary:focus {
        background-color: var(--bs-primary, #0071E3) !important;
        color: #fff !important;
    }
/* Same height — both buttons get a 1px border (transparent on the solid one) */
.swal2-popup .swal2-actions .btn {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    line-height: 1.5 !important;
    border: 1px solid transparent !important;
}

.swal2-popup .swal2-actions .swal2-confirm.btn-primary {
    border-color: var(--bs-primary, #0071E3) !important;
}

/* ════ SWAL EQUAL-WIDTH BUTTONS ════ */
.swal2-popup .swal2-actions .rf-swal-btn {
    min-width: 190px !important;
    font-size: 16px !important;
}

/* ════ DASHBOARD MERGED CARD ════ */
@media (min-width: 768px) {
    .border-end-md {
        border-right: 1px solid var(--bs-border-color);
    }
}

/* ════════════════════════════════════════════
   MUTED CARD-HEADER ICON CHIP
   Matches dashboard section chips exactly
   (36×36, gray, 18px icon).
   ════════════════════════════════════════════ */
.rf-card-icon-muted {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    background-color: #F5F5F7 !important;
    color: #86868B !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07) !important;
}

/* Pill badges (URGENT / NEEDS ATTENTION / SENSITIVE / status) — uniform size.
   font-size already pinned via .fs-12; this evens out the padding so the
   warning/danger pills don't sit larger than the teal status pill. */
.badge.rounded-pill {
    font-size: 0.6875rem;
    padding: 0.2rem 0.55rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
}


/* Profile dropdown — plan row */
.rf-dropdown-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: var(--default-background, #f8f9fa);
}

    .rf-dropdown-plan .rf-plan-label {
        font-size: 13px;
        color: #6c757d;
    }

    .rf-dropdown-plan .rf-plan-badge {
        font-size: 12px;
        font-weight: 600;
    }


/* ── Profile dropdown — plan row ── */
/* Tinted info zone at the top of the dropdown, visually separated from the action items below */
.header-profile-dropdown .rf-dropdown-plan {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    margin-bottom: 0;
    background: var(--default-background, #f8f9fa);
    border-bottom: 1px solid var(--default-border, #e9ecef);
}

    .header-profile-dropdown .rf-dropdown-plan .rf-plan-label {
        font-size: 15px;
        color: #6c757d;
        line-height: 1;
    }

    .header-profile-dropdown .rf-dropdown-plan .rf-plan-badge {
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
    }

    /* First real action item sits flush under the divider, no double gap */
    .header-profile-dropdown .rf-dropdown-plan + .dropdown-item,
    .header-profile-dropdown .rf-dropdown-plan + li .dropdown-item {
        margin-top: 0.25rem;
    }


/* === AI VOICE GROUP ===
   Purple-tinted container that visually groups the AI voice controls
   (point of view, words to avoid, signature) and separates them from
   neutral context fields like cuisine/dishes.
   Purple (#EEEDFE bg / #3C3489 text) = AI surface per the color system —
   do NOT recolor to blue/gray. Reused across demo, onboarding, and settings
   so all three voice blocks stay visually identical. Single source of truth. */
.rf-voice-group {
    background: #F5F5F7;
    border-radius: 8px;
    padding: 13px 15px;
    margin-bottom: 16px;
}

/* Section label inside the voice group, e.g. "VOICE" or "FINE-TUNING". */
.rf-voice-label {
    font-size: 12px;
    font-weight: 500;
    color: #6E6E73;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 11px;
}

/* Field labels inside the group inherit the purple so they read as
   part of the AI surface, not the neutral form around it. */
.rf-voice-group label {
    color: #1D1D1F;
}

/* ════════════════════════════════════════════
   AI BOX (Onboarding — voice detection)
   Purple = AI surface, per design system.
   Used for the "Match my voice" paste box and
   the detected-style confirmation banner.
   ════════════════════════════════════════════ */

/* Soft purple-tinted container for AI-powered inputs */
.rf-ai-box {
    background: rgba(127, 119, 221, 0.06); /* 6% #7F77DD wash — subtle, not loud */
    border: 1px solid rgba(127, 119, 221, 0.25); /* faint purple hairline */
    border-radius: 12px;
}

/* The AI action button — solid purple so it reads as "this triggers AI" */
.rf-ai-btn {
    color: #fff;
    background: #7F77DD; /* brand AI-purple */
    border: none;
}

    .rf-ai-btn:hover:not(:disabled) {
        background: #6A62C9; /* darker on hover for feedback */
        color: #fff;
    }

    .rf-ai-btn:disabled {
        opacity: 0.5; /* dimmed until 12+ chars pasted */
    }



/* Frosted glass — dim + blur so the popup still stands out */
.swal2-container {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Settings — response style cards */
.rf-style-row {
    display: flex;
    gap: 8px;
}

.rf-style-card {
    flex: 1;
    text-align: center;
    padding: 12px 10px;
    border: 1px solid var(--default-border, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

    .rf-style-card:hover {
        border-color: #0071E3;
    }

.rf-style-card-active {
    border: 1.5px solid #0071E3;
    background: rgba(0, 113, 227, 0.05);
}

.rf-style-card-title {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
}

.rf-style-card-active .rf-style-card-title {
    color: #0071E3;
}

.rf-style-card-desc {
    font-size: 11px;
    color: var(--text-muted, #8c9097);
    line-height: 1.3;
}

@media (max-width: 575px) {
    .rf-style-row {
        flex-direction: column;
    }
}


/* Settings — Fine-tuning AI voice group */
.rf-finetune {
    border: 1px solid #AFA9EC;
    border-left: 3px solid #7F77DD;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}

.rf-finetune-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .rf-finetune-head i {
        color: #534AB7;
        font-size: 16px;
    }

.rf-finetune-title {
    font-size: 14px;
    font-weight: 500;
    color: #3C3489;
}

.rf-finetune-sub {
    font-size: 12px;
    color: #534AB7;
    margin: 2px 0 14px;
}

.rf-pov-row {
    display: flex;
    gap: 8px;
}

.rf-pov-pill {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    border: 1px solid #D2D2D7;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-muted, #8c9097);
    cursor: pointer;
    transition: all .12s ease;
}

.rf-pov-pill-active {
    border: 1px solid #86868B;
    background: #F5F5F7;
    color: #1D1D1F;
    font-weight: 500;
}


/* Active POV pill — blue-tinted to match the response-style cards */
.rf-voice-group .rf-pov-pill-active {
    background: rgba(0, 113, 227, 0.05);
    border-color: #0071E3;
    color: #0071E3;
    box-shadow: none;
}

/* Header — surfaced Help/Settings icons + gray tier pill */
.rf-header-icon {
    font-size: 20px;
    color: var(--rf-text-secondary);
}

.header-link:hover .rf-header-icon {
    color: var(--rf-text);
}


/* Header — group Help/Settings/avatar tight on the right */
.header-content-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

    .header-content-right .header-element {
        display: flex;
        align-items: center;
    }


/* Help + Settings icon pair — keep them adjacent, pushed right toward avatar */
.rf-header-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}


/* ════════════════════════════════════════════
   TABLET HEADER — consolidated (768–991px)
   Single source of truth for the tablet header:
   full wordmark, one tidy 56px row, logo left,
   hamburger beside it, help+settings+avatar right.
   ════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Header bar — fixed height, light bg, hairline base */
    .app-header,
    .app-header .main-header,
    .app-header nav {
        min-height: 56px !important;
        height: 56px !important;
        background: #ffffff !important;
    }

    [data-theme-mode="dark"] .app-header,
    [data-theme-mode="dark"] .app-header .main-header,
    [data-theme-mode="dark"] .app-header nav {
        background: #1a1a1a !important;
    }

    /* Single flex row, vertically centered, contents spread to edges */
    .app-header .main-header-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 56px !important;
        height: 56px !important;
        padding: 0 16px !important;
    }

    /* Show full wordmark, hide the small icon + theme variants */
    .app-header .desktop-logo {
        display: block !important;
    }

    .app-header .toggle-logo,
    .app-header .desktop-dark,
    .app-header .desktop-white,
    .app-header .toggle-dark,
    .app-header .toggle-white {
        display: none !important;
    }

    /* Left group: logo + hamburger, centered */
    .app-header .header-content-left {
        display: flex !important;
        align-items: center !important;
    }

    .app-header .horizontal-logo,
    .app-header .header-logo {
        overflow: visible !important;
    }

    /* Right group: help+settings+avatar, packed tight on the right */
    .app-header .header-content-right {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        gap: 4px !important;
    }

    /* Greeting sits flush under the header */
    .row .col-xl-10 > h2.fw-semibold.mt-4 {
        margin-top: 0.5rem !important;
    }

    .main-content {
        margin-top: 0 !important;
    }
}


/* ── Tooltips — Brevo-style dark pill ── */
.tooltip {
    --bs-tooltip-bg: #1D1D1F;
    --bs-tooltip-color: #ffffff;
}

    .tooltip .tooltip-arrow {
        display: none !important;
    }

    .tooltip .tooltip-inner {
        font-size: 13px;
        font-weight: 500;
        padding: 5px 10px;
        border-radius: 8px;
    }

/* ════════════════════════════════════════════
   SIDEBAR — Match landing page hero gradient
   #sidebar ID wins over all YNEX class rules
   ════════════════════════════════════════════ */
#sidebar {
    background: linear-gradient(180deg, #001d3d 0%, #003566 55%, #004d7a 100%) !important;
}

    #sidebar .main-sidebar-header {
        background: transparent !important;
    }

    #sidebar .main-sidebar {
        background: transparent !important;
    }

    /* Sidebar text → white so it reads on the dark blue gradient */
    #sidebar .side-menu__label,
    #sidebar .side-menu__icon,
    #sidebar .category-name,
    #sidebar .side-menu__angle {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    #sidebar .side-menu__item:hover .side-menu__label,
    #sidebar .side-menu__item:hover .side-menu__icon,
    #sidebar .side-menu__item.active .side-menu__label,
    #sidebar .side-menu__item.active .side-menu__icon {
        color: #ffffff !important;
    }


/* ════════════════════════════════════════════
   FORM VALIDATION — required marker + inline errors
   Single source of truth. Used by signup, login, onboarding.
   ════════════════════════════════════════════ */

.rf-req {
    color: #D70015;
    margin-left: 2px;
}

.rf-field-error {
    color: #D70015;
    font-size: 12.5px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rf-input-error {
    border-color: #D70015 !important;
}

/* ════ PROFILE DROPDOWN — blur backdrop (mobile) ════ */
.rf-profile-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .header-element:has(.dropdown-menu.show) .rf-profile-backdrop {
        display: block;
        position: fixed;
        top: 60px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 60px);
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 1000;
    }
}

/* ════ LOCATION LIST — above the blur on tablets too, same as your profile menu ════ */
@media (max-width: 991.98px) {
    .rf-loc-menu {
        z-index: 1001 !important;
    }

    body:has(.rf-loc-menu.show) {
        overflow: hidden !important;
    }
}

/* ════ PROFILE DROPDOWN — panel above blur (mobile) ════ */
@media (max-width: 991.98px) {
    .header-profile-dropdown {
        z-index: 1001 !important;
        background: #ffffff !important;
    }
}

/* ════ PROFILE DROPDOWN — lock scroll when open (mobile) ════ */
@media (max-width: 991.98px) {
    body:has(.header-profile-dropdown.show) {
        overflow: hidden !important;
    }
}

/* Empty-state hero icon chips — v3 gray tokens (#F5F5F7 bg, #86868B icon) */
.rf-empty-icon {
    background-color: #F5F5F7;
    color: #86868B;
}

/* Muted body text — v3 gray token #86868B, readable on white */
.text-muted {
    color: #86868B !important;
}

/* ════════════════════════════════════════════
   FLO & GUARD MARKS
   The two named AI marks. Flo = flat purple (standard AI).
   Guard = rainbow over purple (the AI to trust — "one hero").
   Rendered by FloMark.razor / GuardMark.razor; sized via inline
   width/height on the span. See the Flo & Guard brand doc.
   ════════════════════════════════════════════ */
.rf-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Flo: navy gradient rounded square (S4) with white stars. Stars and gradient are Flo's only. */
.rf-mark-flo {
    background-color: var(--flo-3);
    background-image: var(--flo-gradient);
    border-radius: 28%;
}

/* Guard: solid green shield with a white check, drawn in GuardMark.razor.
   No background, no gradient, no stars. Green = checked and safe to post. */
.rf-mark-guard {
    background: none;
}


/* ════════════════════════════════════════════
   GET REVIEWS — open POS row (receipt tutorials)
   Blue tint + border on the expanded system; closed rows stay gray.
   ════════════════════════════════════════════ */
.rf-pos-open {
    border: 1.5px solid var(--rf-blue) !important;
    background: rgba(0, 113, 227, 0.05);
}

.rf-pos-icon-open {
    background-color: var(--rf-blue) !important;
    color: #ffffff !important;
}

.rf-pos-label-open {
    color: var(--rf-blue) !important;
}

/* ════════════════════════════════════════════
   GET REVIEWS — link card (blue-tint pair to QR)
   ════════════════════════════════════════════ */
.rf-card-link {
    background: #F0F6FE !important;
    border: 1px solid #D4E4F7 !important;
}

    .rf-card-link .card-header {
        border-bottom: 1px solid #D4E4F7 !important;
    }

    .rf-card-link .card-title,
    .rf-card-link .fw-semibold {
        color: #0C447C !important;
    }

/* ════════════════════════════════════════════
   GET REVIEWS — open POS row: blue header + tinted
   card, but WHITE step body for readability
   ════════════════════════════════════════════ */
.rf-pos-open {
    border: 1.5px solid var(--rf-blue) !important;
    background: rgba(0, 113, 227, 0.05);
}

.rf-pos-head {
    background: rgba(0, 113, 227, 0.08);
}

.rf-pos-body {
    background: #ffffff;
    border-top: 1px solid rgba(0, 113, 227, 0.15);
}

.rf-pos-icon-open {
    background-color: var(--rf-blue) !important;
    color: #ffffff !important;
}

.rf-pos-label-open {
    color: var(--rf-blue) !important;
}


.plan-trial-line {
    display: block;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
}

.plan-trial-ended {
    display: block;
    font-size: 0.8125rem;
    color: #FFB84D;
    margin-top: 2px;
}


/* ============================================================
   HELP WIDGET  —  append to wwwroot/css/reviewflo-overrides.css
   Utility chrome. Gray + blue only. No purple (purple = Flo).
   Tokens: blue #0071E3 action · ink #1D1D1F · grays #F5F5F7 / #86868B / #E8E8ED
   ============================================================ */

.help-root {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1050;
}

/* ---- collapsed bubble ---- */
.help-bubble {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0071E3;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    transition: transform .12s ease;
}

    .help-bubble:hover {
        transform: scale(1.05);
    }

    .help-bubble .ti {
        font-size: 24px;
        color: #fff;
    }

/* ---- panel ---- */
.help-panel {
    width: 384px;
    max-height: 640px;
    background: #fff;
    border: .5px solid #E8E8ED;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

.help-header {
    background: #1D1D1F;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-title {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .help-title .ti {
        font-size: 18px;
    }

.help-close, .help-back {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #86868B;
    display: flex;
    align-items: center;
}

.help-back {
    margin-left: 0;
    margin-right: 2px;
}

    .help-close .ti, .help-back .ti {
        font-size: 16px;
    }

/* ---- body / messages ---- */
.help-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.help-msg {
    font-size: 15px;
    line-height: 1.55;
    padding: 10px 13px;
    border-radius: 12px;
    max-width: 88%;
    word-wrap: break-word;
}

.help-msg-bot {
    background: #F5F5F7;
    color: #1D1D1F;
    border-top-left-radius: 4px;
    align-self: flex-start;
}

.help-msg-user {
    background: #0071E3;
    color: #fff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

.help-thinking {
    color: #86868B;
    letter-spacing: 2px;
}

/* ---- chips ---- */
.help-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.help-chip {
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 20px;
    border: .5px solid #D2D2D7;
    background: #fff;
    color: #424245;
    cursor: pointer;
}

    .help-chip:hover {
        background: #F5F5F7;
    }

/* ---- escalation ---- */
.help-escalate {
    border-top: .5px solid #E8E8ED;
    padding-top: 10px;
    font-size: 12px;
    color: #424245;
}

.help-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #0071E3;
    font-size: 12px;
}

.help-textus {
    display: flex;
    align-items: center;
    gap: 10px;
    border: .5px solid #0071E3;
    border-radius: 8px;
    padding: 11px;
    text-decoration: none;
}

    .help-textus .ti {
        font-size: 20px;
        color: #0071E3;
    }

    .help-textus strong {
        font-size: 13px;
        color: #0071E3;
    }

    .help-textus em {
        font-size: 11px;
        color: #86868B;
        font-style: normal;
    }

/* ---- email form ---- */
.help-formnote {
    background: #F5F5F7;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    color: #86868B;
}

    .help-formnote .ti {
        font-size: 14px;
        vertical-align: -2px;
        margin-right: 4px;
    }

.help-lbl {
    font-size: 11px;
    color: #86868B;
    margin: 6px 0 4px;
    display: block;
}

.help-readonly {
    border: .5px solid #E8E8ED;
    background: #F5F5F7;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    color: #86868B;
}

.help-textarea {
    width: 100%;
    border: .5px solid #0071E3;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    color: #1D1D1F;
    resize: vertical;
    font-family: inherit;
}

.help-send {
    margin-top: 12px;
    width: 100%;
    background: #0071E3;
    border: none;
    border-radius: 6px;
    padding: 9px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}

    .help-send:disabled {
        opacity: .6;
        cursor: default;
    }

.help-meta {
    margin-top: 10px;
    font-size: 10px;
    color: #86868B;
}

/* ---- sent / error ---- */
.help-sent, .help-error {
    text-align: center;
    padding: 24px 12px;
}

.help-check {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #EAF3DE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

    .help-check .ti {
        font-size: 20px;
        color: #3B6D11;
    }

.help-sent-title {
    font-size: 14px;
    font-weight: 500;
    color: #1D1D1F;
    margin-bottom: 5px;
}

.help-sent-body, .help-error {
    font-size: 13px;
    color: #86868B;
    line-height: 1.6;
}

.help-back-btn {
    margin-top: 16px;
    border: .5px solid #E8E8ED;
    background: #fff;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    color: #1D1D1F;
    cursor: pointer;
}

/* ---- input ---- */
.help-input {
    border-top: .5px solid #E8E8ED;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .help-input input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 15px;
        color: #1D1D1F;
        background: transparent;
    }

        .help-input input::placeholder {
            color: #86868B;
        }

.help-arrow {
    background: none;
    border: none;
    cursor: pointer;
    color: #86868B;
}

    .help-arrow:disabled {
        opacity: .4;
    }

    .help-arrow .ti {
        font-size: 16px;
    }

/* ---- mobile: full-screen at 375px ---- */
@media (max-width: 480px) {
    .help-root {
        right: 0;
        bottom: 0;
    }

    .help-open .help-panel {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }
}

.help-timestamp {
    text-align: center;
    font-size: 11px;
    color: #86868B;
    margin: 2px 0 6px;
}

/* Label left, capture button right — but the status alert underneath spans the full
   width. Grid, not flex: the button sits in column 2 row 1, the alert spills across
   both columns on row 2. Flex would trap the alert in the button's column. */
.rf-capture-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

    .rf-capture-row > .rf-capture,
    .rf-capture-row > label {
        grid-row: 1;
    }

    .rf-capture-row > .alert {
        grid-column: 1 / -1;
    }
/* ── Image capture (demo + admin review entry) ──
   Quiet by design: this is a shortcut, not the main path. One loud button per
   page (Generate reply) — this one stays gray so it doesn't compete. */
.rf-capture-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #D2D2D7;
    border-radius: 980px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #424245;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .rf-capture-btn:hover:not(:disabled) {
        background: #F5F5F7;
        border-color: #86868B;
    }

    .rf-capture-btn:disabled {
        opacity: 0.5;
        cursor: default;
    }

    .rf-capture-btn i {
        font-size: 15px;
        color: #0071E3;
    }

    .rf-capture-btn .rf-capture-caret {
        font-size: 13px;
        color: #86868B;
    }

.rf-capture-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    width: 236px;
    padding: 6px;
    background: #fff;
    border: 0.5px solid #D2D2D7;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.rf-capture-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

    .rf-capture-item:hover {
        background: #F5F5F7;
    }

    .rf-capture-item i {
        font-size: 17px;
        color: #86868B;
    }

/* Not a menu item — a quiet note. Paste has no button; it's a shortcut that
   already works. Styling it as a row would make it look clickable and lie. */
.rf-capture-note {
    padding: 6px 10px 2px;
    font-size: 12px;
    color: #86868B;
    border-top: 0.5px solid #E8E8ED;
    margin-top: 4px;
}

.rf-camera video {
    background: #1D1D1F;
    max-height: 320px;
    object-fit: cover;
}

.rf-star-lg i {
    font-size: 26px;
}



.rf-hero-card {
    border-left: 3px solid #0071E3;
}

.rf-hero-divider {
    width: 1px;
    background: #E8E8ED;
    align-self: stretch;
    min-height: 100%;
}

.rf-qr-frame {
    width: 150px;
    height: 150px;
    background: #fff;
    border: 1px solid #E8E8ED;
    border-radius: 8px;
    padding: 8px;
}

.rf-expand-row {
    transition: background .15s;
}

    .rf-expand-row:hover {
        /* moved to ROWS, PILLS AND HOVERS at the bottom */
    }

.cursor-pointer {
    cursor: pointer;
}

/* Divider between link and QR on the combined card (desktop only) */
@media (min-width: 992px) {
    .rf-qr-divider {
        border-left: 1px solid #CFE3F5;
    }
}


/* Numbered steps — Review kit ordering instructions */
.rf-step-num {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: #F2DFB8;
    color: #1D1D1F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

/* Onboarding step 4 — disclosure summaries */
.onboarding-page details > summary {
    list-style: none;
    color: var(--rf-blue);
}

    .onboarding-page details > summary::-webkit-details-marker {
        display: none;
    }

    .onboarding-page details > summary::after {
        content: "\ea5f"; /* ti-chevron-down */
        font-family: "tabler-icons";
        font-size: 14px;
        margin-left: 6px;
    }

.onboarding-page details[open] > summary::after {
    content: "\ea62"; /* ti-chevron-up */
}

/* ════════════════════════════════════════════
   DEMO — cold-traffic flow (screenshot first)
   Device split is by pointer, not width: a landscape iPad is a touch
   device and gets the screenshot screen, not the desktop one.
   ════════════════════════════════════════════ */

.rf-mouse-only {
    display: none;
}

.rf-touch-only {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .rf-mouse-only {
        display: block;
    }

    .rf-touch-only {
        display: none;
    }
}

.rf-dropzone,
.rf-capture-zone {
    border: 1.5px dashed #C7C7CC;
    border-radius: 12px;
    background: #FAFAFC;
    padding: 30px 14px;
    text-align: center;
    display: block;
}

/* The whole zone is the tap target, so it needs to look tappable. */
.rf-capture-zone {
    cursor: pointer;
}

    .rf-capture-zone:active {
        background: #F5F5F7;
        border-color: #86868B;
    }

.rf-dropzone-icon {
    font-size: 30px;
    color: #86868B;
}

/* Reading keeps the same box so nothing shifts under a thumb between
   drop and read-back. */
.rf-dropzone-reading {
    border-style: solid;
    border-color: #E8E8ED;
}

.rf-readback {
    background: #F5F5F7;
    border-radius: 10px;
    padding: 14px;
}

/* Stars, two contexts. Default is a normal rating field: gray until set.
   44px minimum is the comfortable touch target. */
.rf-star-big {
    background: none;
    border: 0;
    padding: 0 3px;
    line-height: 1;
    color: #D1D1D6;
    font-size: 29px;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

    .rf-star-big:hover:not(:disabled) {
        transform: scale(1.1);
    }

    .rf-star-big:disabled {
        opacity: 0.6;
        cursor: default;
    }

.rf-star-big-on {
    color: #DAA520;
}

/* Confirm-stars screen: the tap IS the action, so the stars carry the
   action colour rather than the rating colour. */
.rf-star-prompt {
    color: #0071E3;
    font-size: 35px;
}

    .rf-star-prompt:hover:not(:disabled) {
        color: #0077ED;
    }

/* The existing .rf-capture-row grid pins label + capture to row 1. The
   desktop capture screen uses a span as the left cell, so it needs the
   same treatment. */
.rf-capture-row > span {
    grid-row: 1;
}


/* Confirm screen: a compact rating field, not the big tap target. */
.rf-star-sm {
    background: none;
    border: 0;
    padding: 0 2px;
    line-height: 1;
    color: #D1D1D6;
    font-size: 21px;
    cursor: pointer;
    transition: color 0.15s ease;
}

    .rf-star-sm:disabled {
        opacity: 0.6;
        cursor: default;
    }

    .rf-star-sm.rf-star-big-on {
        color: #DAA520;
    }

/* Says what happened without looking like an alert. A read that worked is
   not a status worth a coloured banner. */
.rf-readstrip {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #F5F5F7;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
}

    .rf-readstrip i {
        font-size: 19px;
        color: #86868B;
        flex: none;
    }

/* Numbered steps on the demo capture screen. The number is a marker, not a
   target, so it stays gray and small next to the buttons. */
.rf-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #F5F5F7;
    color: #1D1D1F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex: none;
}

.rf-step-hint {
    margin-left: 36px;
}

/* Live Places reviews on the demo. Gray card, no border: these are things to
   tap, not fields to fill. */
.rf-place-review {
    background: #F5F5F7;
    border-radius: 10px;
    padding: 13px;
}

.rf-place-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #E8E8ED;
    color: #86868B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex: none;
}

.rf-place-pick {
    display: block;
    border-top: 0.5px solid #E1E1E6;
    margin-top: 11px;
    padding-top: 9px;
    text-align: center;
    color: #0071E3;
    font-size: 14px;
    font-weight: 600;
}

/* Required attribution. Quiet, but it has to be unmistakably present. */
.rf-place-attr {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #86868B;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 0.5px solid #E8E8ED;
}

/* Name gives way, date holds its line. A long display name shouldn't push the
   timestamp into a second row and break the card. */
.rf-place-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.rf-place-when {
    white-space: nowrap;
    flex: none;
}

/* ════════════════════════════════════════════
   PLAN PICKER — radio cards (Signup; reusable on Billing)
   Classes: .rf-plan, .rf-plan-* — no overlap with .rf-plan-card (Billing)
   ════════════════════════════════════════════ */

.rf-plan {
    display: block;
    position: relative;
    background: #fff;
    border: 1px solid #E8E8ED;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

    .rf-plan:hover {
        border-color: rgba(0, 113, 227, 0.4);
    }

    .rf-plan:has(input:checked) {
        border: 1.5px solid var(--rf-blue);
        background: rgba(0, 113, 227, 0.03);
    }

    .rf-plan:has(input:focus-visible) {
        box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
    }

    .rf-plan input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.rf-plan-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rf-plan-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #86868B;
    box-sizing: border-box;
    flex-shrink: 0;
}

.rf-plan:has(input:checked) .rf-plan-dot {
    border: 5px solid var(--rf-blue);
}

.rf-plan-name {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--rf-text);
}

    .rf-plan-name small {
        display: block;
        font-size: 13px;
        font-weight: 400;
        color: #6E6E73;
    }

.rf-plan-self .rf-plan-name {
    font-size: 15px;
}

.rf-plan-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--rf-text);
}

    .rf-plan-price small {
        font-size: 13px;
        font-weight: 400;
        color: #6E6E73;
    }

.rf-plan-line {
    display: flex;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #3A3A3C;
    margin-top: 4px;
}

    .rf-plan-line i {
        color: var(--rf-text-secondary);
        margin-top: 3px;
    }

.rf-plan-top + .rf-plan-line {
    margin-top: 12px;
}

.rf-plan-pill {
    position: absolute;
    top: -9px;
    left: 16px;
    background: var(--rf-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 2px 9px;
    border-radius: var(--rf-radius-full);
    white-space: nowrap;
}

.rf-plan:not(:has(input:checked)) .rf-plan-pill {
    background: #86868B;
}

/* Small gray helper line under a field or button */
.rf-hint {
    font-size: 13px;
    color: #6E6E73;
    margin-top: 4px;
}

/* === Signup: restaurant suggestions (wwwroot/js/place-search.js) === */
.rf-place-list[hidden], .rf-place-picked[hidden] {
    display: none !important;
}

.rf-place-list {
    margin-top: 4px;
    background: #fff;
    border: 1px solid #E8E8ED;
    border-radius: 12px;
    overflow: hidden;
}

.rf-place-item {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #E8E8ED;
    padding: 10px 14px;
    cursor: pointer;
}

    .rf-place-item.rf-place-active {
        background: var(--rf-surface);
    }

.rf-place-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
}

.rf-place-sub {
    display: block;
    font-size: 13px;
    color: #86868B;
}

.rf-place-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #86868B;
}

.rf-place-google {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #5E5E5E;
    white-space: nowrap;
}

.rf-place-picked {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: 14px;
    color: #86868B;
}

    .rf-place-picked .ti {
        font-size: 16px;
        margin-top: 2px;
    }

.rf-place-addr {
    flex: 1;
    line-height: 1.5;
}

.rf-place-clear {
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
    color: var(--rf-blue);
    cursor: pointer;
    white-space: nowrap;
}

/* === Home: setup checklist (HomeNotConnected.razor) === */
.rf-home-banner {
    background: rgba(52, 199, 89, 0.1);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 15px;
    color: #1D1D1F;
}

    .rf-home-banner .ti {
        color: #34C759;
        font-size: 18px;
        margin-top: 1px;
    }

.rf-checklist {
    border: 1px solid #E8E8ED;
    border-radius: 12px;
    padding: 0 16px;
}

.rf-check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #E8E8ED;
    font-size: 15px;
    color: #1D1D1F;
}

    .rf-check-row:last-child {
        border-bottom: 0;
    }

    .rf-check-row small {
        display: block;
        font-size: 13px;
        color: #86868B;
    }

.rf-check {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #D2D2D7;
}

.rf-check-done {
    background: #34C759;
    border-color: #34C759;
    color: #fff;
    font-size: 13px;
}

.rf-check-now {
    border: 2px solid var(--rf-blue); /* the step to do now: blue, like its button. Amber means needs attention. */
    color: var(--rf-blue);
}

.rf-check-act {
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
    color: var(--rf-blue);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.rf-home-foot {
    text-align: center;
    font-size: 14px;
    color: #86868B;
    margin-top: 16px;
}


/* ════════════════════════════════════════════
   BUTTON ROW — one main button + outline buttons
   Side by side on a computer. Stacked full width on a
   phone, main button on top. Order in markup:
   Back, then secondary, then the main button last.
   ════════════════════════════════════════════ */
.rf-btn-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

@media (max-width: 575.98px) {
    .rf-btn-row {
        flex-direction: column-reverse;
    }

        .rf-btn-row .btn {
            width: 100%;
        }
}

/* ════ GOOGLE STEP — the "who can get into your listing" choices ════
   Own class so Settings' .rf-style-card never changes how these look.
   Same look on Home and in Setup. */
.rf-choice {
    background: #F5F5F7;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .rf-choice:hover {
        border-color: var(--rf-blue);
        box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12), 0 8px 24px rgba(0, 113, 227, 0.15);
    }

/* ════ ONBOARDING — step names under the dots ════ */
.rf-step-label {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 400;
    color: #86868B;
    white-space: nowrap;
}

/* Get Flo ready */
.rf-flo-bar {
    display: flex;
    gap: 4px
}

    .rf-flo-bar i {
        flex: 1;
        height: 4px;
        border-radius: 2px;
        background: #E8E8ED
    }

        .rf-flo-bar i.on {
            background: #0071E3
        }

/* Always keep room for the scrollbar, so pages don't shift sideways
   when something opens and the page gets taller (Settings cards, for one). */
html {
    scrollbar-gutter: stable;
}

.rf-flo-pills {
    display: flex;
    gap: 8px
}

    .rf-flo-pills button {
        flex: 1;
        min-height: 42px;
        border-radius: 10px;
        border: 1px solid #D2D2D7;
        background: #fff;
        font-size: 15px;
        color: #1D1D1F
    }

        .rf-flo-pills button.on {
            border: 1.5px solid var(--rf-blue);
            background: rgba(0,113,227,0.05)
        }

/* Status pills: one readable size everywhere. Green = working, gray = off or ended. */
.rf-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--rf-radius-full);
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 500;
}

.rf-pill-ok,
.rf-tile-ok {
    background: rgba(52, 199, 89, 0.12);
    color: var(--rf-success-text);
}

.rf-pill-muted {
    background: var(--rf-surface);
    color: var(--rf-text-tertiary);
}

.rf-pill-danger,
.rf-tile-danger {
    background: rgba(255, 59, 48, 0.1);
    color: var(--rf-error-text);
}

.rf-pill-warn,
.rf-tile-warn {
    background: var(--rf-warning-bg);
    color: var(--rf-warning-text);
}

/* "What changes" list inside the switch-plan confirm. */
.rf-change-list {
    text-align: left;
    background: var(--rf-surface);
    border-radius: var(--rf-radius-md);
    padding: 12px 16px;
    margin: 12px 0 0;
    font-size: 15px;
    color: var(--rf-text);
}

    .rf-change-list div + div {
        margin-top: 6px;
    }

    .rf-change-list div::before {
        content: "→ ";
        color: var(--rf-text-tertiary);
    }

/* Free-trial countdown: calm gray, amber in the last 3 days. */
.rf-trial-bar {
    height: 8px;
    border-radius: var(--rf-radius-full);
    background: var(--rf-border);
    overflow: hidden;
}

    .rf-trial-bar > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--rf-text-tertiary);
    }

    .rf-trial-bar.soon > span {
        background: var(--rf-warning);
    }

.rf-flo-tone {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid #E8E8ED;
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    margin-bottom: 8px;
    font-size: 15px;
    color: #1D1D1F
}

    .rf-flo-tone.on {
        border: 1.5px solid var(--rf-blue);
        background: rgba(0,113,227,0.05)
    }

.rf-flo-fact {
    border: 1px solid #E8E8ED;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: #fff
}

.rf-flo-fact-val {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    font-size: 15px;
    color: #1D1D1F
}

/* ════════════════════════════════════════════
   ROWS, PILLS AND HOVERS — one place for "you can click this"
   Cards that open here:  .card-header.cursor-pointer  (Settings, Notes, Response timeline)
   Full-width rows:       .rf-expand-row               (Get more reviews)
   Rows in a list:        .rf-list-row                 (Help questions, dashboard recent replies)
   Pills you can tap:     a.rf-pill-link               (dashboard trial pill)
   Soft gray behind, darker arrow. Phones skip the hover.
   ════════════════════════════════════════════ */

.card-header.cursor-pointer,
.rf-expand-row {
    transition: background-color .15s ease;
}

:is(.card-header.cursor-pointer, .rf-expand-row, .rf-list-row) :is(.ti-chevron-down, .ti-chevron-up, .ti-chevron-right) {
    transition: color .15s ease;
}

/* A closed card is only its header: round all four corners, no line under it */
.card > .card-header.cursor-pointer:only-child {
    border-radius: var(--rf-radius-lg) !important;
    border-bottom-color: transparent !important;
}

/* Rows in a list: the gray sits a little wider than the words */
.rf-list-row {
    position: relative;
    z-index: 0;
}

    .rf-list-row::before {
        content: "";
        position: absolute;
        inset: 4px -12px;
        border-radius: 10px;
        z-index: -1;
        transition: background-color .15s ease;
    }

/* Dashboard recent replies: our reply in 2 lines, with a small reply arrow in front */
.rf-reply-text {
    position: relative;
    padding-left: 22px;
    color: var(--rf-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .rf-reply-text .rf-reply-icon {
        position: absolute;
        left: 0;
        top: 3px;
        font-size: 15px;
        color: var(--rf-text-placeholder);
    }

/* Pills you can tap: same pill, plus an arrow and a hover */
a.rf-pill-link {
    text-decoration: none;
    transition: background-color .15s ease;
}

    a.rf-pill-link.rf-pill-muted {
        color: var(--rf-text-secondary);
    }

    a.rf-pill-link .ti-chevron-right {
        font-size: 15px;
    }

@media (hover: hover) {
    .card-header.cursor-pointer:hover,
    .rf-expand-row:hover {
        background-color: var(--rf-surface) !important;
        box-shadow: none;
    }

    .rf-list-row:hover::before {
        background-color: var(--rf-surface);
    }

    .card > .card-header.cursor-pointer:only-child:hover {
        box-shadow: inset 0 0 0 1px var(--rf-border);
    }

    :is(.card-header.cursor-pointer, .rf-expand-row, .rf-list-row):hover :is(.ti-chevron-down, .ti-chevron-up, .ti-chevron-right) {
        color: var(--rf-text) !important;
    }

    :is(.card-header.cursor-pointer, .rf-expand-row):hover .rf-card-icon-muted {
        background-color: var(--rf-card) !important;
    }

    a.rf-pill-link.rf-pill-muted:hover {
        background: var(--rf-border);
    }

    a.rf-pill-link.rf-pill-warn:hover {
        background: rgba(255, 149, 0, 0.18);
    }
}

/* Bigger target for thumbs */
@media (max-width: 575.98px) {
    a.rf-pill-link {
        padding: 8px 14px;
    }
}

/* Location picker in the top bar: white box, soft gray on mouse-over and while its menu is open */
.rf-loc-picker {
    border: 1px solid var(--rf-border) !important;
    background: var(--rf-card) !important;
    color: var(--rf-text) !important;
    border-radius: 10px !important;
    height: 40px;
    padding: 0 14px !important;
    max-width: 300px;
    transition: background-color .15s ease;
}

    .rf-loc-picker[aria-expanded="true"] {
        background: var(--rf-surface) !important;
    }

        .rf-loc-picker[aria-expanded="true"] .ti-chevron-down {
            color: var(--rf-text) !important;
        }

@media (hover: hover) {
    .rf-loc-picker:hover {
        background: var(--rf-surface) !important;
    }

        .rf-loc-picker:hover .ti-chevron-down {
            color: var(--rf-text) !important;
        }
}

/* Choices (How Flo writes, Get Flo ready, Running a special?):
   mouse-over = thin blue line + light blue; picked = thicker blue line + light blue + a check circle, top right */
.rf-flo-tone,
.rf-flo-pills button {
    position: relative;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.rf-flo-tone {
    padding-right: 40px;
}

.rf-flo-pills button {
    padding-left: 30px;
    padding-right: 30px;
}

@media (hover: hover) {
    .rf-flo-tone:not(.on):hover,
    .rf-flo-pills button:not(.on):hover {
        border-color: var(--rf-blue);
        background: rgba(0, 113, 227, 0.05);
    }
}

/* The check circle on the picked choice: same corner on every choice, so "picked" never depends on color alone */
.rf-flo-tone.on::after,
.rf-flo-pills button.on::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rf-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Setup steps (first-time setup and Add a location): blue = done or current, gray = still to do */
.rf-step-dot {
    position: relative;
    width: 22px;
    height: 22px;
    font-size: 11px;
    font-weight: 600;
}

.rf-step-done {
    background: var(--rf-blue);
    color: var(--rf-card);
}

.rf-step-todo {
    background: var(--rf-border);
    color: var(--rf-text-tertiary);
}

.rf-step-line {
    width: 28px;
    height: 2px;
    border-radius: 1px;
    background: rgba(0, 0, 0, 0.1);
}

    .rf-step-line.rf-step-line-done {
        background: var(--rf-blue);
    }

/* Google lookup, Add a location (PlaceSearch.razor). The list, rows, footer and
   "Google Maps" label are shared with signup: see "Signup: restaurant suggestions". */
.rf-place-search {
    position: relative;
}

    .rf-place-search > .ti-search {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: var(--rf-text-tertiary);
        pointer-events: none;
    }

    .rf-place-search > input {
        padding-left: 42px;
    }

/* Already on this account: shown so they know, but can't be picked again */
.rf-place-item:disabled {
    cursor: default;
    color: var(--rf-text-tertiary);
}

/* Small gray tag after a label: "Recommended", "Already on this account" */
.rf-tag,
.rf-place-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--rf-radius-full);
    background: var(--rf-surface);
    color: var(--rf-text-tertiary);
    font-size: 12px;
    font-weight: 500;
    vertical-align: 2px;
}

@media (hover: hover) {
    .rf-place-item:not(:disabled):hover {
        background: var(--rf-surface);
    }
}

/* Group names above cards: "Flo", "You and your team", "Account", "More help" */
.rf-group-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--rf-text-secondary);
}

/* Text boxes that grow with their words (Flo's reply, Notes).
   Browsers that can't do this yet keep the box at its normal size.
   Phones keep their taller box from the TEXTAREAS MOBILE rule. */
textarea.rf-grow {
    field-sizing: content;
    min-height: 6rem;
}


/* Status tabs as buttons (Get more reviews: Square | Toast | Clover | Other) */
button.rf-status-tab {
    border: 0;
    background: transparent;
}


/* Sidebar bubbles: deep amber = needs you (the rule earlier in this file), red = at risk.
   Owner menu has no bg-danger bubbles, so nothing changes there. */
.side-menu__item .badge.bg-danger {
    background: var(--rf-error) !important;
}

/* ════════════════════════════════════════════
   ADMIN PAGES: built from the owner pages' pieces, so the whole app is one product.
   Width: col-xl-8 col-lg-10. Title: <h2 class="fw-semibold">.
   Sections: .custom-card with a .card-title and a .rf-card-icon-muted chip.
   Rows: .rf-list-row. Review lists: .review-card. Pills: .rf-pill. Tabs: .rf-status-tabs. Steps: .rf-step-num.
   ════════════════════════════════════════════ */

/* Getting set up (admin dashboard): four dots for signed up, invite sent, connected, live.
   Gray only: they show progress, not status. */
.rf-dots {
    display: inline-flex;
    gap: 4px;
    margin-right: 8px;
    vertical-align: 1px;
}

    .rf-dots i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--rf-border);
        display: inline-block;
    }

        .rf-dots i.on {
            background: var(--rf-text-tertiary);
        }

/* Count inside the selected tab (button tabs only, so the owner Inbox is untouched) */
button.rf-status-tab.active .badge {
    background: rgba(255, 255, 255, 0.25);
}


/* ════════════════════════════════════════════
   SETUP SCREENS (onboarding and the Google step)
   One layout everywhere: "‹ Back" top left, one full-width blue
   button, and an optional quiet link under it. Learned once.
   ════════════════════════════════════════════ */

/* "‹ Back": a quiet link at the top left, above the heading */
.rf-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    color: var(--rf-blue);
    cursor: pointer;
}

/* The one main button: full width on a phone */
.rf-step-actions {
    margin-top: 24px;
    text-align: center;
}

    .rf-step-actions .btn-primary {
        width: 100%;
    }

/* On anything wider than a phone, the main button stops at 360px: a button, not a banner */
@media (min-width: 576px) {
    .rf-step-actions .btn-primary {
        max-width: 360px;
    }
}

/* The quiet second choice under it: "I'll do it later", "I'll check later" */
.rf-quiet-link {
    display: block;
    margin: 12px auto 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    color: var(--rf-blue);
    cursor: pointer;
}

/* A choice with a checkbox ("Text me when a bad review needs me").
   Gray until checked, blue once checked: same look as the plan cards (.rf-plan). */
.rf-check-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1.5px solid var(--rf-border);
    border-radius: var(--rf-radius-md);
    background: var(--rf-card);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

    .rf-check-card:has(input:checked) {
        border-color: var(--rf-blue);
        background: rgba(0, 113, 227, 0.03);
    }

    .rf-check-card .form-check-input {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        margin-top: 1px !important;
        border: 2px solid var(--rf-text-tertiary) !important;
        cursor: pointer;
    }

        .rf-check-card .form-check-input:checked {
            background-color: var(--rf-blue) !important;
            border-color: var(--rf-blue) !important;
        }

@media (hover: hover) {
    .rf-back:hover,
    .rf-quiet-link:hover {
        text-decoration: underline;
    }

    .rf-check-card:not(:has(input:checked)):hover {
        border-color: rgba(0, 113, 227, 0.4);
    }
}



/* Phones and tablets: give "‹ Back" and the quiet links a full thumb-size target (44px) */
@media (pointer: coarse) {
    .rf-back {
        min-height: 44px;
    }

    .rf-quiet-link {
        padding: 12px 16px;
        margin-top: 0;
    }
}


/* Soft gray box for a message, an email to copy, or "what you'll see" cards (setup screens) */
.rf-soft-box {
    background: var(--rf-surface);
    border-radius: var(--rf-radius-md);
    padding: 16px;
    line-height: 1.6;
    color: var(--rf-text);
}

/* Trust lines under a setup screen: "Manager access only, never Owner." */
.rf-trust {
    border-top: 1px solid var(--rf-border);
    margin-top: 16px;
    padding-top: 16px;
    font-size: 14px;
    color: var(--rf-text-tertiary);
}

    .rf-trust > div {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

        .rf-trust > div + div {
            margin-top: 4px;
        }

    .rf-trust i {
        font-size: 16px;
        margin-top: 2px;
    }

/* ════════════════════════════════════════════
   PHONE TOP BAR + MAIN BUTTON (≤575px)
   Big screens: the full name, "Crumbl Cookies · Eastern Ave".
   Phones: just the spot name, "Eastern Ave". It shrinks with "…" before it
   can push Help, Settings or your initials off the screen.
   rf-btn-main: the ONE main button on a page. Full width on phones only.
   ════════════════════════════════════════════ */
.rf-loc-short {
    display: none;
}

@media (max-width: 575.98px) {
    .rf-loc-full {
        display: none;
    }

    .rf-loc-short {
        display: block;
    }

    .header-content-right,
    .header-content-right .header-element:has(.rf-loc-picker),
    .header-content-right .dropdown:has(.rf-loc-picker) {
        min-width: 0;
    }

    .rf-loc-picker {
        max-width: 160px;
        padding: 0 10px !important;
        gap: 6px !important;
        font-size: 14px !important;
    }

        .rf-loc-picker > span {
            min-width: 0;
        }

    .rf-btn-main {
        width: 100%;
    }
}

/* The location list sizes to its longest name, so no name or check mark spills past the edge */
.dropdown:has(.rf-loc-picker) > .dropdown-menu {
    width: max-content;
    max-width: calc(100vw - 24px);
}

/* Phones: the location list opens like your profile menu. A full-width panel right
   under the top bar, over the same soft blur, and the page behind it stays still. */
@media (max-width: 575.98px) {
    .rf-loc-menu.show {
        position: fixed !important;
        inset: 60px 0 auto 0 !important;
        transform: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        z-index: 1001 !important;
        background: #ffffff !important;
    }

    body:has(.rf-loc-menu.show) {
        overflow: hidden !important;
    }
}

/* ════════════════════════════════════════════
   PHONE DASHBOARD (≤575px)
   The three numbers (rating, new this month, replied) sit side by side in one card
   instead of three tall boxes. Computers keep the three tiles as they are.
   rf-row-link: a whole-row link. On phones the action words go and the chevron stays,
   so the title gets the full width. Same look as "Recent replies we posted".
   ════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .rf-stat-grid.rf-stat-grid-3 {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        margin: 0 0 0.75rem 0;
        background: var(--rf-card);
        border-radius: var(--rf-radius-lg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

        .rf-stat-grid.rf-stat-grid-3 > [class*="col-"] {
            flex: 0 0 33.333%;
            max-width: 33.333%;
        }

            .rf-stat-grid.rf-stat-grid-3 > [class*="col-"] > .card.custom-card {
                background: transparent;
                box-shadow: none !important;
                border-radius: 0 !important;
            }

            .rf-stat-grid.rf-stat-grid-3 > [class*="col-"] + [class*="col-"] > .card.custom-card {
                border-left: 1px solid var(--rf-border) !important;
            }

            .rf-stat-grid.rf-stat-grid-3 > [class*="col-"] > .card > .card-body {
                padding: 12px 6px !important;
                text-align: center;
            }

        .rf-stat-grid.rf-stat-grid-3 .card-body > .d-flex {
            justify-content: center !important;
        }

        .rf-stat-grid.rf-stat-grid-3 .card-body p.fs-15 {
            font-size: 12px !important;
            font-weight: 400;
            color: var(--rf-text-tertiary);
            margin-bottom: 4px !important;
        }

        .rf-stat-grid.rf-stat-grid-3 h3 {
            font-size: 18px;
        }

        .rf-stat-grid.rf-stat-grid-3 .star-rating-md {
            font-size: 11px;
        }

        .rf-stat-grid.rf-stat-grid-3 .card-body .fs-14 {
            font-size: 11px !important;
        }

    .rf-row-link .rf-link {
        font-size: 0 !important;
    }

        .rf-row-link .rf-link i {
            font-size: 18px;
            color: var(--rf-text-tertiary);
        }
}

/* The small line under "Replied": each part stays whole.
   Computers: "3 need your OK · 4 on the way", breaking between parts if the tile is narrow.
   Phones: one part per line. */
.rf-sub-part {
    display: inline-block;
    white-space: nowrap;
}

    .rf-sub-part:not(:last-child)::after {
        content: "·";
        margin: 0 0.35em;
    }

@media (max-width: 575.98px) {
    .rf-sub-part {
        display: block;
    }

        .rf-sub-part:not(:last-child)::after {
            content: none;
        }
}

/* PHONE FOOTER (≤575px): two tidy centered lines instead of "Privacy" alone on a line.
   Line 1: © 2026 ReviewFloAI. All rights reserved.   Line 2: Terms · Privacy */
@media (max-width: 575.98px) {
    .footer .container > span:first-child {
        display: block;
        font-size: 13px;
        margin-bottom: 4px;
    }

    .footer .container > span + span {
        display: none; /* the dot after "All rights reserved." */
    }

        .footer .container > span + span + a {
            margin-left: 0 !important; /* Terms starts line 2, centered */
        }

    .footer .container > a + a::before {
        content: "·";
        margin-right: 0.5rem;
        color: var(--rf-text-tertiary);
    }
}

/* Phone footer: even space on both sides of the dot in "Terms · Privacy" */
@media (max-width: 575.98px) {
    .footer .container > a + a {
        margin-left: 0.25rem !important;
    }
}

/* PHONE REVIEW LISTS (≤575px): a long review stops at 3 lines with "…", so the next
   cards stay on screen. The full review is one tap away on the review page. */
@media (max-width: 575.98px) {
    .rf-review-snippet {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* PHONE REVIEW PAGE (≤575px): "Our team is handling it" as one compact row.
   Shield on the left, heading and status on the right, the "Email us" line under both.
   Computers keep the centered version. */
@media (max-width: 575.98px) {
    div:has(> .rf-team-title) {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 12px;
        text-align: left !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--rf-border);
    }

        div:has(> .rf-team-title) > div:first-child {
            grid-column: 1;
            grid-row: 1 / span 2;
            width: 40px !important;
            height: 40px !important;
            margin: 0 !important;
        }

            div:has(> .rf-team-title) > div:first-child i {
                font-size: 22px !important;
            }

        div:has(> .rf-team-title) > .rf-team-title {
            grid-column: 2;
            grid-row: 1;
            font-size: 16px;
            margin: 0 0 2px !important;
        }

        div:has(> .rf-team-title) > p:first-of-type {
            grid-column: 2;
            grid-row: 2;
            font-size: 14px !important;
        }

        div:has(> .rf-team-title) > p:last-of-type {
            grid-column: 1 / -1;
            grid-row: 3;
            margin-top: 12px !important;
        }
}

/* PHONE LIST TABS (≤575px): "Needs your OK · Following up · All reviews" fit inside the screen.
   Only the tab row: the review page's ‹ 1 of 2 › pill uses the same class and stays as it is. */
@media (max-width: 575.98px) {
    .rf-status-tabs:has(.rf-status-tab) {
        display: flex;
        width: 100%;
    }

    .rf-status-tabs .rf-status-tab {
        flex: 1 1 auto;
        padding: 8px 6px;
    }
}

/* Short centered lines wrap evenly, so one word never sits alone on the last line.
   Example: "No answer needed. It closes on its own in 14 days." on the follow-up card. */
.rf-balance {
    text-wrap: balance;
}


/* NEXT UP (review page): the next review in the list, one tap away.
   Dark words, blue arrow. Mouse-over: soft gray, same as the other rows you can click. */
.rf-next-up,
.rf-next-up:hover {
    color: var(--rf-text);
    text-decoration: none;
}

    .rf-next-up .ti-chevron-right {
        transition: transform .15s ease;
    }

@media (hover: hover) {
    .rf-next-up:hover {
        background: var(--rf-surface) !important;
    }

        .rf-next-up:hover .ti-chevron-right {
            transform: translateX(2px);
        }
}

/* PHONE STARS on Yelp & other sites (≤575px): 44px tap targets, so a thumb picks the star it meant. */
@media (max-width: 575.98px) {
    .rf-star {
        min-width: 44px;
        min-height: 44px;
        font-size: 2rem;
    }
}

/* PHONE "Fill from screenshot" (≤575px): the step label gets its own line, the button sits
   right under it, and its menu opens from the left so it stays on screen.
   Computers keep label left, button right. */
@media (max-width: 575.98px) {
    .rf-capture-row {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

        .rf-capture-row > label,
        .rf-capture-row > span,
        .rf-capture-row > .rf-capture {
            grid-row: auto;
        }

        .rf-capture-row > .rf-capture {
            justify-self: start;
        }

        .rf-capture-row .rf-capture-menu {
            left: 0;
            right: auto;
        }
}

/* GET MORE REVIEWS, phones (≤575px): the link on its own line, then
   Copy link · Text · Email side by side in one row instead of three stacked buttons. */
@media (max-width: 575.98px) {
    .rf-share-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
    }

        .rf-share-row > :first-child {
            grid-column: 1 / -1;
        }

        .rf-share-row > .btn {
            padding-left: 4px;
            padding-right: 4px;
            font-size: 15px !important;
            white-space: nowrap;
        }
}

/* Copy link in the receipt steps: a full thumb-size target on touch screens (44px),
   same text size as the Copy link · Text · Email row. */
@media (pointer: coarse) {
    .btn.rf-copy-link {
        min-height: 44px;
        padding: 8px 18px !important;
        font-size: 15px !important;
    }
}

/* Plan switch popup, more than one location: each location's new price, then the total.
   Same gray box as the "what changes" list under it. */
.rf-bill-lines {
    text-align: left;
    background: var(--rf-surface);
    border-radius: var(--rf-radius-md);
    padding: 8px 16px;
    margin: 12px 0;
    font-size: 15px;
    color: var(--rf-text);
}

    .rf-bill-lines > div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
    }

        .rf-bill-lines > div + div {
            border-top: 1px solid var(--rf-border);
        }

    .rf-bill-lines .rf-bill-total {
        font-weight: 600;
    }


/* ADD A LOCATION, phones (≤575px): "What do you call each one?"
   Label on top, name box full width under it, so the whole name shows.
   Computers keep the label beside the box. */
@media (max-width: 575.98px) {
    .rf-name-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 4px !important;
    }

        .rf-name-row > label {
            width: auto !important;
        }
}


/* PHONE TOP BAR, fit (<=575px). Overrides the 160px cap in "PHONE TOP BAR" above.
   Only the location button may shrink: it ends with "..." and never covers Help.
   Phones hide the store icon and the gear (Settings is in your initials menu). */
@media (max-width: 575.98px) {
    .header-content-left {
        flex: none;
    }

    .header-content-right {
        flex: 1 1 auto;
        min-width: 0;
    }

        .header-content-right > .header-element {
            flex: none;
        }

            .header-content-right > .header-element:has(.rf-loc-picker),
            .header-content-right .dropdown:has(.rf-loc-picker) {
                flex: 1 1 auto;
                min-width: 0;
            }

    .rf-loc-picker {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

        .rf-loc-picker .ti-building-store {
            display: none;
        }

        .rf-loc-picker .ti-chevron-down {
            flex: none;
            margin-left: auto;
        }

    .rf-header-icons {
        margin-left: 0;
    }

        .rf-header-icons a[href="/settings"] {
            display: none !important;
        }
}

/* PHONES (≤575px): choices one per line, words on the left, check top-right, like the tone cards.
   Used by How Flo writes, Get Flo ready and Running a special? */
@media (max-width: 575.98px) {
    .rf-flo-pills {
        flex-direction: column;
    }

        .rf-flo-pills button {
            text-align: left;
            padding-left: 14px;
            padding-right: 40px;
        }
}

/* PHONES (≤575px): an email box and its button stack, box full width, button under it (Add your email). */
@media (max-width: 575.98px) {
    .rf-stack-phone {
        align-items: stretch !important;
        flex-direction: column;
    }

        .rf-stack-phone > .btn {
            width: 100%;
        }
}

/* Card icons never shrink, so titles line up even when the line beside them is long (Settings). */
.rf-card-icon {
    flex-shrink: 0;
}

/* ════════════════════════════════════════════
   MONTHLY NOTE CARD (Home)
   rf-note-fix: the soft amber box around "If you fix one thing".
   Same amber tint as rf-pill-warn, so amber still means "needs attention".
   rf-tag-new: the dark "New" tag, the first 7 days after the note goes out.
   Dark ink, not blue: blue is only for buttons and links.
   ════════════════════════════════════════════ */
.rf-note-fix {
    background: var(--rf-warning-bg);
    border-radius: var(--rf-radius-md);
    padding: 14px 16px;
}

.rf-note-fix-label {
    color: var(--rf-warning-text);
    font-weight: 500;
}

.rf-note-fix-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--rf-text);
}

.rf-note-fix .rf-pill-muted {
    background: var(--rf-bg);
}

.rf-tag-new {
    background: var(--rf-black);
    color: var(--rf-bg);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--rf-radius-full);
}

@media (max-width: 575.98px) {
    .rf-note-fix-title {
        font-size: 20px;
    }
}