/*
 * RepOcean design system — the one stylesheet for every app page.
 * Loaded after AdminLTE's css, which is kept ONLY as the Bootstrap 4 base:
 * the visible shell (sidebar, topbar, content) is defined here on ro-*
 * classes and no view uses AdminLTE components or its JS.
 * Tokens first, then shell, then components. Keep page CSS out of views.
 */

:root {
    /* Brand */
    --ro-primary: #0d6efd;
    --ro-primary-hover: #0b5ed7;
    --ro-primary-active: #0a58ca;
    --ro-primary-soft: #eaf2ff;

    /* Neutrals (slightly blue-hued grays) */
    --ro-bg: #f7f8fa;
    --ro-surface: #ffffff;
    --ro-sidebar-bg: #fbfcfd;
    --ro-text: #19212e;
    --ro-text-muted: #647082;
    --ro-line: #e6e9ef;

    /* Semantic */
    --ro-success: #16803c;
    --ro-success-soft: #e9f6ee;
    --ro-danger: #d7263d;
    --ro-danger-soft: #fdecee;
    --ro-warning: #b45309;
    --ro-warning-soft: #fdf1e1;
    --ro-star: #f1a33c;

    /* Shape & depth (8px spacing scale, soft depth) */
    --ro-radius: 10px;
    --ro-radius-sm: 8px;
    --ro-radius-pill: 999px;
    --ro-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
    --ro-shadow-md: 0 8px 24px rgba(16, 24, 40, .12);

    /* Type scale */
    --ro-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ro-fs-xs: .75rem;   /* 12 */
    --ro-fs-sm: .875rem;  /* 14 */
    --ro-fs-md: 1rem;     /* 16 */
    --ro-fs-lg: 1.25rem;  /* 20 */
    --ro-fs-xl: 1.5rem;   /* 24 */

    --ro-sidebar-w: 240px;
    --ro-topbar-h: 56px;
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--ro-font);
    font-size: var(--ro-fs-sm);
    color: var(--ro-text);
    background: var(--ro-bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--ro-font); color: var(--ro-text); }

/* ---------------------------------------------------------------- */
/* Base element overrides (one brand blue, quiet focus rings)       */
/* ---------------------------------------------------------------- */
a { color: var(--ro-primary); }
a:hover { color: var(--ro-primary-hover); }
.text-primary { color: var(--ro-primary) !important; }
.badge-primary, .bg-primary { background-color: var(--ro-primary) !important; }

.btn { border-radius: var(--ro-radius-sm); font-weight: 500; }
.btn-primary { background-color: var(--ro-primary); border-color: var(--ro-primary); }
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--ro-primary-hover);
    border-color: var(--ro-primary-hover);
}
.btn-primary:not(:disabled):active {
    background-color: var(--ro-primary-active);
    border-color: var(--ro-primary-active);
}
.btn-outline-primary { color: var(--ro-primary); border-color: var(--ro-primary); }
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--ro-primary);
    border-color: var(--ro-primary);
    color: #fff;
}
.btn-outline-secondary { color: var(--ro-text-muted); border-color: var(--ro-line); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: var(--ro-bg);
    color: var(--ro-text);
    border-color: var(--ro-line);
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .2); }
.btn:disabled, .btn.disabled { cursor: not-allowed; }

.form-control {
    border-color: var(--ro-line);
    border-radius: var(--ro-radius-sm);
    color: var(--ro-text);
}
.form-control:focus {
    border-color: var(--ro-primary);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
}
label { font-weight: 500; font-size: var(--ro-fs-sm); }

.page-item.active .page-link { background-color: var(--ro-primary); border-color: var(--ro-primary); }
.page-link { color: var(--ro-primary); border-color: var(--ro-line); }

/* Soft alerts (AdminLTE paints these solid; we want quiet) */
.alert { border-radius: var(--ro-radius-sm); border: 1px solid transparent; }
.alert-danger {
    background: var(--ro-danger-soft);
    border-color: #f5c2c7;
    color: #842029;
}
.alert-success {
    background: var(--ro-success-soft);
    border-color: #badbcc;
    color: #0f5132;
}
.alert-info {
    background: var(--ro-primary-soft);
    border-color: #b6d4fe;
    color: #084298;
}
.alert .close { color: inherit; text-shadow: none; opacity: .5; }

.card {
    border: 1px solid var(--ro-line);
    border-radius: var(--ro-radius);
    box-shadow: var(--ro-shadow-sm);
    margin-bottom: 24px;
    background: var(--ro-surface);
}
.card .card-header {
    background: var(--ro-surface);
    border-bottom: 1px solid var(--ro-line);
    border-radius: var(--ro-radius) var(--ro-radius) 0 0;
    padding: 16px 24px;
}
.card .card-title { font-size: var(--ro-fs-md); font-weight: 600; margin: 0; }
.card .card-body { padding: 24px; }
.card .card-footer { background: transparent; border-top: 1px solid var(--ro-line); padding: 16px 24px; }

.dropdown-menu {
    border: 1px solid var(--ro-line);
    border-radius: var(--ro-radius-sm);
    box-shadow: var(--ro-shadow-md);
    font-size: var(--ro-fs-sm);
    padding: 6px;
}
.dropdown-item { border-radius: 6px; padding: 8px 10px; color: var(--ro-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ro-bg); color: var(--ro-text); }
.dropdown-divider { border-color: var(--ro-line); margin: 6px 4px; }

/* ---------------------------------------------------------------- */
/* App shell: slim light sidebar + content area                     */
/* ---------------------------------------------------------------- */
.ro-app { margin: 0; }

.ro-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ro-sidebar-w);
    background: var(--ro-sidebar-bg);
    border-right: 1px solid var(--ro-line);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .2s ease;
}
.ro-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 20px 16px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ro-text);
    letter-spacing: -.01em;
}
.ro-brand:hover { color: var(--ro-text); text-decoration: none; }
.ro-brand .ro-brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--ro-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.ro-nav { flex: 1; padding: 8px 12px; overflow-y: auto; }
.ro-nav-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ro-text-muted);
    padding: 8px 10px 4px;
}
.ro-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: var(--ro-radius-sm);
    color: var(--ro-text-muted);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .12s, color .12s;
}
.ro-nav a i { width: 18px; text-align: center; font-size: 14px; }
.ro-nav a:hover { background: #eef1f5; color: var(--ro-text); }
.ro-nav a.active { background: var(--ro-primary-soft); color: var(--ro-primary); }

.ro-sidebar-user { border-top: 1px solid var(--ro-line); padding: 12px; }
.ro-user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: 0;
    border-radius: var(--ro-radius-sm);
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
}
.ro-user-btn:hover, .ro-user-btn:focus { background: #eef1f5; outline: none; }
.ro-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ro-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex: 0 0 auto;
}
.ro-user-meta { min-width: 0; }
.ro-user-meta .ro-user-name {
    font-weight: 600;
    font-size: var(--ro-fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ro-user-meta .ro-user-email {
    font-size: var(--ro-fs-xs);
    color: var(--ro-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ro-sidebar-user .dropdown-menu { width: calc(var(--ro-sidebar-w) - 24px); }
.ro-sidebar-user .dropdown-menu form { margin: 0; }
.ro-sidebar-user .dropdown-item button,
.dropdown-item-btn {
    background: none;
    border: 0;
    padding: 0;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Mobile topbar (hidden on desktop) */
.ro-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--ro-topbar-h);
    background: var(--ro-surface);
    border-bottom: 1px solid var(--ro-line);
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}
.ro-topbar .ro-brand { padding: 0 4px; font-size: 1rem; }
.ro-menu-btn {
    background: none;
    border: 0;
    border-radius: var(--ro-radius-sm);
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: var(--ro-text);
    cursor: pointer;
}
.ro-menu-btn:hover, .ro-menu-btn:focus { background: var(--ro-bg); }

.ro-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .4);
    z-index: 1035;
}

.ro-main {
    margin-left: var(--ro-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.ro-content {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 32px 32px 16px;
    flex: 1;
}
.ro-footer {
    max-width: 1160px;
    margin: 0 auto;
    width: 100%;
    padding: 16px 32px 24px;
    font-size: var(--ro-fs-xs);
    color: var(--ro-text-muted);
}

@media (max-width: 991.98px) {
    .ro-sidebar { transform: translateX(-100%); box-shadow: none; }
    body.ro-sidebar-open .ro-sidebar { transform: none; box-shadow: var(--ro-shadow-md); }
    body.ro-sidebar-open .ro-overlay { display: block; }
    .ro-topbar { display: flex; }
    .ro-main { margin-left: 0; }
    .ro-content { padding: 20px 16px 8px; }
    .ro-footer { padding: 8px 16px 20px; }
}

/* ---------------------------------------------------------------- */
/* Page header                                                      */
/* ---------------------------------------------------------------- */
.ro-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
}
.ro-page-header h1 {
    font-size: var(--ro-fs-xl);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}
.ro-page-sub {
    font-size: var(--ro-fs-sm);
    color: var(--ro-text-muted);
    margin: 4px 0 0;
}
.ro-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------- */
/* Toolbar + quick-filter chips                                     */
/* ---------------------------------------------------------------- */
.ro-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.ro-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: var(--ro-radius-pill);
    border: 1px solid var(--ro-line);
    background: var(--ro-surface);
    color: var(--ro-text);
    font-size: var(--ro-fs-sm);
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.ro-chip:hover, .ro-chip:focus {
    border-color: var(--ro-primary);
    color: var(--ro-primary);
    text-decoration: none;
}
.ro-chip.active {
    background: var(--ro-primary);
    border-color: var(--ro-primary);
    color: #fff;
}
.ro-chip .badge { font-weight: 600; background: var(--ro-primary-soft); color: var(--ro-primary); }
.ro-chip.active .badge { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---------------------------------------------------------------- */
/* Data tables (incl. restyled DataTables chrome)                   */
/* ---------------------------------------------------------------- */
.ro-table { width: 100%; font-size: var(--ro-fs-sm); color: var(--ro-text); }
.ro-table th {
    font-size: var(--ro-fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ro-text-muted);
    font-weight: 600;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ro-line) !important;
}
.ro-table th, .ro-table td { padding: 12px; vertical-align: middle; border-color: var(--ro-line); }
.ro-table tbody tr { transition: background-color .15s; }
.ro-table tbody tr:hover { background: #f3f6fb; }
.ro-table .ro-row-disabled { background: var(--ro-danger-soft); }
.ro-table .ro-row-disabled td { color: #842029; }

table.dataTable.ro-table { border-collapse: collapse !important; }
table.dataTable.ro-table thead .sorting:before,
table.dataTable.ro-table thead .sorting:after,
table.dataTable.ro-table thead .sorting_asc:before,
table.dataTable.ro-table thead .sorting_asc:after,
table.dataTable.ro-table thead .sorting_desc:before,
table.dataTable.ro-table thead .sorting_desc:after { bottom: .7em; }
.dataTables_wrapper .dataTables_filter { margin-bottom: 12px; }
.dataTables_wrapper .dataTables_filter label { color: var(--ro-text-muted); font-weight: 500; }
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--ro-line);
    border-radius: var(--ro-radius-sm);
    padding: 6px 10px;
    margin-left: 8px;
    font-family: var(--ro-font);
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ro-primary);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
    outline: none;
}
.dataTables_wrapper .dataTables_info { color: var(--ro-text-muted); font-size: var(--ro-fs-xs); padding-top: 16px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--ro-radius-sm) !important;
    border: 1px solid transparent !important;
    background: none !important;
    color: var(--ro-text) !important;
    padding: 4px 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: var(--ro-line) !important;
    background: var(--ro-bg) !important;
    color: var(--ro-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ro-primary) !important;
    border-color: var(--ro-primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--ro-text-muted) !important;
    border-color: transparent !important;
    background: none !important;
}

/* ---------------------------------------------------------------- */
/* Review card (shared partial: inbox + location view + dashboard)  */
/* ---------------------------------------------------------------- */
.ro-review {
    background: var(--ro-surface);
    border: 1px solid var(--ro-line);
    border-radius: var(--ro-radius);
    box-shadow: var(--ro-shadow-sm);
    padding: 16px 20px;
    margin-bottom: 12px;
}
.ro-review-head { display: flex; align-items: flex-start; gap: 12px; }
.ro-review-head img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--ro-bg);
}
.ro-review-author { font-weight: 600; font-size: var(--ro-fs-md); margin: 0; }
.ro-review-meta { font-size: var(--ro-fs-xs); color: var(--ro-text-muted); margin-top: 2px; }
.ro-review-meta a { color: inherit; text-decoration: underline; }
.ro-review-meta a:hover { color: var(--ro-primary); }
.ro-stars { color: var(--ro-star); white-space: nowrap; }
.ro-review-text {
    font-size: var(--ro-fs-sm);
    margin: 10px 0 0 52px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.ro-review-negative { border-left: 3px solid var(--ro-danger); }

.ro-response {
    background: var(--ro-bg);
    border-left: 3px solid var(--ro-primary);
    border-radius: var(--ro-radius-sm);
    padding: 12px 16px;
    margin: 12px 0 0 52px;
    font-size: var(--ro-fs-sm);
}
.ro-response-label {
    font-weight: 600;
    color: var(--ro-primary);
    font-size: var(--ro-fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}
.ro-response-text { overflow-wrap: anywhere; white-space: pre-line; }

.ro-reply-form { margin: 12px 0 0 52px; }
.ro-reply-form textarea {
    font-size: var(--ro-fs-sm);
    border-radius: var(--ro-radius-sm);
    resize: vertical;
}
.ro-reply-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ro-char-count { margin-left: auto; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-char-count.over { color: var(--ro-danger); font-weight: 600; }
.ro-review .ro-show-reply-btn { margin: 10px 0 0 52px; }

/* Customer photos/videos attached to the review */
.ro-review-media {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0 52px;
    padding: 0;
}
.ro-review-media li[hidden] { display: none; }
.ro-media-item {
    position: relative;
    display: block;
    width: 64px;
    height: 64px;
    border-radius: var(--ro-radius-sm);
    overflow: hidden;
    background: var(--ro-bg);
    border: 1px solid var(--ro-line);
}
.ro-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .15s ease;
}
.ro-media-item:hover img { transform: scale(1.05); }
.ro-media-item:focus-visible { outline: 2px solid var(--ro-primary); outline-offset: 2px; }
.ro-media-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
    pointer-events: none;
}
.ro-media-more {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-weight: 600;
    font-size: var(--ro-fs-md);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Photo lightbox (assets/js/app.js) */
.ro-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 14, 20, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 16px;
}
.ro-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--ro-radius-sm);
    background: #1b2130;
}
.ro-lightbox-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ro-lightbox-btn[hidden] { display: none; }
.ro-lightbox-btn:hover, .ro-lightbox-btn:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
.ro-lightbox-close { top: 8px; right: 8px; }
.ro-lightbox-prev { left: 8px; top: 50%; margin-top: -22px; }
.ro-lightbox-next { right: 8px; top: 50%; margin-top: -22px; }
.ro-lightbox-caption {
    position: absolute;
    left: 16px;
    right: 64px;
    top: 18px;
    color: #e8ecf2;
    font-size: var(--ro-fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ro-lightbox-open { overflow: hidden; }

@media (max-width: 575.98px) {
    .ro-review { padding: 14px 16px; }
    .ro-review-text, .ro-response, .ro-reply-form, .ro-review .ro-show-reply-btn, .ro-review-media { margin-left: 0; }
    .ro-media-item { width: 56px; height: 56px; }
}

/* ---------------------------------------------------------------- */
/* Empty states + onboarding checklist                              */
/* ---------------------------------------------------------------- */
.ro-empty { text-align: center; padding: 48px 24px; color: var(--ro-text-muted); }
.ro-empty .ro-empty-icon { font-size: 36px; color: #c9d2de; margin-bottom: 12px; }
.ro-empty h2 { font-size: var(--ro-fs-lg); font-weight: 600; color: var(--ro-text); margin-bottom: 6px; }
.ro-empty p { max-width: 420px; margin: 0 auto 16px; }

.ro-checklist {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
    list-style: none;
    padding: 0;
}
.ro-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ro-line);
    border-radius: var(--ro-radius);
    background: var(--ro-surface);
    margin-bottom: 8px;
    color: var(--ro-text);
}
.ro-checklist li.done { border-color: var(--ro-success); }
.ro-checklist li.done .ro-check-icon { color: var(--ro-success); }
.ro-checklist .ro-check-icon { color: var(--ro-text-muted); width: 20px; text-align: center; }
.ro-checklist li a { margin-left: auto; white-space: nowrap; }

/* ---------------------------------------------------------------- */
/* KPI tiles + rating distribution (dashboard)                      */
/* ---------------------------------------------------------------- */
.ro-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.ro-kpi {
    background: var(--ro-surface);
    border: 1px solid var(--ro-line);
    border-radius: var(--ro-radius);
    box-shadow: var(--ro-shadow-sm);
    padding: 16px;
}
.ro-kpi-value {
    font-size: var(--ro-fs-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.ro-kpi-label {
    font-size: var(--ro-fs-xs);
    color: var(--ro-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 4px;
}
.ro-kpi-alert .ro-kpi-value { color: var(--ro-danger); }
.ro-kpi-warn .ro-kpi-value { color: var(--ro-warning); }
.ro-kpi-ok .ro-kpi-value { color: var(--ro-success); }
.ro-kpi a.text-reset:hover { text-decoration: underline; }
/* Clickable KPI tile (filters the table below) */
.ro-kpi-action { cursor: pointer; width: 100%; text-align: left; font: inherit; }
.ro-kpi-action:hover, .ro-kpi-action:focus { border-color: var(--ro-primary); box-shadow: var(--ro-shadow-md); outline: none; }

/* ---------------------------------------------------------------- */
/* Sync-health indicator + list toolbar (locations list)            */
/* ---------------------------------------------------------------- */
.ro-sync { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ro-sync-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ro-text-muted); }
.ro-sync-fresh .ro-sync-dot { background: var(--ro-success); }
.ro-sync-stale .ro-sync-dot { background: var(--ro-warning); }
.ro-sync-never .ro-sync-dot { background: var(--ro-danger); }
.ro-sync-stale { color: var(--ro-warning); }
.ro-sync-never { color: var(--ro-danger); font-weight: 600; }

.ro-badge-warn { background: var(--ro-warning-soft); color: var(--ro-warning); }
.ro-badge-danger { background: var(--ro-danger-soft); color: var(--ro-danger); }

/* Search + sort sit together, right-aligned, as one row that wraps to the
   next toolbar line as a block when the chips leave too little room. */
.ro-list-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.ro-list-search {
    position: relative;
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 300px;
}
.ro-list-search .fa-search {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--ro-text-muted);
    pointer-events: none;
    font-size: var(--ro-fs-sm);
}
.ro-list-search input { padding-left: 34px; }
.ro-list-sort { flex: 0 1 210px; width: auto; }
.ro-list-count { font-size: var(--ro-fs-sm); color: var(--ro-text-muted); }
.ro-row-hidden { display: none !important; }

/* Locations table: top-align so multi-line addresses read cleanly, and keep
   the compact headers + stat cells on one line each (the Location cell is the
   only one allowed to wrap, for long names and addresses). */
#loc-table th { white-space: nowrap; }
#loc-table tbody td { vertical-align: top; }
#loc-table .ro-num-cell,
#loc-table .ro-reply-cell,
#loc-table .ro-when-cell { white-space: nowrap; }
/* Count and its "+N in 30 days" delta share one line; "N collected" drops below. */
#loc-table .ro-rev-line { display: block; }
#loc-table .ro-rev-line .small { margin-left: 2px; }

/* Manual "Sync now" control sits under the last-synced time. */
#loc-table .ro-sync-when { display: block; }
#loc-table .ro-sync-now {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 0;
    background: none;
    border: 0;
    font-size: var(--ro-fs-xs);
    font-weight: 600;
    color: var(--ro-primary);
    cursor: pointer;
}
#loc-table .ro-sync-now:hover { text-decoration: underline; }
#loc-table .ro-sync-now:disabled { color: var(--ro-text-muted); cursor: default; text-decoration: none; }

.ro-dist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: var(--ro-fs-sm);
}
.ro-dist-label { width: 48px; white-space: nowrap; }
.ro-dist-count { min-width: 80px; text-align: right; white-space: nowrap; color: var(--ro-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ro-dist-count .ro-dist-pct { color: var(--ro-text-muted); font-weight: 400; margin-left: 4px; }
.ro-dist-bar {
    flex: 1;
    height: 8px;
    background: var(--ro-bg);
    border: 1px solid var(--ro-line);
    border-radius: var(--ro-radius-pill);
    overflow: hidden;
}
.ro-dist-bar span {
    display: block;
    height: 100%;
    background: var(--ro-primary);
    border-radius: var(--ro-radius-pill);
    transition: width .3s ease;
}

/* Dashboard chart controls (time range + location filter) */
.ro-chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ro-chart-select { width: auto; min-width: 160px; }
.ro-range .btn { color: var(--ro-text-muted); }
.ro-range .btn.active,
.ro-range .btn.active:hover,
.ro-range .btn.active:focus {
    background: var(--ro-primary) !important;
    border-color: var(--ro-primary) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------- */
/* Toasts                                                           */
/* ---------------------------------------------------------------- */
.ro-toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: calc(100vw - 32px);
}
.ro-toast {
    min-width: 240px;
    max-width: 360px;
    background: var(--ro-text);
    color: #fff;
    border-radius: var(--ro-radius-sm);
    box-shadow: var(--ro-shadow-md);
    padding: 12px 16px;
    font-size: var(--ro-fs-sm);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
}
.ro-toast.show { opacity: 1; transform: none; }
.ro-toast.success { background: var(--ro-success); }
.ro-toast.error { background: var(--ro-danger); }

/* ---------------------------------------------------------------- */
/* Forms feedback                                                   */
/* ---------------------------------------------------------------- */
.ro-field-error {
    display: block;
    color: var(--ro-danger);
    font-size: var(--ro-fs-xs);
    margin: 4px 0 0 2px;
}
.ro-form-group { margin-bottom: 16px; }
.is-invalid { border-color: var(--ro-danger) !important; }

/* ---------------------------------------------------------------- */
/* Pagination row                                                   */
/* ---------------------------------------------------------------- */
.ro-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}
.ro-page-info { font-size: var(--ro-fs-sm); color: var(--ro-text-muted); }
.ro-pagination .pagination { margin: 0; flex-wrap: wrap; }

/* ---------------------------------------------------------------- */
/* Auth pages (login / register / forgot / reset)                   */
/* ---------------------------------------------------------------- */
.ro-auth-page {
    font-family: var(--ro-font);
    background: var(--ro-bg);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 24px 16px;
}
.ro-auth-box { width: 100%; max-width: 400px; }
.ro-auth-logo { text-align: center; margin-bottom: 20px; }
.ro-auth-logo a {
    color: var(--ro-text);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ro-auth-logo a:hover { color: var(--ro-text); text-decoration: none; }
.ro-auth-logo .ro-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ro-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.ro-auth-card {
    background: var(--ro-surface);
    border: 1px solid var(--ro-line);
    border-radius: 12px;
    box-shadow: var(--ro-shadow-sm);
    padding: 32px;
}
.ro-auth-card h1 {
    font-size: var(--ro-fs-lg);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 20px;
}
.ro-auth-card .btn-block { padding-top: .55rem; padding-bottom: .55rem; }
.ro-auth-links { margin-top: 20px; font-size: var(--ro-fs-sm); color: var(--ro-text-muted); }
.ro-auth-links p { margin-bottom: 6px; }

/* ---------------------------------------------------------------- */
/* Responsive: table → cards under 768px                            */
/* ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .ro-table-cards thead { display: none; }
    .ro-table-cards tbody tr {
        display: block;
        border: 1px solid var(--ro-line);
        border-radius: var(--ro-radius);
        margin-bottom: 12px;
        padding: 8px 12px;
        background: var(--ro-surface);
    }
    .ro-table-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        border: 0;
        padding: 6px 0;
        text-align: right;
    }
    .ro-table-cards tbody td::before {
        content: attr(data-label);
        font-size: var(--ro-fs-xs);
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--ro-text-muted);
        font-weight: 600;
        text-align: left;
    }
    .ro-table-cards tbody td[data-label=""]::before { content: none; }

    /* Locations list toolbar: search + sort go full width under the chips */
    .ro-list-controls { width: 100%; margin-left: 0; flex-wrap: wrap; }
    .ro-list-search { max-width: none; flex: 1 1 100%; }
    .ro-list-sort { flex: 1 1 100%; }
}

/* Motion is opt-out: honour prefers-reduced-motion everywhere */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------- */
/* Phase 5.1 additions (append-only: RBAC session edits above here) */
/* ---------------------------------------------------------------- */

/* Readable links inside soft alerts (was white-on-light via Bootstrap) */
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }
.alert a:hover { color: inherit; opacity: .8; }

/* Kill the browser-autofill yellow/blue fill on form fields */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--ro-surface) inset;
    box-shadow: 0 0 0 1000px var(--ro-surface) inset;
    -webkit-text-fill-color: var(--ro-text);
    caret-color: var(--ro-text);
    transition: background-color 9999s ease-out;
}

/* Segmented control (post type, post-now vs schedule) */
.ro-segment {
    display: inline-flex;
    border: 1px solid var(--ro-line);
    border-radius: var(--ro-radius-sm);
    background: var(--ro-bg);
    padding: 3px;
    gap: 2px;
}
.ro-segment-option { margin: 0; }
.ro-segment-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ro-segment-option span {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: var(--ro-fs-sm);
    font-weight: 500;
    color: var(--ro-text-muted);
    cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.ro-segment-option span:hover { color: var(--ro-text); }
.ro-segment-option input:checked + span {
    background: var(--ro-surface);
    color: var(--ro-primary);
    box-shadow: var(--ro-shadow-sm);
}
.ro-segment-option input:focus-visible + span {
    outline: 2px solid var(--ro-primary);
    outline-offset: 1px;
}

/* Card sub-section heading (e.g. "Reply automation" on Settings) */
.ro-subheading {
    font-size: var(--ro-fs-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ro-text-muted);
    font-weight: 600;
    border-top: 1px solid var(--ro-line);
    padding-top: 16px;
    margin: 20px 0 12px;
}

/* ---- Admin > Activity logs (appended) ---- */
.ro-log-params {
    display: block;
    max-width: 520px;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ro-text-muted, #6b7280);
    background: none;
    padding: 0;
}

/* Table action groups (e.g. Locations View/Delete): one line, right-sized */
.ro-table .ro-actions-cell { width: 1%; white-space: nowrap; }
.ro-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.ro-actions form { margin: 0; }
@media (max-width: 767.98px) {
    .ro-table-cards .ro-actions-cell { width: auto; }
    .ro-table-cards .ro-actions { margin-left: auto; }
}

/* Posts composer refinements */
/* Segmented control sized exactly like a .form-control when used as a field */
.ro-segment-field {
    display: flex;
    width: 100%;
    height: calc(1.5em + .75rem + 2px + 8px);
}
.ro-segment-field .ro-segment-option { flex: 1; display: flex; }
.ro-segment-field .ro-segment-option span {
    flex: 1;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}
.ro-segment-option input:disabled + span {
    opacity: .5;
    cursor: not-allowed;
}

/* Topic input + "Write it for me": flush group on desktop, stacked on phones */
@media (max-width: 575.98px) {
    .ro-topic-group { flex-wrap: wrap; }
    .ro-topic-group .form-control {
        width: 100%;
        border-radius: var(--ro-radius-sm) !important;
    }
    .ro-topic-group .input-group-append { width: 100%; margin-top: 8px; }
    .ro-topic-group .input-group-append .btn {
        width: 100%;
        border-radius: var(--ro-radius-sm) !important;
    }
}

/* Schedule fields revealed above the composer footer */
#schedule-fields {
    border-top: 1px solid var(--ro-line);
    margin-top: 8px;
    padding-top: 16px;
}

/* Counters never wrap */
.ro-char-count { white-space: nowrap; }

/* ---------------------------------------------------------------- */
/* Release 1: Settings tabs, notification settings, alert deep link  */
/* ---------------------------------------------------------------- */

/* Settings sub-navigation (Account | Notifications) */
.ro-tabs {
    display: flex;
    gap: 4px;
    box-shadow: inset 0 -1px 0 var(--ro-line);
    margin: -8px 0 20px;
    overflow-x: auto;
    overflow-y: hidden;
}
.ro-tabs a {
    padding: 10px 14px;
    border-bottom: 2px solid transparent;
    color: var(--ro-text-muted);
    font-weight: 500;
    white-space: nowrap;
}
.ro-tabs a:hover { color: var(--ro-text); text-decoration: none; }
.ro-tabs a.active { color: var(--ro-primary); border-bottom-color: var(--ro-primary); }

/* Label + help on the left, control on the right */
.ro-setting-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--ro-line);
}
.ro-setting-row:first-child { border-top: 0; padding-top: 0; }
.ro-setting-row .custom-switch { flex-shrink: 0; margin-top: 2px; }
.ro-setting-title {
    display: block;
    font-weight: 600;
    font-size: var(--ro-fs-sm);
    margin: 0 0 2px;
    color: var(--ro-text);
}
.ro-setting-help {
    margin: 2px 0 0;
    font-size: var(--ro-fs-xs);
    color: var(--ro-text-muted);
    line-height: 1.5;
}
.ro-setting-options {
    margin: -4px 0 14px;
    padding: 14px 16px;
    background: var(--ro-bg);
    border: 1px solid var(--ro-line);
    border-radius: var(--ro-radius-sm);
}
.ro-select-auto { width: auto; min-width: 200px; max-width: 100%; }
@media (max-width: 575.98px) {
    .ro-setting-row-stack { flex-direction: column; gap: 10px; }
    .ro-select-auto { width: 100%; }
}

/* Delivery status rows + small status pills */
.ro-status-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
}
.ro-status-row + .ro-status-row { border-top: 1px solid var(--ro-line); }
.ro-status-row > i {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--ro-radius-sm);
    background: var(--ro-primary-soft);
    color: var(--ro-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ro-status-row strong { margin-right: 6px; }
.ro-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--ro-radius-pill);
    background: var(--ro-bg);
    border: 1px solid var(--ro-line);
    color: var(--ro-text-muted);
    font-size: var(--ro-fs-xs);
    font-weight: 600;
    white-space: nowrap;
}
.ro-status-ok { background: var(--ro-success-soft); border-color: transparent; color: var(--ro-success); }
.ro-status-warn { background: #fff4e0; border-color: transparent; color: #8a5a00; }
.ro-status-bad { background: var(--ro-danger-soft); border-color: transparent; color: var(--ro-danger); }

/* Recent alerts list */
.ro-alert-list { list-style: none; margin: 0; padding: 0; }
.ro-alert-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 24px;
    border-top: 1px solid var(--ro-line);
}
.ro-alert-list li:first-child { border-top: 0; }
.ro-alert-list a { min-width: 0; color: var(--ro-text); }
.ro-alert-list a:hover { text-decoration: none; }
.ro-alert-list a:hover .ro-alert-title { color: var(--ro-primary); }
.ro-alert-title, .ro-alert-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ro-alert-title { font-weight: 600; }
.ro-alert-meta { font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }

/* Inbox banner for the alert-email "Reply now" deep link */
.ro-focus-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--ro-primary-soft);
    border-radius: var(--ro-radius-sm);
    color: var(--ro-text);
}
.ro-focus-banner i { color: var(--ro-primary); }
.ro-focus-banner a { margin-left: auto; font-weight: 600; }

/* ---------------------------------------------------------------- */
/* Release 2: Get reviews (link & QR, customers, campaigns, feedback) */
/* ---------------------------------------------------------------- */

/* Location switcher in the page header */
.ro-loc-switch { display: flex; gap: 8px; min-width: 0; max-width: 100%; }
.ro-loc-switch select { width: auto; min-width: 220px; max-width: 360px; }
@media (max-width: 575.98px) {
    .ro-loc-switch, .ro-loc-switch select { width: 100%; max-width: none; min-width: 0; }
}

/* Read-only value + copy/open buttons */
.ro-copy-field { display: flex; gap: 8px; margin-bottom: 8px; }
.ro-copy-field .form-control { flex: 1; min-width: 0; background: var(--ro-bg); font-size: var(--ro-fs-sm); }
.ro-copy-field .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 575.98px) {
    .ro-copy-field { flex-wrap: wrap; }
    .ro-copy-field .form-control { flex-basis: 100%; }
}

/* Segmented control made of links (server-rendered options) */
.ro-segment-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: var(--ro-fs-sm);
    font-weight: 500;
    color: var(--ro-text-muted);
    white-space: nowrap;
}
.ro-segment-link:hover { color: var(--ro-text); text-decoration: none; }
.ro-segment-link.active { background: var(--ro-surface); color: var(--ro-primary); box-shadow: var(--ro-shadow-sm); }
@media (max-width: 575.98px) {
    .ro-segment { display: flex; }
    .ro-segment-link { flex: 1; justify-content: center; padding: 6px 8px; }
}

/* QR preview + meta */
.ro-qr-block { display: flex; gap: 24px; align-items: flex-start; }
.ro-qr-preview {
    width: 200px;
    flex-shrink: 0;
    padding: 8px;
    border: 1px solid var(--ro-line);
    border-radius: var(--ro-radius);
    background: #fff;
}
.ro-qr-preview svg { display: block; width: 100%; height: auto; }
.ro-qr-meta { min-width: 0; flex: 1; }
.ro-qr-meta .ro-page-actions { margin: 12px 0 8px; }
.ro-qr-url {
    font-size: var(--ro-fs-xs);
    color: var(--ro-text-muted);
    overflow-wrap: anywhere;
    margin: 8px 0 0;
}
@media (max-width: 575.98px) {
    .ro-qr-block { flex-direction: column; align-items: center; text-align: center; }
    .ro-qr-meta .ro-page-actions { justify-content: center; }
}

/* Print template list */
.ro-template-list { list-style: none; margin: 0; padding: 0; }
.ro-template-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--ro-line);
}
.ro-template-list li:first-child { border-top: 0; }
.ro-template-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--ro-radius-sm);
    background: var(--ro-primary-soft);
    color: var(--ro-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ro-template-text { flex: 1; min-width: 0; }
.ro-template-text strong { display: block; }
.ro-template-text span { display: block; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
@media (max-width: 575.98px) {
    .ro-template-list li { padding: 12px 16px; }
}

/* Customers table + bulk bar */
.ro-check-col { width: 36px; }
.ro-row-muted td { color: var(--ro-text-muted); background: #fbfbfc; }
.ro-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ro-cust-search { min-width: 0; }
.ro-cust-search input { min-width: 220px; }
@media (max-width: 575.98px) {
    .ro-cust-search { width: 100%; margin-left: 0 !important; }
    .ro-cust-search input { width: 100%; min-width: 0; }
    .ro-table-cards .ro-check-col { width: auto; }
}
.ro-file-input { display: block; width: 100%; font-size: var(--ro-fs-sm); color: var(--ro-text-muted); }

/* Private feedback cards */
.ro-feedback-unread { border-left: 3px solid var(--ro-primary); }
.ro-feedback-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ro-primary-soft);
    color: var(--ro-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ro-feedback .ro-review-text { margin-left: 52px; }
@media (max-width: 575.98px) {
    .ro-feedback .ro-review-text { margin-left: 0; }
}

/* AdminLTE floats .card-title; our headers are flex/stacked */
.card .card-title { float: none; }
/* AdminLTE adds a clearfix ::after to .card-header; inside a flex header it
   becomes a phantom third flex item, so justify-content-between parks real
   content in the middle. Drop the pseudo-elements on flex headers. */
.card .card-header.d-flex::before,
.card .card-header.d-flex::after { content: none; display: none; }

/* Long unbreakables (emails, tokens) inside stacked table-cards */
@media (max-width: 767.98px) {
    .ro-table-cards tbody td { overflow-wrap: anywhere; }
    .ro-table-cards tbody td::before { flex-shrink: 0; }
}

/* Segmented controls with long labels (channel picker) wrap on phones */
@media (max-width: 575.98px) {
    .ro-segment { flex-wrap: wrap; }
    .ro-segment-option span, .ro-segment-link { white-space: normal; }
}

/* The field-sized segment grows when its labels wrap (channel picker on phones) */
@media (max-width: 575.98px) {
    .ro-segment-field { height: auto; }
    .ro-segment-field .ro-segment-option span { padding-top: 6px; padding-bottom: 6px; }
}

/* Bulk bar: a disabled action reads as inactive, whatever its variant */
.ro-bulkbar .btn:disabled {
    color: var(--ro-text-muted);
    border-color: var(--ro-line);
    background: transparent;
    opacity: 1;
}

/* Stacked table cards: multi-line values (email + phone) stack full-width */
@media (max-width: 767.98px) {
    .ro-table-cards tbody td { flex-wrap: wrap; }
    .ro-table-cards tbody td > .d-block { flex-basis: 100%; text-align: right; }
}
@media (max-width: 767.98px) {
    /* ...but a lone value stays on the label's own line */
    .ro-table-cards tbody td > .d-block:only-child { flex-basis: auto; margin-left: auto; }
}
@media (max-width: 767.98px) {
    /* Label pinned left, every value fragment clustered on the right */
    .ro-table-cards tbody td { justify-content: flex-end; gap: 8px; }
    .ro-table-cards tbody td::before { margin-right: auto; }
}

/* Feedback card action never breaks mid-label */
.ro-fb-toggle { white-space: nowrap; flex-shrink: 0; }

/* Review/feedback card heads: long names or emails wrap instead of
   stretching the page (flex children default to min-width:auto) */
.ro-review-head > div { min-width: 0; }
.ro-review-author, .ro-review-meta { overflow-wrap: anywhere; }

/* ==== Website widgets (list, builder, embed code) ==== */
.ro-back-link { display: inline-flex; align-items: center; margin-bottom: 6px; font-size: var(--ro-fs-sm); color: var(--ro-text-muted); text-decoration: none; }
.ro-back-link:hover, .ro-back-link:focus { color: var(--ro-primary); text-decoration: none; }

.ro-widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }
.ro-widget-grid > .card { margin: 0; }
.ro-widget-card-top { display: flex; align-items: flex-start; gap: 12px; }
.ro-widget-icon { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--ro-radius-sm); background: var(--ro-primary-soft); color: var(--ro-primary); }
.ro-widget-card.is-paused .ro-widget-icon { background: var(--ro-bg); color: var(--ro-text-muted); }
.ro-widget-card-title { flex: 1; min-width: 0; }
.ro-widget-card-title h2 { margin: 0 0 2px; font-size: var(--ro-fs-md); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ro-widget-card-title h2 a { color: var(--ro-text); }
.ro-widget-card-title .text-muted { display: block; font-size: var(--ro-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-widget-card .custom-switch { flex: none; }
.ro-widget-card .toggle-state { font-size: var(--ro-fs-sm); font-weight: 500; }
.ro-widget-stat { display: flex; align-items: baseline; gap: 6px; margin: 16px 0; font-size: var(--ro-fs-sm); }
.ro-widget-stat strong { font-size: var(--ro-fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ro-widget-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ro-widget-warning { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--ro-radius-sm); background: var(--ro-danger-soft); color: var(--ro-danger); font-size: var(--ro-fs-sm); }
.ro-widget-warning a { color: inherit; text-decoration: underline; }
.ro-widget-card-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 196px; border: 1.5px dashed var(--ro-line); background: transparent; box-shadow: none; color: var(--ro-text-muted); font-weight: 500; text-decoration: none; transition: border-color .15s, color .15s; }
.ro-widget-card-new span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ro-surface); border: 1px solid var(--ro-line); }
.ro-widget-card-new:hover, .ro-widget-card-new:focus { border-color: var(--ro-primary); color: var(--ro-primary); text-decoration: none; }

.ro-builder .card { margin-bottom: 16px; }
/* col-lg-5 / col-xl-4 next to the 240px sidebar leave the settings only
   ~230-330px between 992 and 1440px. Give them a fixed 340-460px column and
   let the live preview take the rest (below 992px the two stack). */
@media (min-width: 992px) {
    .ro-builder { flex-wrap: nowrap; }
    .ro-builder > .col-xl-4 { flex: 0 0 33.333%; min-width: 340px; max-width: 460px; }
    .ro-builder > .col-xl-8 { flex: 1 1 auto; max-width: none; min-width: 0; }
}
@media (min-width: 1200px) {
    .ro-builder > .col-xl-4 { min-width: 380px; }
}
/* The settings column is still narrow at every width, so
   rows holding a segmented control always put the label above it, and the
   control fills the row (equal options, wrapping only if it must). */
.ro-builder .ro-setting-row-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.ro-builder .ro-setting-row-stack .ro-segment { display: flex; flex-wrap: wrap; max-width: 100%; }
.ro-builder .ro-setting-row-stack .ro-segment-option { flex: 1 1 auto; display: flex; }
.ro-builder .ro-setting-row-stack .ro-segment-option span { flex: 1; justify-content: center; text-align: center; padding-left: 10px; padding-right: 10px; }
.ro-builder-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ro-surface); }

.ro-layout-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ro-layout-tile { position: relative; margin: 0; cursor: pointer; }
.ro-layout-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ro-layout-tile-body { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 10px 12px 12px; border: 1px solid var(--ro-line); border-radius: var(--ro-radius); background: var(--ro-surface); transition: border-color .15s, box-shadow .15s; }
.ro-layout-tile:hover .ro-layout-tile-body { border-color: #c5cede; }
.ro-layout-tile input:checked + .ro-layout-tile-body { border-color: var(--ro-primary); box-shadow: 0 0 0 3px var(--ro-primary-soft); }
.ro-layout-tile input:focus-visible + .ro-layout-tile-body { outline: 2px solid var(--ro-primary); outline-offset: 2px; }
.ro-layout-name { font-size: var(--ro-fs-sm); font-weight: 600; color: var(--ro-text); }
.ro-layout-desc { font-size: var(--ro-fs-xs); line-height: 1.4; color: var(--ro-text-muted); }
.ro-layout-art { position: relative; display: flex; gap: 4px; height: 46px; margin-bottom: 6px; padding: 6px; border-radius: 6px; background: var(--ro-bg); }
.ro-layout-art i { display: block; border: 1px solid var(--ro-line); border-radius: 3px; background: var(--ro-surface); }
.ro-layout-tile input:checked + .ro-layout-tile-body .ro-layout-art i { border-color: #b9cdf3; }
.ro-art-carousel i { flex: 1; }
.ro-art-carousel i:last-child { flex: .45; }
.ro-art-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ro-art-grid i:first-child { grid-row: span 2; }
.ro-art-list { flex-direction: column; gap: 3px; }
.ro-art-list i { flex: 1; }
.ro-art-badge { align-items: center; justify-content: center; }
.ro-art-badge i:not(:first-child), .ro-art-floating i:not(:first-child) { display: none; }
.ro-art-badge i:first-child { width: 72%; height: 18px; border-radius: 999px; }
.ro-art-floating i:first-child { position: absolute; right: 7px; bottom: 7px; width: 30px; height: 12px; border-radius: 999px; border: 0; background: var(--ro-primary); }

.ro-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ro-swatch { width: 28px; height: 28px; padding: 0; border: 2px solid var(--ro-surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--ro-line); cursor: pointer; }
.ro-swatch.is-active { box-shadow: 0 0 0 2px var(--ro-text); }
.ro-swatch:focus-visible { outline: 2px solid var(--ro-primary); outline-offset: 2px; }
.ro-color-input { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--ro-line); border-radius: var(--ro-radius-sm); background: var(--ro-surface); cursor: pointer; }

.ro-preview-sticky { position: sticky; top: 16px; }
.ro-preview-card { overflow: hidden; }
.ro-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ro-preview-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.ro-preview-stage { padding: 24px; background: #eef1f5; transition: background-color .2s; }
.ro-preview-stage.is-dark { background: #0c1017; }
/* transform makes this frame the containing block for the floating widget's
   fixed-position button, so it stays inside the preview. */
.ro-preview-frame { position: relative; max-width: 100%; min-height: 320px; margin: 0 auto; padding: 24px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); transform: translateZ(0); transition: max-width .25s ease; }
.ro-preview-stage.is-dark .ro-preview-frame { background: #161b24; color: #e8ecf2; }
.ro-preview-frame.is-mobile { max-width: 390px; padding: 16px; }
.ro-preview-stage.is-floating .ro-preview-frame { min-height: 760px; }
.ro-preview-site span { display: block; height: 10px; margin-bottom: 8px; border-radius: 4px; background: #e8ebf0; }
.ro-preview-site span:first-child { width: 42%; height: 14px; }
.ro-preview-site span:nth-child(2) { width: 85%; }
.ro-preview-site span:nth-child(3) { width: 64%; margin-bottom: 24px; }
.ro-preview-stage.is-dark .ro-preview-site span { background: #262d3a; }
.ro-preview-status { margin: 0; padding: 48px 0; text-align: center; color: var(--ro-text-muted); }
.ro-preview-note { margin: 0; padding: 10px 20px; border-top: 1px solid var(--ro-line); font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
@media (max-width: 991.98px) { .ro-preview-sticky { position: static; } }
@media (max-width: 575.98px) { .ro-preview-stage { padding: 12px; } .ro-preview-frame { padding: 14px; } }

#embed { scroll-margin-top: 16px; }
.ro-code { margin: 0 0 10px; padding: 14px 16px; border-radius: var(--ro-radius-sm); background: #0f172a; color: #e2e8f0; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.ro-platforms details { margin-bottom: 8px; padding: 10px 14px; border: 1px solid var(--ro-line); border-radius: var(--ro-radius-sm); background: var(--ro-surface); }
.ro-platforms summary { display: flex; align-items: center; gap: 8px; font-size: var(--ro-fs-sm); font-weight: 500; cursor: pointer; list-style: none; }
.ro-platforms summary::-webkit-details-marker { display: none; }
.ro-platforms summary i { width: 18px; text-align: center; color: var(--ro-text-muted); }
.ro-platforms summary::after { content: '+'; margin-left: auto; color: var(--ro-text-muted); font-size: 18px; line-height: 1; }
.ro-platforms details[open] summary::after { content: '\2212'; }
.ro-platforms details p { margin: 8px 0 0 26px; font-size: var(--ro-fs-sm); color: var(--ro-text-muted); }
.ro-embed-locked { display: flex; align-items: center; gap: 16px; }
.ro-embed-locked > i { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ro-bg); color: var(--ro-text-muted); font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .ro-preview-frame, .ro-preview-stage, .ro-layout-tile-body { transition: none; } }

/* Widget builder: layout choices as a full-width list (picture left, text
   right) so five options never leave an orphan tile in a narrow column. */
.ro-layout-tiles { grid-template-columns: 1fr; gap: 8px; }
.ro-layout-tile-body { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 1px; align-items: center; padding: 10px 12px; }
.ro-layout-art { grid-row: 1 / span 2; height: 46px; margin: 0; }
.ro-layout-name { align-self: end; }
.ro-layout-desc { align-self: start; }

/* Widget builder on phones: floating jump-to-preview button. */
.ro-preview-jump { display: none; }
#preview-anchor { scroll-margin-top: 72px; }
@media (max-width: 991.98px) {
    .ro-preview-jump { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1030; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--ro-text); color: #fff; font-size: var(--ro-fs-sm); font-weight: 600; text-decoration: none; box-shadow: var(--ro-shadow-md); transform: translateX(-50%); transition: opacity .2s, transform .2s; }
    .ro-preview-jump:hover, .ro-preview-jump:focus { color: #fff; text-decoration: none; }
    .ro-preview-jump.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
}
@media (prefers-reduced-motion: reduce) { .ro-preview-jump { transition: none; } }
@media (max-width: 575.98px) { .ro-widget-card-new { min-height: 120px; } }

/* ==== Get reviews > Ask for reviews (one-step ask flow) ==== */
.ro-status-info { background: var(--ro-primary-soft); border-color: transparent; color: var(--ro-primary); }

.ro-howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.ro-howto li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--ro-line); border-radius: var(--ro-radius); background: var(--ro-surface); }
.ro-howto-num { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ro-primary-soft); color: var(--ro-primary); font-size: var(--ro-fs-sm); font-weight: 700; }
.ro-howto strong { display: block; font-size: var(--ro-fs-sm); font-weight: 600; line-height: 1.35; color: var(--ro-text); }
.ro-howto span:not(.ro-howto-num) { display: block; margin-top: 2px; font-size: var(--ro-fs-xs); line-height: 1.45; color: var(--ro-text-muted); }
@media (max-width: 767.98px) { .ro-howto { grid-template-columns: 1fr; gap: 8px; } .ro-howto li { padding: 10px 14px; } }

.ro-test-banner { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--ro-radius-sm); background: #fff4e0; color: #6b4600; font-size: var(--ro-fs-sm); }
.ro-test-banner i { margin-top: 3px; }

.ro-ask-card .card-body { padding-bottom: 20px; }
.ro-field-label { display: block; margin-bottom: 6px; font-size: var(--ro-fs-sm); font-weight: 600; color: var(--ro-text); }
.ro-divider { margin: 20px 0 18px; border: 0; border-top: 1px solid var(--ro-line); }
.ro-ask-fields .ro-segment-field { display: flex; width: 100%; }
.ro-ask-fields .ro-segment-field .ro-segment-option { flex: 1 1 0; min-width: 0; }
.ro-ask-fields .ro-segment-field .ro-segment-option span { width: 100%; justify-content: center; padding-left: 8px; padding-right: 8px; }
.ro-ask-fields .ro-segment-option input:disabled + span { opacity: .45; cursor: not-allowed; }

.ro-msg-preview { padding: 14px 16px; border: 1px solid var(--ro-line); border-radius: var(--ro-radius); background: var(--ro-bg); font-size: var(--ro-fs-sm); line-height: 1.55; color: var(--ro-text); overflow-wrap: anywhere; }
.ro-msg-preview.is-chat { position: relative; border: 0; border-radius: 4px 14px 14px 14px; background: #e7f6ea; }
.ro-msg-meta { margin: -2px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ro-line); font-weight: 600; }
.ro-msg-body mark { padding: 0 2px; border-radius: 3px; background: #fff1b8; color: inherit; }
.ro-msg-link { color: var(--ro-primary); text-decoration: underline; word-break: break-all; }
.ro-msg-editor { margin-top: 8px; padding: 14px; border: 1px dashed var(--ro-line); border-radius: var(--ro-radius-sm); }

.ro-ask-footer { display: flex; flex-direction: column; gap: 4px; background: var(--ro-surface); }
.ro-ask-footer .btn-link { font-size: var(--ro-fs-sm); }

.ro-import-card > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; border-bottom: 0; }
.ro-import-card > summary::-webkit-details-marker { display: none; }
.ro-import-card > summary .card-title { margin: 0; font-size: var(--ro-fs-md); }
.ro-import-card > summary i { color: var(--ro-text-muted); transition: transform .2s; }
.ro-import-card[open] > summary { border-bottom: 1px solid var(--ro-line); }
.ro-import-card[open] > summary i { transform: rotate(180deg); }

.ro-cust-contact { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font-size: var(--ro-fs-sm); color: var(--ro-text-muted); overflow-wrap: anywhere; }
.ro-cust-contact i { width: 14px; font-size: 12px; opacity: .7; }
.ro-cust-detail { display: block; margin-top: 4px; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-cust-table td { vertical-align: middle; }
.ro-cust-table .btn { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ro-import-card > summary i { transition: none; } }

/* --- Team (account RBAC): members list, invite form, scope picker ------- */
.ro-footer-note { font-size: var(--ro-fs-sm); }
.ro-team-list { margin: 0; padding: 0; list-style: none; }
.ro-team-member { padding: 14px 0; border-top: 1px solid var(--ro-line); }
.ro-team-member:first-child { border-top: 0; padding-top: 0; }
.ro-team-member:last-child { padding-bottom: 0; }
.ro-team-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ro-team-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 240px; }
.ro-team-who .d-block { overflow-wrap: anywhere; }
.ro-team-who .text-muted { font-size: var(--ro-fs-sm); }
.ro-team-meta { display: flex; align-items: center; gap: 10px; font-size: var(--ro-fs-sm); }
.ro-team-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ro-role-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--ro-fs-xs); font-weight: 700; letter-spacing: .02em; }
.ro-role-owner { background: var(--ro-primary-soft); color: var(--ro-primary); }
.ro-role-manager { background: #e3f2ea; color: #0f7b4d; }
.ro-role-responder { background: #fdf1d7; color: #9a6700; }
.ro-role-viewer { background: #eceff2; color: #5b6572; }
.ro-team-edit { margin-top: 10px; }
.ro-team-edit > summary { display: inline-block; cursor: pointer; font-size: var(--ro-fs-sm); color: var(--ro-primary); list-style: none; }
.ro-team-edit > summary::-webkit-details-marker { display: none; }
.ro-team-edit[open] { padding: 12px 14px; border: 1px dashed var(--ro-line); border-radius: var(--ro-radius-sm); }
.ro-scope { margin: 8px 0 0; }
.ro-scope-legend { margin-bottom: 6px; font-size: var(--ro-fs-sm); font-weight: 600; color: var(--ro-text); }
.ro-scope-list { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--ro-line); border-radius: var(--ro-radius-sm); background: var(--ro-bg); max-height: 260px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; }
.ro-scope-list .custom-control-label .text-muted { font-size: var(--ro-fs-xs); }
@supports selector(:has(*)) {
    .ro-scope-list { display: none; }
    .ro-scope:has(input[value="selected"]:checked) .ro-scope-list { display: grid; }
}
.ro-copy-row { display: flex; gap: 8px; }
.ro-copy-row input { font-size: var(--ro-fs-sm); }
.ro-invite-link-card { border-left: 3px solid var(--ro-primary); }
.ro-sidebar-role { display: block; margin: -2px 14px 8px; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }

/* Super admin managing another account (sidebar banner, see layout/sidebar.php) */
.ro-acting { margin: 0 12px 8px; padding: 10px 12px; border: 1px solid #f1d9b5; border-radius: var(--ro-radius-sm); background: var(--ro-warning-soft); }
.ro-acting-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ro-text-muted); }
.ro-acting-name { display: block; margin: 2px 0 8px; font-weight: 600; color: var(--ro-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Customer connect links (Settings) + public connect pages ----------- */
.ro-conn-list { margin: 0 0 10px; padding: 0; list-style: none; }
.ro-conn-list li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; overflow-wrap: anywhere; }
.ro-conn-list li i { margin-top: 3px; }
.ro-conn-list .ro-conn-who { flex: 1 1 auto; min-width: 0; }
.ro-conn-requests { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ro-line); }
.ro-conn-requests li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--ro-line); }
.ro-conn-requests li:last-child { border-bottom: 0; }
.ro-conn-req-who { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.ro-conn-req-who .text-muted { font-size: var(--ro-fs-xs); }
.ro-conn-requests form { margin-left: auto; }
/* Public connect pages (/connect/<token>): the customer-facing consent
   card. Same auth-page shell as login/register, slightly wider, with a
   "requested by" strip and icon rows instead of bullet checklists. */
.ro-connect-box { max-width: 520px; }
.ro-connect-box .ro-auth-card { padding: 28px 32px 26px; }
.ro-connect-box h1 { margin-bottom: 8px; }
.ro-connect-from {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -4px 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ro-line);
}
.ro-connect-from-name { display: block; font-weight: 600; color: var(--ro-text); line-height: 1.3; overflow-wrap: anywhere; }
.ro-connect-from-sub { display: block; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-connect-lede { font-size: var(--ro-fs-sm); color: var(--ro-text-muted); line-height: 1.55; margin: 0 0 18px; }
.ro-connect-lede strong { color: var(--ro-text); }
.ro-connect-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: var(--ro-radius-sm);
    background: var(--ro-warning-soft);
    color: var(--ro-warning);
    font-size: var(--ro-fs-sm);
}
.ro-connect-notice i { margin-top: 3px; flex: none; }
.ro-connect-points { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 12px; }
.ro-connect-points li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--ro-fs-sm); line-height: 1.5; color: var(--ro-text-muted); }
.ro-connect-points strong { display: block; color: var(--ro-text); font-weight: 600; }
.ro-connect-icon {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ro-primary-soft);
    color: var(--ro-primary);
    font-size: 14px;
    margin-top: 2px;
}
.ro-connect-fineprint { margin: 14px 0 0; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); line-height: 1.5; }
.ro-connect-done-icon { font-size: 44px; color: var(--ro-success); margin-bottom: 10px; }
.ro-connect-invalid-icon { font-size: 40px; color: var(--ro-text-muted); margin-bottom: 10px; }

/* Settings > Your data */
.ro-subtitle { font-size: 15px; font-weight: 600; margin: 0 0 8px; }

/* Reviews > Approvals + review card approval states */
.ro-approval-form { margin-top: 12px; }
.ro-approval-label { display: block; font-weight: 600; font-size: var(--ro-fs-sm); margin-bottom: 6px; }
.ro-approval-label .text-muted { font-weight: 400; }
.ro-approval-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.ro-approval-actions .form-control { flex: 1 1 220px; min-width: 0; }
.ro-approval-state { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: var(--ro-fs-sm); }
.ro-approval-state p { margin: 4px 0 0; white-space: pre-line; }
.ro-approval-pending { background: var(--ro-warning-soft, #fff8ec); border-left: 3px solid var(--ro-warning, #f5a623); }
.ro-approval-rejected { background: #fdf2f2; border-left: 3px solid #d64545; }
@media (max-width: 575.98px) { .ro-approval-actions .btn { flex: 1 1 auto; } }
.ro-kpi-sub { font-size: 12px; color: var(--ro-text-muted); margin-top: 2px; }
.ro-template-select { width: auto; max-width: 220px; }
@media (max-width: 575.98px) { .ro-template-select { max-width: 100%; flex: 1 1 100%; } }
.ro-template-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--ro-line); }
.ro-template-item:first-of-type { border-top: 0; padding-top: 0; }
details.ro-template-item { display: block; }
details.ro-template-item summary { cursor: pointer; list-style: none; }
details.ro-template-item summary::-webkit-details-marker { display: none; }
.ro-template-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Insights */
.ro-delta { font-weight: 600; }
.ro-delta-up { color: var(--ro-success, #1f9d55); }
.ro-delta-down { color: #d64545; }
.ro-keywords { margin: 0 0 10px; padding-left: 20px; }
.ro-keywords li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--ro-line); }
.ro-keywords li span:first-child { overflow-wrap: anywhere; }
.ro-topics { list-style: none; margin: 0 0 10px; padding: 0; }
.ro-topics li { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; gap: 12px; align-items: center; padding: 6px 0; }
.ro-topic-bar { display: flex; height: 10px; border-radius: 5px; background: var(--ro-line); overflow: hidden; }
.ro-topic-bar .pos { background: #1f9d55; }
.ro-topic-bar .neg { background: #d64545; margin-left: auto; }
.ro-topic-num { font-size: var(--ro-fs-sm); white-space: nowrap; }
@media (max-width: 575.98px) { .ro-topics li { grid-template-columns: 1fr auto; } .ro-topic-bar { grid-column: 1 / -1; order: 3; } }

/* AI review summary (Insights, Dashboard) */
.ro-ai-headline { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.ro-ai-list { padding-left: 18px; margin-bottom: 12px; }
.ro-ai-list li { margin-bottom: 4px; }
.ro-ai-suggestion { background: var(--ro-primary-soft, #eef4ff); border-left: 3px solid var(--ro-primary); padding: 10px 12px; border-radius: 6px; }
.ro-ai-public { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ro-line); }

/* ---- AI included meter (Settings › AI, Admin › Users, Posts) ---- */
.ro-ai-plan {
    background: var(--ro-primary-soft);
    border: 1px solid var(--ro-line);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.ro-ai-plan-own { background: var(--ro-success-soft); }
.ro-progress {
    display: block;
    height: 8px;
    background: var(--ro-line);
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0 6px;
}
.ro-progress > span {
    display: block;
    height: 100%;
    background: var(--ro-primary);
    border-radius: inherit;
    transition: width .3s ease;
}
.ro-progress-over > span { background: var(--ro-danger); }
.ro-progress-sm { height: 5px; margin: 4px 0 0; max-width: 120px; }
.ro-ai-cell { white-space: nowrap; }
.ro-ai-cell .user-ai-edit { vertical-align: baseline; line-height: 1; }
.ro-ai-meter { white-space: nowrap; }
.ro-advanced { border-top: 1px solid var(--ro-line); padding-top: 12px; }
.ro-advanced summary { cursor: pointer; font-weight: 600; list-style: none; }
.ro-advanced summary::-webkit-details-marker { display: none; }
.ro-advanced summary::before {
    content: "\25B8";
    display: inline-block;
    width: 1em;
    color: var(--ro-text-muted);
    transition: transform .15s ease;
}
.ro-advanced[open] summary::before { transform: rotate(90deg); }
.ro-advanced[open] summary { margin-bottom: 8px; }
.ro-advanced summary:focus-visible { outline: 2px solid var(--ro-primary); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- */
/* 2026-10-22 polish pass: shell accessibility + small-screen fit    */
/* ---------------------------------------------------------------- */

/* Keyboard users jump straight past the sidebar (visible on focus only) */
.ro-skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: var(--ro-radius-sm);
    background: var(--ro-primary);
    color: #fff;
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform .15s ease;
}
.ro-skip-link:focus { transform: none; outline: none; color: #fff; text-decoration: none; }
.ro-main:focus { outline: none; }

/* Section tabs on phones: scroll sideways without a visible scrollbar
   track, with a soft fade hinting there is more to the right. */
.ro-tabs { scrollbar-width: none; -ms-overflow-style: none; }
.ro-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 575.98px) {
    .ro-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
    .ro-tabs a { padding: 10px 12px; }
}

/* Page-header buttons share the row on phones instead of ragged wrapping */
@media (max-width: 575.98px) {
    .ro-page-header { gap: 12px; }
    .ro-page-actions { width: 100%; }
    .ro-page-actions > .btn,
    .ro-page-actions > form,
    .ro-page-actions > form > .btn { flex: 1 1 auto; }
    .ro-page-actions > .btn { justify-content: center; }
}

/* Consistent keyboard focus ring on links/controls that are not buttons */
a:focus-visible, .ro-nav a:focus-visible, .ro-tabs a:focus-visible, .ro-chip:focus-visible {
    outline: 2px solid var(--ro-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.ro-nav a:focus-visible, .ro-chip:focus-visible { outline-offset: 0; }

/* ---------------------------------------------------------------- */
/* 2026-10-22 polish pass (2): Bootstrap leftovers mapped onto the   */
/* design tokens, AA contrast, modals, phone fit                     */
/* ---------------------------------------------------------------- */

/* Text-on-tint pairs: the brand blue on its soft tint is 4.0:1, so active
   nav / badges / role pills use the darker text blue (>= 4.5:1). */
:root { --ro-primary-text: #0a58ca; --ro-danger-text: #b3202f; }
.ro-nav a.active { color: var(--ro-primary-text); }
.ro-chip .badge { color: var(--ro-primary-text); }
.ro-status-info, .ro-role-owner { color: var(--ro-primary-text); }
.ro-badge-danger, .ro-status-bad { color: var(--ro-danger-text); }

/* Bootstrap/AdminLTE utilities still carry their stock palette; map them */
.text-muted { color: var(--ro-text-muted) !important; }
.text-success { color: var(--ro-success) !important; }
.text-danger { color: var(--ro-danger) !important; }
.text-warning { color: var(--ro-warning) !important; }
.btn-link { color: var(--ro-primary-text); }
.btn-link:hover, .btn-link:focus { color: var(--ro-primary-active); }
.btn-danger { background-color: var(--ro-danger); border-color: var(--ro-danger); }
.btn-danger:hover, .btn-danger:focus { background-color: var(--ro-danger-text); border-color: var(--ro-danger-text); }
.btn-outline-danger { color: var(--ro-danger-text); border-color: #f1b8bf; }
.btn-outline-danger:hover, .btn-outline-danger:focus { background-color: var(--ro-danger); border-color: var(--ro-danger); color: #fff; }
.alert-warning { background: var(--ro-warning-soft); border-color: #f5d9a8; color: #7a3e06; }
.badge-success { background: var(--ro-success-soft); color: var(--ro-success); }
.badge-info { background: var(--ro-primary-soft); color: var(--ro-primary-text); }
.badge-warning { background: var(--ro-warning-soft); color: var(--ro-warning); }
.badge-danger { background: var(--ro-danger-soft); color: var(--ro-danger-text); }
.badge-secondary { background: #eef1f5; color: var(--ro-text-muted); }
.badge-light { background: var(--ro-bg); color: var(--ro-text-muted); border: 1px solid var(--ro-line); }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ro-primary);
    border-color: var(--ro-primary);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .2); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--ro-primary); }
.custom-select, select.form-control {
    border-color: var(--ro-line);
    border-radius: var(--ro-radius-sm);
    color: var(--ro-text);
}
.custom-select:focus { border-color: var(--ro-primary); box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12); }
hr { border-top-color: var(--ro-line); }

/* Dialogs on the same surface language as cards */
.modal-content { border: 1px solid var(--ro-line); border-radius: var(--ro-radius); box-shadow: var(--ro-shadow-md); }
.modal-header { border-bottom: 1px solid var(--ro-line); padding: 16px 24px; }
.modal-header .modal-title { font-size: var(--ro-fs-md); font-weight: 600; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--ro-line); padding: 16px 24px; }
.modal-backdrop.show { opacity: .4; }

/* Keyboard focus on the shell's own buttons (not covered by .btn) */
.ro-user-btn:focus-visible, .ro-menu-btn:focus-visible, .ro-kpi-action:focus-visible, .ro-lightbox-btn:focus-visible {
    outline: 2px solid var(--ro-primary);
    outline-offset: 2px;
}
/* .ro-tabs clips vertically; keep the focus ring inside the tab */
.ro-tabs a:focus-visible { outline-offset: -2px; }

/* Closed mobile drawer leaves the tab order (it was only translated away) */
@media (max-width: 991.98px) {
    .ro-sidebar { visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
    body.ro-sidebar-open .ro-sidebar { visibility: visible; transition: transform .2s ease; }
}

/* Phones: cards keep more text width, grids never overflow, inputs don't
   trigger the iOS focus-zoom (which needs 16px). */
@media (max-width: 575.98px) {
    .card .card-header, .card .card-footer { padding: 14px 16px; }
    .card .card-body { padding: 16px; }
    .ro-widget-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
    .ro-scope-list { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
}
@media (max-width: 767.98px) and (pointer: coarse) {
    .form-control, .custom-select, .ro-reply-form textarea, .ro-copy-field .form-control, .ro-copy-row input { font-size: 16px; }
}

/* Sign-up consent line */
.ro-auth-consent { font-size: var(--ro-fs-xs); color: var(--ro-text-muted); margin: 0 0 12px; line-height: 1.5; }

/* Locations table: keep the name/address column readable on tablets; the
   wrapper scrolls sideways instead of crushing it to a few characters. */
#loc-table .ro-loc-cell { min-width: 220px; }

/* ---------------------------------------------------------------- */
/* Insights redesign: two numbered sections, equal-height cards,     */
/* trend pills, keyword bars, AI summary columns                     */
/* ---------------------------------------------------------------- */
.ro-section { margin-bottom: 36px; }
.ro-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 16px;
}
.ro-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--ro-fs-lg);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}
.ro-section-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ro-primary-soft);
    color: var(--ro-primary-text);
    font-size: var(--ro-fs-sm);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.ro-section-sub { margin: 4px 0 0 36px; font-size: var(--ro-fs-sm); color: var(--ro-text-muted); max-width: 720px; }

/* Rows whose cards should share a height */
.ro-row-stretch { align-items: stretch; }
.ro-row-stretch > [class*="col-"] { margin-bottom: 24px; }
.ro-row-stretch > [class*="col-"] > .card { margin-bottom: 0; }
.ro-card-fill { width: 100%; display: flex; flex-direction: column; }
.ro-card-fill > .card-body { flex: 1 1 auto; }
.ro-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.ro-card-head .card-title { display: flex; align-items: center; gap: 6px; }
.ro-card-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Period picker as a segmented control made of links */
.ro-segment-links a.ro-segment-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: var(--ro-fs-sm);
    font-weight: 500;
    color: var(--ro-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s, box-shadow .15s;
}
.ro-segment-links a.ro-segment-link:hover { color: var(--ro-text); }
.ro-segment-links a.ro-segment-link.active { background: var(--ro-surface); color: var(--ro-primary-text); box-shadow: var(--ro-shadow-sm); }

/* KPI tiles with an icon and a trend pill */
.ro-kpis-insights .ro-kpi { position: relative; padding: 18px 18px 16px; }
.ro-kpi-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ro-primary-soft);
    color: var(--ro-primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.ro-kpis-insights .ro-kpi-value { font-size: 1.75rem; }
.ro-kpis-insights .ro-kpi-sub { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ro-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--ro-radius-pill);
    font-size: var(--ro-fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}
.ro-trend i { font-size: 10px; }
.ro-trend-up { background: var(--ro-success-soft); color: var(--ro-success); }
.ro-trend-down { background: var(--ro-danger-soft); color: var(--ro-danger-text); }
.ro-trend-flat { background: #eef1f5; color: var(--ro-text-muted); }
.ro-trend-none { background: none; padding: 0; font-weight: 400; color: var(--ro-text-muted); }
.ro-trend-vs { font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-kpi-split { margin-top: 6px; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }

/* Chart fills its card */
.ro-chart-body { display: flex; flex-direction: column; }
.ro-chart-wrap { position: relative; flex: 1 1 auto; min-height: 280px; }
.ro-chart-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* Top searches: term, count and a relative bar */
.ro-keywords { list-style: none; margin: 0 0 8px; padding: 0; }
.ro-keywords li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--ro-line);
}
.ro-keywords li:last-child { border-bottom: 0; }
.ro-keywords li[hidden] { display: none; }
.ro-kw-term { overflow-wrap: anywhere; }
.ro-kw-num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; }
.ro-kw-th { font-weight: 500; color: var(--ro-text-muted); }
.ro-kw-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--ro-bg); overflow: hidden; }
.ro-kw-bar span { display: block; height: 100%; background: var(--ro-primary); border-radius: 2px; opacity: .7; }

/* Compact empty state inside a card */
.ro-empty-compact { padding: 28px 16px; }
.ro-empty-compact .ro-empty-icon { font-size: 28px; margin-bottom: 8px; }
.ro-empty-compact h4 { font-size: var(--ro-fs-md); font-weight: 600; color: var(--ro-text); margin-bottom: 4px; }
.ro-empty-compact p { max-width: 380px; margin: 0 auto 12px; font-size: var(--ro-fs-sm); }

/* AI summary: headline, two tinted columns, source line */
.ro-ai-summary .ro-ai-headline { font-size: 1.125rem; line-height: 1.4; margin-bottom: 8px; }
.ro-ai-overview { color: var(--ro-text); margin-bottom: 16px; }
.ro-ai-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.ro-ai-col { border-radius: var(--ro-radius-sm); padding: 14px 16px; }
.ro-ai-col-pos { background: var(--ro-success-soft); }
.ro-ai-col-neg { background: var(--ro-danger-soft); }
.ro-ai-col-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ro-fs-sm);
    font-weight: 600;
    margin: 0 0 8px;
}
.ro-ai-col-pos .ro-ai-col-title { color: var(--ro-success); }
.ro-ai-col-neg .ro-ai-col-title { color: var(--ro-danger-text); }
.ro-ai-col .ro-ai-list { margin-bottom: 0; }
.ro-ai-col .ro-ai-list li { margin-bottom: 6px; }
.ro-ai-col .ro-ai-list li:last-child { margin-bottom: 0; }
.ro-ai-none { color: var(--ro-text-muted); font-size: var(--ro-fs-sm); }
.ro-ai-meta { font-size: var(--ro-fs-xs); color: var(--ro-text-muted); line-height: 1.5; }

@media (max-width: 575.98px) {
    .ro-section-sub { margin-left: 0; }
    .ro-segment-links { width: 100%; overflow-x: auto; }
    .ro-kpis-insights .ro-kpi-value { font-size: 1.5rem; }
    .ro-chart-wrap { min-height: 220px; }
}

/* Insights follow-ups: the period picker reads as a control on the page
   background, and a lone empty state centres inside an equal-height card. */
.ro-segment-links { background: var(--ro-surface); border-color: var(--ro-line); }
.ro-segment-links a.ro-segment-link.active { background: var(--ro-primary-soft); box-shadow: none; }
.ro-card-fill > .card-body { display: flex; flex-direction: column; }
.ro-card-fill > .card-body > .ro-empty-compact:only-child { margin: auto; }
.ro-card-fill > .card-body > :not(.ro-empty-compact) { flex: none; }

/* Insights, brand-only palette: no green/red surfaces, no purple/orange.
   Blue and the neutral greys carry the page; up/down keep only a small
   coloured arrow+number so the meaning survives without a tinted pill. */
.ro-ai-col, .ro-ai-col-pos, .ro-ai-col-neg { background: var(--ro-bg); border: 1px solid var(--ro-line); }
.ro-ai-col-pos .ro-ai-col-title { color: var(--ro-primary-text); }
.ro-ai-col-neg .ro-ai-col-title { color: var(--ro-text); }
.ro-ai-col-neg .ro-ai-col-title i { color: var(--ro-text-muted); }
.ro-ai-none { color: var(--ro-text-muted); }
.ro-ai-none i { color: var(--ro-primary-text); }
.ro-ai-suggestion { background: var(--ro-primary-soft); }

.ro-trend, .ro-trend-up, .ro-trend-down, .ro-trend-flat { background: none; padding: 0; }
.ro-trend-up { color: var(--ro-success); }
.ro-trend-down { color: var(--ro-danger-text); }
.ro-trend-flat { color: var(--ro-text-muted); }

.ro-topic-bar { background: var(--ro-bg); border: 1px solid var(--ro-line); }
.ro-topic-bar .pos { background: var(--ro-primary); }
.ro-topic-bar .neg { background: #c9d2de; }

/* Natural card heights: a long "Show all" list must not stretch the chart */
.ro-chart-wrap { height: 320px; min-height: 0; }
.ro-ai-summary.ro-card-fill, .ro-card-fill { display: block; }
.ro-card-fill > .card-body { display: block; }
.ro-empty-compact { padding: 24px 16px; }

/* Topics list v2: name + count on one line, a full-width track below with
   the topic's share of mentions (blue = praise, grey = complaints). */
.ro-topics-v2 li { display: block; padding: 8px 0; border-bottom: 1px solid var(--ro-line); }
.ro-topics-v2 li:last-child { border-bottom: 0; }
.ro-topic-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.ro-topics-v2 .ro-topic-name { font-weight: 500; overflow-wrap: anywhere; }
.ro-topics-v2 .ro-topic-num { font-size: var(--ro-fs-xs); color: var(--ro-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ro-topic-track { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--ro-bg); }
.ro-topics-v2 .ro-topic-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #c9d2de; border: 0; }
.ro-topics-v2 .ro-topic-bar .pos { background: var(--ro-primary); }
.ro-topics-v2 .ro-topic-bar .neg { background: #c9d2de; }

/* Insights pixel pass: one 16px rhythm for tiles, cards and rows; the
   period picker shares the row with the section title; summary bullets
   are small brand dots; legend/tile details line up. */
.ro-row-tight { margin-left: -8px; margin-right: -8px; }
.ro-row-tight > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
.ro-row-tight .card { margin-bottom: 16px; }
.ro-section > .row:last-child > [class*="col-"] > .card:last-child { margin-bottom: 0; }
.ro-section-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.ro-section-head > .ro-segment { flex: none; margin-bottom: 2px; }
.ro-section-head { align-items: flex-end; margin-bottom: 16px; }
.ro-section + .ro-section { margin-top: 40px; }
.ro-section { margin-bottom: 0; }
.ro-section .ro-kpis { margin-bottom: 16px; }

.ro-kpis-insights .ro-kpi { min-height: 112px; display: flex; flex-direction: column; }
.ro-kpis-insights .ro-kpi-value { padding-right: 44px; }
.ro-kpis-insights .ro-kpi-label { margin-top: 2px; }
.ro-kpis-insights .ro-kpi-sub, .ro-kpis-insights .ro-kpi-split { margin-top: auto; padding-top: 10px; }
.ro-kpis-insights .ro-kpi-sub + .ro-kpi-split { margin-top: 4px; padding-top: 0; }

.ro-ai-col .ro-ai-list { list-style: none; padding-left: 0; }
.ro-ai-col .ro-ai-list li { position: relative; padding-left: 16px; line-height: 1.5; }
.ro-ai-col .ro-ai-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ro-primary);
}
.ro-ai-col-neg .ro-ai-list li::before { background: #c9d2de; }
.ro-ai-col { padding: 14px 16px 12px; }
.ro-ai-summary .card-body > .ro-ai-meta { margin-top: 12px; }
.ro-ai-summary .ro-ai-suggestion { margin: 0 0 4px; }

.ro-card-head .card-title i { font-size: 14px; }
.ro-chart-wrap { height: 300px; }
.ro-keywords li { padding: 8px 0; }

/* AdminLTE adds a clearfix ::after to every .card-header; in a flex header
   it becomes a third (empty) flex item, so space-between parks the right-
   hand control in the middle instead of at the edge. Drop it. */
.card-header.d-flex::after, .ro-card-head::after { content: none; display: none; }

/* Review card: "Hide from widgets" control (migration 026). Brand blue and
   greys only; the hidden state is a grey pill, the review stays readable. */
.ro-review-head > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.ro-review-tools { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; margin-left: auto; flex: none; }
.ro-widget-hidden-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--ro-radius-pill);
    background: #eef1f5;
    color: var(--ro-text-muted);
    font-size: var(--ro-fs-xs);
    font-weight: 600;
    white-space: nowrap;
}
.ro-widget-hidden-pill[hidden] { display: none; }
.ro-widget-vis-btn, .ro-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 0;
    border-radius: var(--ro-radius-sm);
    background: none;
    color: var(--ro-text-muted);
    font: inherit;
    font-size: var(--ro-fs-xs);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.ro-widget-vis-btn:hover, .ro-widget-vis-btn:focus-visible, .ro-tool-btn:hover, .ro-tool-btn:focus-visible { background: var(--ro-primary-soft); color: var(--ro-primary-text); outline: none; }
.ro-widget-vis-btn:disabled { opacity: .6; cursor: default; }
.ro-review.is-widget-hidden { background: #fbfcfd; }
@media (max-width: 575.98px) {
    .ro-review-head { flex-wrap: wrap; }
    .ro-review-tools { width: 100%; justify-content: flex-start; margin-left: 0; padding-left: 52px; }
    .ro-widget-vis-btn { padding-left: 0; }
}

/* Get reviews › Automatic (migration 027) */
.ro-auto-app { display: flex; align-items: center; gap: 8px; font-size: var(--ro-fs-sm); font-weight: 600; margin: 0 0 10px; }
.ro-auto-app i { width: 24px; height: 24px; border-radius: 7px; background: var(--ro-primary-soft); color: var(--ro-primary-text); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.ro-auto-steps { margin: 0 0 4px; padding-left: 18px; font-size: var(--ro-fs-sm); color: var(--ro-text); }
.ro-auto-steps li { margin-bottom: 4px; line-height: 1.5; }
.ro-auto-steps code { font-size: 12px; background: var(--ro-bg); border: 1px solid var(--ro-line); border-radius: 4px; padding: 0 4px; color: var(--ro-text); }
.ro-auto-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ro-auto-stats > div { background: var(--ro-bg); border: 1px solid var(--ro-line); border-radius: var(--ro-radius-sm); padding: 12px 14px; }
.ro-auto-stats strong { display: block; font-size: var(--ro-fs-lg); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ro-auto-stats span { font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }

/* Settings › Integrations: webhook list (migration 027) */
.ro-hook-list { list-style: none; margin: 0; padding: 0; }
.ro-hook { padding: 16px 24px; border-bottom: 1px solid var(--ro-line); }
.ro-hook:last-child { border-bottom: 0; }
.ro-hook.is-paused .ro-hook-url code { color: var(--ro-text-muted); }
.ro-hook-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ro-hook-url { min-width: 0; flex: 1 1 260px; }
.ro-hook-url code { display: block; font-size: var(--ro-fs-sm); color: var(--ro-text); background: none; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-hook-meta { display: block; margin-top: 2px; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-hook-secret { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ro-hook-secret .ro-copy-field { flex: 1 1 260px; max-width: 420px; }
.ro-hook-log { margin: 12px 0 0; }
.ro-hook-log th, .ro-hook-log td { padding: 8px 10px; }
.ro-hook-add { background: var(--ro-bg); }
@media (max-width: 575.98px) { .ro-hook { padding: 14px 16px; } }


/* Review source + Facebook recommendations (migration 029) */
.ro-source { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 4px; color: var(--ro-text-muted); font-size: 12px; vertical-align: -2px; }
.ro-source-facebook { color: var(--ro-primary); }
.ro-recommend { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--ro-radius-pill); background: var(--ro-primary-soft); color: var(--ro-primary-text); font-size: var(--ro-fs-xs); font-weight: 600; }
.ro-recommend.is-no { background: #eef1f5; color: var(--ro-text-muted); }
.ro-fb-list { list-style: none; margin: 0 0 12px; padding: 0; }
.ro-fb-list > li { padding: 12px 0; border-bottom: 1px solid var(--ro-line); }
.ro-fb-list > li:first-child { padding-top: 0; }
.ro-fb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ro-fb-link { display: flex; gap: 8px; margin-top: 8px; }
.ro-fb-link select { flex: 1 1 auto; min-width: 0; }

/* Notifications › Chat & phone alerts (migration 030) */
.ro-chan { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--ro-line); }
.ro-chan.mb-0 { border-bottom: 0; padding-bottom: 0; }
.ro-chan-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ro-chan-head .ro-status { margin-left: auto; }
.ro-chan-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--ro-primary-soft); color: var(--ro-primary-text); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.ro-chan .ro-setting-help { margin-top: 6px; }
.ro-chan-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ro-chan-tests { display: flex; flex-wrap: wrap; gap: 2px; }

/* Review card › team workflow bar (migration 031) */
.ro-wf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 0 0 52px; padding-top: 10px; border-top: 1px solid var(--ro-line); font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-wf-due { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.ro-wf-due[hidden] { display: none; }
.ro-wf-due.is-due { color: var(--ro-text-muted); }
.ro-wf-due.is-overdue { color: var(--ro-danger-text); }
.ro-wf-field { display: inline-flex; align-items: center; gap: 5px; }
.ro-wf-select { border: 0; background: transparent; color: var(--ro-text); font: inherit; font-size: var(--ro-fs-xs); font-weight: 500; padding: 2px 4px; border-radius: 6px; cursor: pointer; max-width: 180px; }
.ro-wf-select:hover { background: var(--ro-bg); }
.ro-wf-select:focus-visible { outline: 2px solid var(--ro-primary); outline-offset: 1px; }
.ro-wf-notes-btn { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--ro-text-muted); font: inherit; font-size: var(--ro-fs-xs); font-weight: 500; cursor: pointer; }
.ro-wf-notes-btn:hover, .ro-wf-notes-btn[aria-expanded="true"] { background: var(--ro-primary-soft); color: var(--ro-primary-text); }
.ro-wf-count { min-width: 18px; padding: 0 5px; border-radius: var(--ro-radius-pill); background: var(--ro-primary); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.ro-wf-notes { flex: 1 1 100%; margin-top: 4px; }
.ro-wf-notes[hidden] { display: none; }
.ro-wf-note-list { list-style: none; margin: 0 0 8px; padding: 0; }
.ro-wf-note { padding: 8px 12px; margin-bottom: 6px; background: var(--ro-bg); border: 1px solid var(--ro-line); border-left: 3px solid var(--ro-primary); border-radius: var(--ro-radius-sm); }
.ro-wf-note-meta { font-size: 11px; color: var(--ro-text-muted); margin-bottom: 2px; }
.ro-wf-note-text { font-size: var(--ro-fs-sm); color: var(--ro-text); white-space: pre-line; overflow-wrap: anywhere; }
.ro-wf-note-empty { color: var(--ro-text-muted); font-size: var(--ro-fs-xs); padding: 4px 0; }
.ro-wf-note-form { display: flex; gap: 8px; align-items: flex-end; }
.ro-wf-note-form textarea { font-size: var(--ro-fs-sm); resize: vertical; }
@media (max-width: 575.98px) { .ro-wf { margin-left: 0; } .ro-wf-notes-btn { margin-left: 0; } .ro-wf-note-form { flex-direction: column; align-items: stretch; } }
.ro-wf-note-form .btn { white-space: nowrap; flex: none; }

/* Insights › topic trends + rising complaints (migration 032) */
.ro-spikes { list-style: none; margin: 0 0 14px; padding: 0; }
.ro-spikes li { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--ro-line); border-left: 3px solid var(--ro-danger); border-radius: var(--ro-radius-sm); background: var(--ro-surface); font-size: var(--ro-fs-sm); color: var(--ro-text); }
.ro-spikes li i { color: var(--ro-danger-text); margin-top: 3px; }
.ro-topics-v2 .ro-topic-row { align-items: center; }
.ro-topics-v2 .ro-topic-name { flex: 1 1 auto; }
.ro-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; flex: none; }
.ro-spark-bar { position: relative; display: block; width: 6px; min-height: 2px; background: var(--ro-primary); opacity: .55; border-radius: 1px; overflow: hidden; }
.ro-spark-bar:last-child { opacity: 1; }
.ro-spark-bar .neg { position: absolute; left: 0; right: 0; bottom: 0; background: #9aa6b8; }

/* Reviewer's language: translate a review, reply in their language */
.ro-translate { margin: 4px 0 0 52px; }
.ro-translate-btn { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; margin-left: -6px; border: 0; border-radius: 6px; background: none; color: var(--ro-primary-text); font: inherit; font-size: var(--ro-fs-xs); font-weight: 500; cursor: pointer; }
.ro-translate-btn:hover { background: var(--ro-primary-soft); }
.ro-translation { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--ro-line); background: var(--ro-bg); border-radius: 0 var(--ro-radius-sm) var(--ro-radius-sm) 0; font-size: var(--ro-fs-sm); color: var(--ro-text); white-space: pre-line; }
.ro-translation[hidden], .ro-reply-translation[hidden] { display: none; }
.ro-reply-lang-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-check-reply-btn { margin-left: auto; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--ro-primary-text); font: inherit; font-size: var(--ro-fs-xs); font-weight: 500; cursor: pointer; }
.ro-check-reply-btn:hover { background: var(--ro-primary-soft); }
.ro-reply-translation { margin: 6px 0 0; padding: 8px 12px; background: var(--ro-bg); border: 1px solid var(--ro-line); border-radius: var(--ro-radius-sm); font-size: var(--ro-fs-sm); color: var(--ro-text); }
@media (max-width: 575.98px) { .ro-translate { margin-left: 0; } }

/* ------------------------------------------------------------------ */
/* Google profile health (location page)                                */
/* ------------------------------------------------------------------ */
.ro-health-checked { font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-health-pending { display: flex; align-items: center; color: var(--ro-text-muted); min-height: 48px; }
.ro-health-top { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.ro-health-ring { position: relative; flex: 0 0 96px; width: 96px; height: 96px; }
.ro-health-ring svg { display: block; }
.ro-health-ring circle { fill: none; stroke-width: 6; }
.ro-health-ring-bg { stroke: var(--ro-primary-soft); }
.ro-health-ring-fg { stroke: var(--ro-primary); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ro-health-ring-num {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.ro-health-ring-num strong { font-size: 1.75rem; font-weight: 700; color: var(--ro-text); letter-spacing: -.02em; }
.ro-health-ring-num small { margin-top: 4px; font-size: .6875rem; font-weight: 500; color: var(--ro-text-muted); }
.ro-health-verdict { font-size: var(--ro-fs-md); font-weight: 600; }
.ro-health-closed { font-size: var(--ro-fs-sm); color: var(--ro-danger); }

.ro-health-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ro-line); }
.ro-health-item { border-bottom: 1px solid var(--ro-line); }
.ro-health-item:last-child { border-bottom: 0; }
.ro-health-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-height: 56px; }
.ro-health-icon { flex: 0 0 18px; font-size: 1rem; text-align: center; color: var(--ro-text-muted); }
.ro-health-item.is-done .ro-health-icon { color: var(--ro-success); }
.ro-health-item.is-partial .ro-health-icon { color: var(--ro-primary); }
.ro-health-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ro-health-label { font-weight: 600; }
.ro-health-detail { color: var(--ro-text-muted); font-size: var(--ro-fs-sm); overflow-wrap: anywhere; }
.ro-health-pts { flex: 0 0 auto; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.ro-health-action { flex: 0 0 120px; display: flex; justify-content: flex-end; }
.ro-health-action .btn { white-space: nowrap; }

.ro-health-form {
    margin: 0 0 14px 30px; padding: 16px; background: var(--ro-bg);
    border: 1px solid var(--ro-line); border-left: 3px solid var(--ro-primary); border-radius: var(--ro-radius-sm);
}
.ro-health-form label, .ro-health-legend { font-weight: 600; font-size: var(--ro-fs-sm); margin-bottom: 6px; }
.ro-health-legend { width: auto; }
.ro-health-form-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; }
.ro-health-note { font-size: var(--ro-fs-xs); }
.ro-health-hours { display: flex; flex-direction: column; gap: 6px; }
.ro-health-day { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; min-height: 36px; }
.ro-health-day .custom-switch { flex: 0 0 140px; }
.ro-health-times { display: inline-flex; align-items: center; gap: 8px; }
.ro-health-times .form-control { width: 120px; }
.ro-health-day .ro-health-closed-label { display: none; }
.ro-health-day.is-closed .ro-health-times { display: none; }
.ro-health-day.is-closed .ro-health-closed-label { display: inline; }
.ro-health-split { flex-basis: 100%; padding-left: 156px; }
.ro-health-special { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.ro-health-special fieldset { margin: 0; }
.ro-health-special input[type=date] { width: 180px; }
.ro-health-existing { font-size: var(--ro-fs-sm); color: var(--ro-text-muted); margin-bottom: 10px; }
.ro-health-photo { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.ro-health-photo .custom-select { width: 200px; }

@media (max-width: 575.98px) {
    .ro-health-top { gap: 14px; }
    .ro-health-row { flex-wrap: wrap; gap: 4px 12px; }
    .ro-health-text { flex-basis: calc(100% - 90px); }
    .ro-health-action { flex: 1 0 100%; justify-content: flex-start; padding-left: 30px; }
    .ro-health-action:empty { display: none; }
    .ro-health-form { margin-left: 0; }
    .ro-health-split { padding-left: 0; }
    .ro-health-day .custom-switch { flex-basis: 100%; }
    .ro-health-times { display: flex; flex: 1 1 100%; }
    .ro-health-times .form-control { width: auto; flex: 1 1 0; min-width: 0; }
    .ro-health-day.is-closed .ro-health-times { display: none; }
    .ro-health-action .btn-link { padding-left: 0; padding-right: 0; }
    .ro-health-special input[type=date] { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Share a review as an image                                           */
/* ------------------------------------------------------------------ */
.ro-share { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ro-share-preview {
    display: flex; align-items: center; justify-content: center; min-height: 380px; padding: 16px;
    background: var(--ro-bg); border: 1px solid var(--ro-line); border-radius: var(--ro-radius);
}
.ro-share-preview canvas { display: block; max-width: 100%; max-height: 440px; width: auto; height: auto; border-radius: 6px; box-shadow: var(--ro-shadow-sm); }
.ro-share-opts fieldset { margin: 0 0 16px; }
.ro-share-opts legend, .ro-share-opts > label { font-size: var(--ro-fs-sm); font-weight: 600; margin-bottom: 6px; width: auto; }
.ro-share-choices { display: flex; flex-direction: column; gap: 6px; }
.ro-share-choice { display: block; margin: 0; cursor: pointer; }
.ro-share-choice input, .ro-share-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ro-share-choice span {
    display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--ro-line);
    border-radius: var(--ro-radius-sm); background: var(--ro-surface);
}
.ro-share-choice small { color: var(--ro-text-muted); font-size: var(--ro-fs-xs); }
.ro-share-choice input:checked + span { border-color: var(--ro-primary); background: var(--ro-primary-soft); box-shadow: inset 0 0 0 1px var(--ro-primary); }
.ro-share-choice input:focus-visible + span, .ro-share-seg input:focus-visible + span { outline: 2px solid var(--ro-primary); outline-offset: 2px; }
.ro-share-seg { display: inline-flex; border: 1px solid var(--ro-line); border-radius: var(--ro-radius-sm); overflow: hidden; }
.ro-share-seg label { margin: 0; cursor: pointer; }
.ro-share-seg span { display: block; padding: 6px 16px; font-weight: 500; }
.ro-share-seg label + label span { border-left: 1px solid var(--ro-line); }
.ro-share-seg input:checked + span { background: var(--ro-primary); color: #fff; }
#ro-share-modal .modal-footer { flex-wrap: wrap; gap: 8px; }
#ro-share-modal .modal-footer > * { margin: 0; }


@media (max-width: 767.98px) {
    .ro-share { grid-template-columns: 1fr; gap: 16px; }
    .ro-share-preview { min-height: 0; }
    .ro-share-preview canvas { max-height: 320px; }
    .ro-share-choices { flex-direction: row; flex-wrap: wrap; }
    .ro-share-choice { flex: 1 1 0; min-width: 0; }
    .ro-share-choice small { display: none; }
    #ro-share-modal .modal-footer .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ */
/* Branding (white label)                                               */
/* ------------------------------------------------------------------ */
.ro-label { font-weight: 600; margin-bottom: .5rem; }
.ro-brand-logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ro-brand-logo-box {
    display: flex; align-items: center; justify-content: center; width: 200px; height: 72px; padding: 8px;
    border: 1px dashed var(--ro-line); border-radius: var(--ro-radius-sm);
    background: repeating-conic-gradient(#f2f4f7 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
}
.ro-brand-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ro-brand-logo-box .text-muted { font-size: var(--ro-fs-xs); background: var(--ro-surface); padding: 2px 6px; border-radius: 4px; }
.ro-visually-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ro-visually-hidden-file:focus-visible + label { outline: 2px solid var(--ro-primary); outline-offset: 2px; }
.ro-brand-file-name { color: var(--ro-primary-text); }
.ro-brand-color-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ro-brand-swatch { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--ro-line); border-radius: var(--ro-radius-sm); background: var(--ro-surface); cursor: pointer; }
.ro-brand-swatch:disabled { opacity: .5; cursor: default; }
.ro-brand-color-row .form-control { width: 130px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ro-brand-toggles { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.ro-brand-toggles .custom-control-label strong { display: block; font-weight: 600; }
.ro-brand-toggles .custom-control-label { font-weight: 400; }
.ro-brand-toggles .custom-control-label span { display: block; color: var(--ro-text-muted); font-size: var(--ro-fs-sm); font-weight: 400; }

.ro-brand-preview { border: 1px solid var(--ro-line); border-radius: var(--ro-radius); background: var(--ro-bg); padding: 16px; }
.ro-bp-head { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-bottom: 12px; font-weight: 700; font-size: var(--ro-fs-md); }
.ro-bp-logo { max-height: 36px; max-width: 180px; object-fit: contain; }
.ro-bp-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--bp-color); color: #fff; font-size: 14px; }
.ro-bp-body { background: var(--ro-surface); border: 1px solid var(--ro-line); border-radius: 10px; padding: 16px; }
.ro-bp-title { font-weight: 700; margin-bottom: 4px; }
.ro-bp-text { color: var(--ro-text-muted); margin-bottom: 12px; }
.ro-bp-btn { display: inline-block; padding: 8px 16px; border-radius: 8px; background: var(--bp-color); color: #fff; font-weight: 600; }
.ro-bp-foot { margin: 10px 0 0; text-align: center; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-brand-where { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ro-brand-where li { display: flex; gap: 10px; align-items: baseline; color: var(--ro-text); }
.ro-brand-where i { width: 16px; text-align: center; color: var(--ro-text-muted); }

/* App shell in the account's brand (white label "inside RepOcean"). */
.ro-brand-logo-img { max-height: 30px; max-width: 150px; object-fit: contain; }

/* ------------------------------------------------------------------ */
/* Security, two-step sign-in, Activity                                 */
/* ------------------------------------------------------------------ */
.ro-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--ro-radius-pill); background: var(--ro-bg); border: 1px solid var(--ro-line); color: var(--ro-text-muted); font-size: var(--ro-fs-xs); font-weight: 600; white-space: nowrap; }
.ro-pill-on { background: var(--ro-primary-soft); border-color: transparent; color: var(--ro-primary-text); }
.ro-sec-steps { padding-left: 20px; margin: 0; }
.ro-sec-steps > li { margin-bottom: 14px; padding-left: 4px; }
.ro-sec-qr-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.ro-sec-qr { width: 168px; height: 168px; padding: 6px; border: 1px solid var(--ro-line); border-radius: var(--ro-radius-sm); background: #fff; }
.ro-sec-qr svg { display: block; width: 100%; height: 100%; }
.ro-sec-key { display: inline-block; margin-top: 4px; font-size: var(--ro-fs-sm); letter-spacing: .06em; word-break: break-all; color: var(--ro-text); background: var(--ro-bg); padding: 4px 8px; border-radius: 6px; }
.ro-sec-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ro-sec-inline .form-control { width: 170px; }
.ro-sec-actions { display: flex; flex-direction: column; gap: 14px; }
.ro-sec-disable summary { cursor: pointer; color: var(--ro-danger); font-weight: 500; }
.ro-sec-disable form { max-width: 520px; }
.ro-sec-codes { columns: 2; column-gap: 24px; padding-left: 22px; margin: 0 0 14px; font-size: var(--ro-fs-md); }
.ro-sec-codes li { padding: 2px 0; }
.ro-sec-codes code { color: var(--ro-text); font-size: var(--ro-fs-md); letter-spacing: .05em; }
.ro-sec-codes-card { border-left: 3px solid var(--ro-primary); }
.ro-sec-alerts { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ro-line); }
.ro-sec-devices { list-style: none; margin: 0; padding: 0; }
.ro-sec-devices li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ro-line); }
.ro-sec-devices li:last-child { border-bottom: 0; padding-bottom: 0; }
.ro-sec-dev-icon { width: 20px; text-align: center; color: var(--ro-text-muted); font-size: 1.1rem; }
.ro-sec-dev-text { flex: 1 1 auto; min-width: 0; }
.ro-sec-tips { padding-left: 18px; margin: 0; color: var(--ro-text); }
.ro-sec-tips li { margin-bottom: 6px; }
.ro-2fa-icon { width: 48px; height: 48px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--ro-primary-soft); color: var(--ro-primary); font-size: 1.3rem; }
.ro-2fa-input { font-size: 1.375rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.ro-2fa-help { margin-top: 16px; font-size: var(--ro-fs-sm); color: var(--ro-text-muted); }
.ro-2fa-help summary { cursor: pointer; color: var(--ro-primary-text); font-weight: 500; }
.ro-2fa-help p { margin: 8px 0 0; }

.ro-activity-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ro-activity-filters .custom-select { width: auto; min-width: 160px; }
.ro-activity-list { list-style: none; margin: 0; padding: 0; }
.ro-activity-day { padding: 10px 20px 6px; font-size: var(--ro-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ro-text-muted); background: var(--ro-bg); border-bottom: 1px solid var(--ro-line); }
.ro-activity-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--ro-line); }
.ro-activity-icon { flex: 0 0 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ro-primary-soft); color: var(--ro-primary); font-size: .85rem; }
.ro-activity-item.is-warn .ro-activity-icon { background: var(--ro-bg); color: var(--ro-danger); }
.ro-activity-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ro-activity-sum { color: var(--ro-text-muted); font-size: var(--ro-fs-sm); overflow-wrap: anywhere; }
.ro-activity-meta { flex: 0 0 auto; color: var(--ro-text-muted); font-size: var(--ro-fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 575.98px) {
    .ro-activity-item { flex-wrap: wrap; padding: 10px 16px; }
    .ro-activity-meta { flex-basis: 100%; padding-left: 44px; }
    .ro-sec-codes { columns: 1; }
    .ro-sec-alerts { flex-direction: column; align-items: flex-start; }
}

/* AI summary: out-of-date notice and which locations it covers. */
.ro-ai-outdated {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0 12px; padding: 10px 12px;
    background: var(--ro-primary-soft); border-radius: var(--ro-radius-sm); color: var(--ro-text); font-size: var(--ro-fs-sm);
}
.ro-ai-outdated > i { color: var(--ro-primary); }
.ro-ai-outdated > span { flex: 1 1 220px; }
.ro-ai-summary .card-body > .ro-ai-outdated:first-child { margin-top: 0; }

/* Profile health: next step, folded finished items, point gains. */
.ro-health-count { font-weight: 500; color: var(--ro-text-muted); }
.ro-health-next {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
    margin-bottom: 16px; padding: 12px 16px; border-radius: var(--ro-radius-sm);
    background: var(--ro-primary-soft); border-left: 3px solid var(--ro-primary);
}
.ro-health-next.is-complete { border-left-color: var(--ro-success); }
.ro-health-next.is-complete .ro-health-next-text i { color: var(--ro-success); }
.ro-health-next-text { flex: 1 1 260px; color: var(--ro-text); font-weight: 500; }
.ro-health-next-label {
    display: block; margin-bottom: 2px; font-size: var(--ro-fs-xs); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ro-primary-text);
}
.ro-health-gain {
    display: inline-flex; align-items: center; padding: 1px 8px; margin-left: 4px; border-radius: var(--ro-radius-pill);
    background: var(--ro-surface); border: 1px solid var(--ro-line); color: var(--ro-primary-text);
    font-size: var(--ro-fs-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ro-health-row > .ro-health-gain { margin-left: 0; background: var(--ro-primary-soft); border-color: transparent; }
.ro-health-fold { border-bottom: 1px solid var(--ro-line); }
.ro-health-fold-btn {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 0;
    border: 0; background: none; color: var(--ro-text); font: inherit; text-align: left; cursor: pointer;
}
.ro-health-fold-btn .ro-health-icon { color: var(--ro-success); }
.ro-health-fold-text { flex: 1 1 auto; font-weight: 600; }
.ro-health-fold-cta { color: var(--ro-primary-text); font-size: var(--ro-fs-sm); font-weight: 500; white-space: nowrap; }
.ro-health-fold-cta i { margin-left: 4px; font-size: .75em; transition: transform .2s; }
.ro-health-fold-btn[aria-expanded="true"] .ro-health-fold-cta i { transform: rotate(180deg); }
.ro-health-fold-btn:hover .ro-health-fold-cta { text-decoration: underline; }
.ro-health-fold-btn:focus-visible { outline: 2px solid var(--ro-primary); outline-offset: 2px; border-radius: 6px; }
.ro-health-item[hidden] { display: none; }
.ro-health-ring-fg { transition: stroke-dashoffset .9s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
    .ro-health-ring-fg, .ro-health-fold-cta i { transition: none; }
}
@media (max-width: 575.98px) {
    .ro-health-next { padding: 12px; }
    .ro-health-next .btn { width: 100%; }
}

/* Locations list: Google profile score column and compact row actions. */
#loc-table .ro-profile-cell { white-space: nowrap; }
.ro-score-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: var(--ro-radius-pill);
    background: var(--ro-primary-soft); color: var(--ro-primary-text); font-weight: 600; font-variant-numeric: tabular-nums;
    text-decoration: none; white-space: nowrap;
}
.ro-score-badge:hover, .ro-score-badge:focus-visible { color: var(--ro-primary-text); text-decoration: none; box-shadow: inset 0 0 0 1px var(--ro-primary); }
.ro-score-ring {
    width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
    background: conic-gradient(var(--ro-primary) calc(var(--p) * 1%), #ffffff 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}
.ro-score-check { font-size: var(--ro-fs-sm); font-weight: 500; white-space: nowrap; }
.ro-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 31px; padding-left: 0; padding-right: 0; }
.ro-icon-btn .ro-icon-btn-text { display: none; }
@media (max-width: 767.98px) {
    .ro-table-cards .ro-icon-btn { padding-left: .5rem; padding-right: .5rem; }
    .ro-table-cards .ro-icon-btn .ro-icon-btn-text { display: inline; margin-left: 6px; }
}
/* Locations: a wider page (.ro-content-wide) keeps every header on one line. */
.ro-content.ro-content-wide { max-width: 1280px; }
@media (min-width: 768px) {
    #loc-table th, #loc-table td { padding-left: 10px; padding-right: 10px; }
    #loc-table .ro-loc-cell { min-width: 200px; }
}

/* Dashboard: location filter in the page header. */
.ro-dash-filter { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; }
.ro-dash-filter-icon { position: absolute; left: 12px; color: var(--ro-text-muted); pointer-events: none; font-size: .85rem; }
.ro-dash-filter .custom-select { padding-left: 32px; font-weight: 500; }
.ro-dash-filter .custom-select.is-filtered { border-color: var(--ro-primary); background-color: var(--ro-primary-soft); color: var(--ro-primary-text); }
.ro-dash-filter .custom-select.is-filtered + noscript + *, .ro-dash-filter .custom-select.is-filtered ~ .ro-dash-filter-icon { color: var(--ro-primary); }
@media (max-width: 575.98px) {
    .ro-dash-filter { width: 100%; }
    .ro-dash-filter .custom-select { max-width: none; width: 100%; }
}

/* Dashboard: clickable number tiles, profile strip, empty summary card. */
a.ro-kpi-link { display: block; color: var(--ro-text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.ro-kpi-link:hover { color: var(--ro-text); text-decoration: none; border-color: var(--ro-primary); box-shadow: 0 4px 14px rgba(13, 110, 253, .10); }
a.ro-kpi-link:focus-visible { outline: 2px solid var(--ro-primary); outline-offset: 2px; }
a.ro-kpi-link .ro-kpi-label { color: var(--ro-text-muted); }
@media (prefers-reduced-motion: reduce) { a.ro-kpi-link { transition: none; } }
.ro-chart-empty { margin: 0; padding: 48px 16px; text-align: center; color: var(--ro-text-muted); background: var(--ro-bg); border-radius: var(--ro-radius-sm); }

/* Dashboard pixel pass: header keeps its controls on the right; one
   "strip" layout for the profile, AI summary and no-summary cards. */
.ro-dash-head { margin-bottom: 24px; }
.ro-dash-head .ro-dash-header { margin-bottom: 16px; }
.ro-dash-header .ro-page-actions .btn { white-space: nowrap; }
.ro-dash-head .ro-dash-filter { width: 100%; }
.ro-dash-head .ro-dash-filter .custom-select { width: 100%; max-width: none; min-width: 0; height: 44px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.ro-dash-head .ro-dash-filter-icon { left: 14px; }
.ro-dash-head .ro-dash-filter .custom-select { padding-left: 36px; }
.ro-dash-sub { width: 100%; margin: 12px 0 0; }

.ro-strip .ro-strip-body { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.ro-strip-icon {
    flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--ro-primary-soft); color: var(--ro-primary); font-size: 1rem;
}
.ro-strip-score {
    position: relative; flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--ro-text); font-weight: 700; font-size: .9375rem; font-variant-numeric: tabular-nums; text-decoration: none;
}
.ro-strip-score::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(var(--ro-primary) calc(var(--p) * 1%), var(--ro-primary-soft) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}
.ro-strip-score:hover, .ro-strip-score:focus-visible { color: var(--ro-primary-text); text-decoration: none; }
.ro-strip-text { flex: 1 1 auto; min-width: 0; }
.ro-strip-title { margin: 0 0 2px; font-size: var(--ro-fs-md); font-weight: 600; line-height: 1.4; color: var(--ro-text); }
.ro-strip-title-meta { margin-left: 6px; font-size: var(--ro-fs-sm); font-weight: 500; color: var(--ro-text-muted); }
.ro-strip-sub { margin: 0; color: var(--ro-text-muted); line-height: 1.5; }
.ro-strip-sub .ro-health-gain { margin-left: 6px; vertical-align: 1px; }
.ro-strip-meta { margin: 4px 0 0; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-strip-action { flex: 0 0 auto; }
.ro-strip-action .btn { white-space: nowrap; min-width: 128px; }
.ro-strip-foot { padding: 0 20px 16px 80px; }
.ro-strip-foot .ro-ai-outdated { margin: 0; }
@media (max-width: 575.98px) {
    .ro-strip .ro-strip-body { flex-wrap: wrap; align-items: flex-start; padding: 14px 16px; gap: 12px; }
    .ro-strip-text { flex-basis: calc(100% - 60px); }
    .ro-strip-action, .ro-strip-action .btn { width: 100%; }
    .ro-strip-foot { padding: 0 16px 14px; }
}
.ro-dash-chart { position: relative; height: 280px; }
.ro-dash-chart[hidden] { display: none; }
@media (max-width: 575.98px) { .ro-dash-chart { height: 220px; } }

/* Dashboard: compact reply queue. */
.ro-queue { list-style: none; margin: 0; padding: 0; }
.ro-queue-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--ro-line); }
.ro-queue-item:first-child { border-top: 0; }
.ro-queue-avatar {
    position: relative; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--ro-primary-soft); color: var(--ro-primary-text); font-weight: 600; font-size: var(--ro-fs-sm);
}
.ro-queue-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ro-queue-main { flex: 1 1 auto; min-width: 0; }
.ro-queue-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ro-queue-name { font-weight: 600; color: var(--ro-text); }
.ro-queue-stars { font-size: var(--ro-fs-xs); letter-spacing: 1px; }
.ro-queue-flag { font-size: var(--ro-fs-xs); font-weight: 600; color: var(--ro-danger); }
.ro-queue-text {
    margin: 2px 0 2px; color: var(--ro-text); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ro-queue-meta { font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-queue-btn { flex: 0 0 auto; min-width: 72px; align-self: center; }
@media (max-width: 575.98px) {
    .ro-queue-item { padding: 12px 16px; }
}
/* Same header height whether a card header holds a button or just text. */
.ro-card-head { min-height: 63px; }

/* Dashboard: alerts, to-do, review requests, locations at a glance, queue drafts. */
.ro-dash-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ro-dash-alert {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 16px;
    background: var(--ro-surface); border: 1px solid var(--ro-line); border-left: 3px solid var(--ro-primary);
    border-radius: var(--ro-radius-sm); box-shadow: var(--ro-shadow-sm);
}
.ro-dash-alert > i { color: var(--ro-danger); }
.ro-dash-alert-text { flex: 1 1 auto; min-width: 0; color: var(--ro-text); }
.ro-dash-alert .btn { flex: 0 0 auto; white-space: nowrap; }
.ro-dash-row > [class*="col-"] { display: flex; }
.ro-dash-row > [class*="col-"] > .card { flex: 1 1 auto; }
.ro-todo { list-style: none; margin: 0; padding: 0; }
.ro-todo-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--ro-line); }
.ro-todo-item:first-child { border-top: 0; }
.ro-todo-icon {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--ro-bg); color: var(--ro-text-muted); font-size: .8125rem;
}
.ro-todo-icon.is-urgent { background: var(--ro-primary-soft); color: var(--ro-primary); }
.ro-todo-text { flex: 1 1 auto; min-width: 0; color: var(--ro-text); font-weight: 500; }
.ro-todo-flag { display: inline-block; margin-left: 8px; font-size: var(--ro-fs-xs); font-weight: 600; color: var(--ro-danger); }
.ro-todo-btn { flex: 0 0 auto; min-width: 64px; }
.ro-todo-done { display: flex; align-items: center; gap: 16px; }
.ro-req-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.ro-req-num { display: block; font-size: var(--ro-fs-xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ro-text); }
.ro-req-label { display: block; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-glance { margin: 0; }
.ro-glance th, .ro-glance td { padding: 10px 20px; vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ro-glance thead th { font-size: var(--ro-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ro-text-muted); border-top: 0; }
.ro-glance tbody th { font-weight: 600; white-space: normal; min-width: 180px; }
.ro-glance-alert { font-weight: 600; color: var(--ro-danger); }
.ro-glance-score { display: inline-block; min-width: 36px; padding: 1px 8px; border-radius: var(--ro-radius-pill); background: var(--ro-primary-soft); color: var(--ro-primary-text); font-weight: 600; text-align: center; }
.ro-queue-actions { flex: 0 0 auto; display: flex; gap: 6px; align-self: center; }
.ro-queue-draft { margin-top: 10px; }
.ro-queue-draft textarea { font-size: var(--ro-fs-sm); }
.ro-queue-draft-note { margin: 6px 0 8px; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); }
.ro-queue-draft-actions { display: flex; align-items: center; gap: 8px; }
.ro-queue-done { margin: 6px 0 0; font-size: var(--ro-fs-sm); font-weight: 500; color: var(--ro-success); }
.ro-queue-item.is-done { background: var(--ro-bg); }
@media (max-width: 991.98px) {
    .ro-dash-row > [class*="col-"] { display: block; }
}
@media (max-width: 575.98px) {
    .ro-dash-alert { flex-wrap: wrap; }
    .ro-dash-alert .btn { width: 100%; }
    .ro-todo-item { padding: 12px 16px; gap: 10px; }
    .ro-todo-btn { min-width: 56px; }
    .ro-queue-item { flex-wrap: wrap; }
    .ro-queue-actions { width: 100%; padding-left: 48px; }
    .ro-queue-actions .btn { flex: 1 1 0; }
}
.ro-glance tbody th { font-size: var(--ro-fs-sm); font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ro-text); }
.ro-glance tbody th a { color: var(--ro-text); }
.ro-glance tbody th a:hover { color: var(--ro-primary-text); }

/* ------------------------------------------------------------------ */
/* Get reviews: tabs row, overview, simpler pages                       */
/* ------------------------------------------------------------------ */
.ro-gr-tabs { display: flex; align-items: flex-end; gap: 12px; margin: -8px 0 20px; box-shadow: inset 0 -1px 0 var(--ro-line); }
.ro-gr-tabs .ro-tabs { flex: 1 1 auto; min-width: 0; margin: 0; box-shadow: none; }
.ro-gr-settings { flex: 0 0 auto; padding: 10px 0; color: var(--ro-text-muted); font-size: var(--ro-fs-sm); font-weight: 500; white-space: nowrap; }
.ro-gr-settings:hover { color: var(--ro-primary-text); text-decoration: none; }
.ro-gr-back { margin: -8px 0 16px; }
.ro-loc-switch { align-items: center; position: relative; }
.ro-loc-switch-label { position: absolute; left: 12px; margin: 0; color: var(--ro-text-muted); pointer-events: none; font-size: .85rem; }
.ro-loc-switch .custom-select { padding-left: 32px; font-weight: 500; }

.ro-gr-steps { list-style: none; margin: 0; padding: 0; }
.ro-gr-step { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--ro-line); }
.ro-gr-step:first-child { border-top: 0; }
.ro-gr-step-num {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--ro-primary); color: #fff; font-weight: 700; font-size: var(--ro-fs-sm);
}
.ro-gr-step.is-done .ro-gr-step-num { background: var(--ro-primary-soft); color: var(--ro-primary); }
.ro-gr-step-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ro-gr-step-text strong { font-weight: 600; color: var(--ro-text); }
.ro-gr-step-text span { color: var(--ro-text-muted); font-size: var(--ro-fs-sm); }
.ro-gr-step.is-done .ro-gr-step-text strong { color: var(--ro-text-muted); text-decoration: line-through; text-decoration-color: var(--ro-line); }
.ro-gr-step .btn { flex: 0 0 auto; white-space: nowrap; }

.ro-gr-h { font-size: var(--ro-fs-md); font-weight: 600; margin: 4px 0 12px; }
.ro-gr-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.ro-gr-way {
    display: flex; flex-direction: column; gap: 8px; padding: 20px; color: var(--ro-text);
    background: var(--ro-surface); border: 1px solid var(--ro-line); border-radius: var(--ro-radius); box-shadow: var(--ro-shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.ro-gr-way:hover, .ro-gr-way:focus-visible { color: var(--ro-text); text-decoration: none; border-color: var(--ro-primary); box-shadow: 0 6px 18px rgba(13, 110, 253, .10); }
.ro-gr-way:focus-visible { outline: 2px solid var(--ro-primary); outline-offset: 2px; }
.ro-gr-way-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ro-primary-soft); color: var(--ro-primary); font-size: 1.1rem; }
.ro-gr-way-title { display: flex; align-items: center; gap: 8px; font-size: var(--ro-fs-md); font-weight: 600; }
.ro-gr-way-text { flex: 1 1 auto; color: var(--ro-text-muted); font-size: var(--ro-fs-sm); line-height: 1.5; }
.ro-gr-way-cta { color: var(--ro-primary-text); font-weight: 600; font-size: var(--ro-fs-sm); }
.ro-gr-way-cta i { margin-left: 4px; font-size: .8em; transition: transform .15s; }
.ro-gr-way:hover .ro-gr-way-cta i { transform: translateX(3px); }
.ro-gr-tip { display: flex; gap: 8px; padding: 10px 12px; border-radius: var(--ro-radius-sm); background: var(--ro-bg); color: var(--ro-text-muted); font-size: var(--ro-fs-sm); }
.ro-gr-tip i { color: var(--ro-primary); margin-top: 3px; }
.ro-gr-extras { list-style: none; margin: 0; padding: 0; }
.ro-gr-extras li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--ro-line); }
.ro-gr-extras li:first-child { border-top: 0; }
.ro-gr-extras li > i { color: var(--ro-text-muted); }
.ro-gr-extras li > i.is-done { color: var(--ro-success); }
.ro-gr-extras li > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ro-gr-extras li > span > span { color: var(--ro-text-muted); font-size: var(--ro-fs-sm); }
.ro-gr-rule { display: flex; gap: 8px; margin: 8px 0 0; color: var(--ro-text-muted); font-size: var(--ro-fs-sm); }
.ro-gr-rule i { margin-top: 3px; }
.ro-gr-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ro-gr-listhead h2 { margin: 0; font-size: var(--ro-fs-md); font-weight: 600; }
@media (max-width: 991.98px) {
    .ro-gr-ways { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .ro-gr-tabs { flex-direction: column; align-items: stretch; gap: 0; }
    .ro-gr-settings { padding: 8px 0 10px; }
    .ro-gr-step { flex-wrap: wrap; padding: 12px 16px; }
    .ro-gr-step-text { flex: 1 1 calc(100% - 46px); }
    .ro-gr-step .btn { margin-left: 46px; }
}
.ro-gr-extras .btn { flex: 0 0 auto; white-space: nowrap; }
.ro-qr-question { margin: 0 0 8px; font-weight: 600; font-size: var(--ro-fs-sm); }
.ro-segment-tag { margin-left: 6px; padding: 0 6px; border-radius: var(--ro-radius-pill); background: var(--ro-primary-soft); color: var(--ro-primary-text); font-size: 11px; font-weight: 600; }
.ro-segment-link.active .ro-segment-tag { background: rgba(255, 255, 255, .22); color: inherit; }
.ro-gr-tabs + .ro-gr-back { margin-top: -8px; }

/* Location page: Google isn't sharing reviews (not the verified owner). */
.ro-verify { border-left: 3px solid var(--ro-primary); }
.ro-verify-head { display: flex; gap: 12px; align-items: flex-start; }
.ro-verify-head > i { color: var(--ro-danger); font-size: 18px; margin-top: 3px; flex: 0 0 auto; }
.ro-verify-title { font-size: var(--ro-fs-md, 16px); font-weight: 600; margin: 0 0 4px; color: var(--ro-text); }
.ro-verify-steps { margin: 12px 0 16px; padding-left: 50px; color: var(--ro-text); }
.ro-verify-steps li + li { margin-top: 4px; }
.ro-verify-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 30px; }
@media (max-width: 575.98px) {
    .ro-verify-steps { padding-left: 20px; }
    .ro-verify-actions { padding-left: 0; }
    .ro-verify-actions .btn { flex: 1 1 100%; }
}

/* Google open status: "Temporarily closed" / "Permanently closed" (greys only). */
.ro-badge-closed {
    background: var(--ro-bg); color: var(--ro-text); border: 1px solid var(--ro-line);
    font-weight: 600; font-size: var(--ro-fs-xs);
}
h1 .ro-badge-closed { font-size: var(--ro-fs-xs); vertical-align: middle; }

/* Add locations from Google: "Ready to add" / "Already added" lists. */
.ro-imp-section + .ro-imp-section { border-top: 1px solid var(--ro-line); }
.ro-imp-heading {
    margin: 0; padding: 14px 20px 6px; font-size: var(--ro-fs-xs); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ro-text-muted);
}
.ro-imp-list { list-style: none; margin: 0; padding: 0 0 8px; }
.ro-imp-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; }
.ro-imp-row + .ro-imp-row { border-top: 1px solid var(--ro-line); }
.ro-imp-check { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; cursor: pointer; }
.ro-imp-icon { flex: 0 0 16px; margin-top: 1px; color: var(--ro-text-muted); text-align: center; }
.ro-imp-main { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 400; cursor: pointer; }
.ro-imp-row.is-done .ro-imp-main { cursor: default; }
.ro-imp-row.is-locked .ro-imp-check { cursor: not-allowed; opacity: .5; }
.ro-imp-row.is-locked .ro-imp-main { cursor: not-allowed; }
.ro-imp-row.is-locked .ro-imp-name { color: var(--ro-text-muted); }
.ro-imp-name { display: block; font-weight: 600; color: var(--ro-text); }
.ro-imp-meta { display: block; font-size: var(--ro-fs-xs); color: var(--ro-text-muted); margin-top: 2px; }
.ro-imp-warn { display: block; font-size: var(--ro-fs-xs); color: var(--ro-danger); margin-top: 4px; }
.ro-imp-tag {
    flex: 0 0 auto; padding: 2px 10px; border: 1px solid var(--ro-line); border-radius: var(--ro-radius-pill);
    background: var(--ro-bg); font-size: var(--ro-fs-xs); font-weight: 600; color: var(--ro-text-muted); white-space: nowrap;
}
.ro-imp-tag.is-good { color: var(--ro-success); }
.ro-imp-tag.is-bad { color: var(--ro-danger); }
@media (max-width: 575.98px) {
    .ro-imp-row { flex-wrap: wrap; padding: 12px 16px; }
    .ro-imp-main { flex-basis: calc(100% - 28px); }
    .ro-imp-heading { padding: 14px 16px 6px; }
    .ro-imp-tag { margin-left: 28px; }
}