/*
 * Renzo refresh: a visual layer on top of the existing website styles.
 * Loaded last in resources/views/website/layouts/app.blade.php. It restyles existing classes only
 * (no layout or markup changes) using the tokens from renzo-ui.css.
 *
 *  1. Tokens          5. Account area (side menu, cards, forms, tables)
 *  2. Buttons         6. Filters & dropdowns
 *  3. Header menus    7. RTL
 *  4. Form controls   8. Mobile
 */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    --rf-orange: var(--renzo-orange, #ea501c);
    --rf-orange-dark: #c9400f;
    --rf-orange-soft: #fff3ee;
    --rf-orange-ring: rgba(234, 80, 28, 0.18);
    --rf-text: #1f2430;
    --rf-muted: #6b7280;
    --rf-line: #e8eaef;
    --rf-surface: #ffffff;
    --rf-surface-alt: #f8f9fb;
    --rf-radius: 12px;
    --rf-radius-lg: 16px;
    --rf-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 6px 20px rgba(17, 24, 39, 0.06);
    --rf-shadow-pop: 0 18px 40px rgba(17, 24, 39, 0.14), 0 2px 6px rgba(17, 24, 39, 0.06);
    --rf-ease: 180ms ease;
}

/* 2. Buttons --------------------------------------------------------------- */
.btn-all,
.custom-btn,
.post_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border: 0 !important;
    border-radius: var(--rf-radius) !important;
    background: linear-gradient(135deg, #f26a35 0%, var(--rf-orange) 55%, var(--rf-orange-dark) 100%) !important;
    box-shadow: 0 6px 16px rgba(234, 80, 28, 0.28);
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    transition: transform var(--rf-ease), box-shadow var(--rf-ease), filter var(--rf-ease);
}

.btn-all:hover,
.custom-btn:hover,
.post_btn:hover {
    box-shadow: 0 10px 22px rgba(234, 80, 28, 0.34);
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.btn-all:active,
.custom-btn:active,
.post_btn:active {
    transform: translateY(0);
}

.btn-all:focus-visible,
.custom-btn:focus-visible,
.post_btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--rf-orange-ring), 0 6px 16px rgba(234, 80, 28, 0.28);
}

/* "Post Property" on My Properties: an older rule gives it a ~28px font */
.post_btn {
    min-height: 42px;
    padding: 0 18px;
    font-size: 15px !important;
    line-height: 1.2;
    white-space: nowrap;
}

/* row actions (view / delete / edit) in account tables: soft tinted squares instead of solid circles */
.round-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    margin: 2px;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    font-size: 14px;
    line-height: 1;
    transition: background var(--rf-ease), color var(--rf-ease), transform var(--rf-ease);
}

.round-btn.btn-primary { background: var(--rf-orange-soft) !important; border-color: #ffd9cb !important; color: var(--rf-orange) !important; }
.round-btn.btn-danger  { background: #fdecee !important; border-color: #f8cdd3 !important; color: #d7263d !important; }
.round-btn.btn-warning { background: #fff7e0 !important; border-color: #fde6a3 !important; color: #b7791f !important; }

.round-btn.btn-primary:hover { background: var(--rf-orange) !important; color: #fff !important; }
.round-btn.btn-danger:hover  { background: #d7263d !important; color: #fff !important; }
.round-btn.btn-warning:hover { background: #d99a1a !important; color: #fff !important; }
.round-btn:hover { transform: translateY(-1px); }

/* 3. Header: language + profile -------------------------------------------- */
#header.renzo-site-header .x-header-control {
    border-color: var(--rf-line) !important;
    background: var(--rf-surface) !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
}

#header.renzo-site-header .x-header-control:hover,
#header.renzo-site-header .x-header-control:focus,
#header.renzo-site-header .x-header-control.show {
    border-color: #ffc9b4 !important;
    background: var(--rf-orange-soft) !important;
    color: var(--rf-orange) !important;
}

#header.renzo-site-header .x-user-menu .x-header-control img,
#header.renzo-site-header .x-lang-switch .x-header-control img {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--rf-line);
}

/* profile button: long first names are cut with "…" instead of stretching / overflowing the button */
#header.renzo-site-header .x-user-menu .x-header-control {
    max-width: 200px;
    padding-inline: 10px 14px !important;
}

#header.renzo-site-header .x-user-menu .x-user-name {
    display: inline-block;
    min-width: 0;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

#header.renzo-site-header .x-lang-switch .dropdown-menu,
#header.renzo-site-header .x-user-menu .dropdown-menu {
    min-width: 210px;
    margin-top: 10px !important;
    padding: 6px;
    border: 1px solid var(--rf-line);
    border-radius: 14px;
    box-shadow: var(--rf-shadow-pop);
    animation: rf-pop 140ms ease-out;
}

#header.renzo-site-header .x-lang-switch .dropdown-item,
#header.renzo-site-header .x-user-menu .dropdown-item {
    gap: 10px;
    min-height: 42px;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--rf-text);
    font-weight: 600;
}

/* icon in a small tinted square */
#header.renzo-site-header .x-user-menu .dropdown-item i {
    display: inline-flex !important;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--rf-surface-alt);
    color: var(--rf-muted);
    font-size: 13px;
    transition: background var(--rf-ease), color var(--rf-ease);
}

#header.renzo-site-header .x-lang-switch .dropdown-item:hover,
#header.renzo-site-header .x-user-menu .dropdown-item:hover {
    background: var(--rf-orange-soft);
    color: var(--rf-orange);
}

#header.renzo-site-header .x-user-menu .dropdown-item:hover i {
    background: #ffe2d6;
    color: var(--rf-orange);
}

/* logout last: separated and red on hover */
#header.renzo-site-header .x-user-menu .dropdown-menu li:last-child {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--rf-line);
}

#header.renzo-site-header .x-user-menu .dropdown-menu li:last-child .dropdown-item:hover {
    background: #fdecee;
    color: #d7263d;
}

#header.renzo-site-header .x-user-menu .dropdown-menu li:last-child .dropdown-item:hover i {
    background: #f8cdd3;
    color: #d7263d;
}

@keyframes rf-pop {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* 4. Form controls (account forms) ------------------------------------------ */
.right-part .form-control,
.right-part select.form-select {
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #dfe3ea !important;
    border-radius: var(--rf-radius) !important;
    background-color: var(--rf-surface);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    color: var(--rf-text);
    font-size: 15px;
    transition: border-color var(--rf-ease), box-shadow var(--rf-ease);
}

.right-part .form-control:hover,
.right-part select.form-select:hover {
    border-color: #ffc9b4 !important;
}

.right-part .form-control:focus,
.right-part select.form-select:focus {
    border-color: var(--rf-orange) !important;
    outline: none;
    box-shadow: 0 0 0 4px var(--rf-orange-ring) !important;
}

.right-part label {
    margin-bottom: 6px;
    color: #3b4250;
    font-size: 14px;
    font-weight: 600;
}

/* fields were boxed twice: each column (.groupi) drew a gray bordered box around a bordered input */
.right-part .groupi {
    margin-bottom: 4px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.right-part .groupi .form-group,
.right-part .form-group {
    margin-bottom: 18px;
}

/* file pickers (bootstrap-fileinput on edit profile): one 46px control = caption + Browse button */
.right-part .file-input .file-caption-main {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.right-part .file-input .file-caption.form-control {
    display: flex;
    align-items: center;
    height: 46px;
    min-height: 46px;
    padding: 0 14px !important;
    border-radius: var(--rf-radius) 0 0 var(--rf-radius) !important;
}

.right-part .file-input .file-caption-name {
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px;
}

.right-part .file-input .input-group-btn,
.right-part .file-input .btn-file {
    height: 46px;
}

.right-part .file-input .btn-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--rf-orange) !important;
    border-radius: 0 var(--rf-radius) var(--rf-radius) 0 !important;
    background: var(--rf-orange-soft) !important;
    box-shadow: none !important;
    color: var(--rf-orange) !important;
    font-weight: 700;
}

.right-part .file-input .btn-file:hover {
    background: var(--rf-orange) !important;
    color: #fff !important;
}

/* 5. Account area ------------------------------------------------------------ */
/* the account side menu (layouts/left_side); filters also use .left-part, so match by its menu */
.left-part:has(> .bottom-part) {
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius-lg) !important;
    background: var(--rf-surface);
    box-shadow: var(--rf-shadow) !important;
}

.left-part:has(> .bottom-part) .top-part {
    margin: 0 !important;
    padding: 26px 18px 18px !important;
    border-radius: 0 !important;
    background:
        radial-gradient(120% 90% at 50% 0%, #ffe6dc 0%, rgba(255, 230, 220, 0) 70%),
        linear-gradient(180deg, var(--rf-orange-soft) 0%, #fff 100%) !important;
    border-bottom: 1px solid var(--rf-line);
}

.left-part:has(> .bottom-part) .prof-img img {
    width: 92px !important;
    height: 92px !important;
    object-fit: cover;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #f1f2f5;
    box-shadow: 0 8px 22px rgba(234, 80, 28, 0.18);
}

.left-part:has(> .bottom-part) .top-part .btn-rap {
    margin-top: 12px;
}

.left-part:has(> .bottom-part) .top-part .btn-rap + .btn-rap {
    margin-top: 8px;
}

.left-part:has(> .bottom-part) .top-part .btn-all {
    width: 100%;
    max-width: 220px;
    min-height: 40px;
    font-size: 14px;
}

/* second action (edit bank data): outlined */
.left-part:has(> .bottom-part) .top-part .btn-rap + .btn-rap .btn-all {
    border: 1.5px solid var(--rf-orange) !important;
    background: #fff !important;
    box-shadow: none;
    color: var(--rf-orange) !important;
}

.left-part:has(> .bottom-part) .top-part .btn-rap + .btn-rap .btn-all:hover {
    background: var(--rf-orange-soft) !important;
}

.left-part:has(> .bottom-part) .bottom-part {
    padding: 14px 12px !important;
}

/* account pages: less empty space between the dashboard and the footer
   (was ~180px: 80px section padding + 32px page padding + 72px footer margin) */
.dashboard-inner {
    padding-bottom: 16px !important;
}

body:has(.dashboard-inner) .renzo-site-footer {
    margin-top: 24px !important;
}

.left-part:has(> .bottom-part) .bottom-part ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.left-part:has(> .bottom-part) .bottom-part li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.left-part:has(> .bottom-part) .bottom-part li a {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    margin: 0 !important;
    padding: 11px 14px !important;
    border: 0 !important;
    border-radius: var(--rf-radius);
    color: #3b4250 !important;
    font-size: 16.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--rf-ease), color var(--rf-ease);
}

.left-part:has(> .bottom-part) .bottom-part li a i {
    display: inline-flex !important;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    border-radius: 9px;
    background: var(--rf-surface-alt);
    color: var(--rf-orange) !important;
    font-size: 15px;
    transition: background var(--rf-ease), color var(--rf-ease);
}

.left-part:has(> .bottom-part) .bottom-part li a:hover {
    background: var(--rf-surface-alt);
    color: var(--rf-text) !important;
}

.left-part:has(> .bottom-part) .bottom-part li a:hover i {
    background: var(--rf-orange-soft);
}

.left-part:has(> .bottom-part) .bottom-part li.active a {
    background: var(--rf-orange-soft);
    color: var(--rf-orange) !important;
}

.left-part:has(> .bottom-part) .bottom-part li.active a i {
    background: var(--rf-orange);
    color: #fff !important;
}

.left-part:has(> .bottom-part) .bottom-part li.active a::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--rf-orange);
}

/* content card */
.right-part .dash-form-box {
    background: transparent !important;
    box-shadow: none !important;
}

.right-part {
    border: 1px solid var(--rf-line) !important;
    border-radius: var(--rf-radius-lg) !important;
    background: var(--rf-surface) !important;
    box-shadow: var(--rf-shadow) !important;
}

.right-part .dash-common-heading {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rf-line) !important;
}

.right-part .dash-common-heading h1,
.right-part .dash-common-heading h2,
.right-part .dash-common-heading h3 {
    position: relative;
    margin: 0;
    padding-inline-start: 14px;
    color: var(--rf-text);
    font-size: 20px;
    font-weight: 800;
}

.right-part .dash-common-heading h1::before,
.right-part .dash-common-heading h2::before,
.right-part .dash-common-heading h3::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    inset-inline-start: 0;
    width: 4px;
    border-radius: 4px;
    background: var(--rf-orange);
}

/* tables */
.right-part .dash-table {
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    background: var(--rf-surface);
    box-shadow: none !important;
}

.right-part .dash-table .table-responsive {
    margin: 0;
}

.right-part .dash-table .table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.right-part .dash-table .table thead th {
    padding: 13px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid #ffd9cb !important;
    background: var(--rf-orange-soft) !important;
    color: var(--rf-orange-dark) !important;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.right-part .dash-table .table tbody td {
    padding: 14px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f1f5 !important;
    /* !important: responsive.css sets near-white text on these cells on phones, which made them unreadable */
    color: #3b4250 !important;
    vertical-align: middle;
}

.right-part .dash-table .table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.right-part .dash-table .table tbody tr {
    transition: background var(--rf-ease);
}

.right-part .dash-table .table tbody tr:hover td {
    background: #fcfcfd;
}

.right-part .dash-table .table img {
    border-radius: 10px;
    object-fit: cover;
}

/* "No records found" rows */
.right-part .dash-table .table tbody tr:only-child td[colspan] {
    padding: 36px 16px !important;
    color: var(--rf-muted);
    font-weight: 600;
    text-align: center;
}

/* account tables: one look for every list (Bootstrap striped/bordered variants neutralised) */
.right-part .dash-table .table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    box-shadow: none !important;
}

.right-part .dash-table .table.table-bordered > :not(caption) > * > * {
    border-width: 0 !important;
}

.right-part .dash-table .table > thead.thead-dark th,
.right-part .dash-table .table > thead.thead-light th,
.right-part .dash-table .table > thead.bg-light th {
    background: var(--rf-orange-soft) !important;
    color: var(--rf-orange-dark) !important;
}

.right-part .dash-table.card {
    padding: 0 !important;
    border: 1px solid var(--rf-line) !important;
    box-shadow: none !important;
}

/* property cell: thumbnail + title + details + status */
.rf-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 240px;
}

.rf-item__thumb {
    flex: none;
    width: 68px;
    height: 68px;
    overflow: hidden;
    border: 1px solid var(--rf-line);
    border-radius: 12px;
    background: var(--rf-surface-alt);
}

.rf-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
}

.rf-item__thumb--round {
    border-radius: 50%;
}

.rf-item__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    text-align: start;
}

.rf-item__title {
    margin: 0;
    color: var(--rf-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

a.rf-item__title:hover {
    color: var(--rf-orange);
}

.rf-item__meta {
    margin: 0;
    color: var(--rf-muted);
    font-size: 13px;
}

.rf-item__note {
    margin: 4px 0 0;
    color: #b42318;
    font-size: 12.5px;
}

.rf-item__note a {
    color: var(--rf-orange);
    font-weight: 700;
}

/* status pill (components/website/status) */
.rf-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.rf-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.rf-status--success { background: #e8f6ee; color: #14804a; }
.rf-status--warning { background: #fff5e0; color: #a15c00; }
.rf-status--danger  { background: #fdecee; color: #c21f37; }
.rf-status--neutral { background: #f1f2f6; color: #4f5566; }

/* numbers: amount + unit */
.rf-price {
    color: var(--rf-text);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.rf-price small {
    display: block;
    margin-top: 1px;
    color: var(--rf-muted);
    font-size: 12px;
    font-weight: 600;
}

.rf-strong {
    color: var(--rf-text);
    font-weight: 700;
    white-space: nowrap;
}

.rf-muted {
    color: var(--rf-muted);
    font-size: 13px;
}

.rf-id {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--rf-surface-alt);
    color: var(--rf-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

a.rf-id:hover {
    background: var(--rf-orange-soft);
    color: var(--rf-orange);
}

/* row actions */
.rf-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.rf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--rf-ease), color var(--rf-ease), transform var(--rf-ease);
}

.rf-btn:hover { transform: translateY(-1px); }
.rf-btn--success { background: #e8f6ee; border-color: #c6ead6; color: #14804a; }
.rf-btn--success:hover { background: #14804a; color: #fff; }
.rf-btn--danger { background: #fdecee; border-color: #f8cdd3; color: #c21f37; }
.rf-btn--danger:hover { background: #c21f37; color: #fff; }
.rf-btn--primary { background: var(--rf-orange); border-color: var(--rf-orange); color: #fff; box-shadow: 0 4px 12px rgba(234, 80, 28, 0.25); }
.rf-btn--primary:hover { background: var(--rf-orange-dark); color: #fff; }
.rf-btn--warning { background: #fff5e0; border-color: #fde2a8; color: #a15c00; }
.rf-btn--warning:hover { background: #d99a1a; color: #fff; }

.rf-btn.is-disabled {
    background: #f1f2f6;
    border-color: #e4e6ec;
    box-shadow: none;
    color: #9aa0ad;
    pointer-events: none;
}

/* amount and unit on one line (right-aligned amount columns) */
.rf-price--inline small {
    display: inline;
    margin: 0 0 0 2px;
}

/* tables with many columns (sent / received requests): compact so every column fits */
.right-part .dash-table .rf-table--wide thead th {
    padding: 12px 10px !important;
    font-size: 11.5px;
    white-space: normal;
    /* wrap between words only (an older rule breaks words anywhere: "AMOUN / T") */
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.right-part .dash-table .rf-table--wide tbody td {
    padding: 12px 10px !important;
}

.rf-table--wide .rf-item {
    gap: 10px;
    min-width: 200px;
}

.rf-table--wide .rf-item__thumb {
    width: 54px;
    height: 54px;
    border-radius: 10px;
}

.rf-table--wide .rf-item__title {
    font-size: 14px;
}

.rf-table--wide .rf-chip {
    padding: 4px 9px;
    font-size: 12.5px;
}

.rf-table--wide .rf-chip i {
    display: none;
}

.rf-table--wide .rf-strong {
    white-space: normal;
}

.rf-table--wide .rf-actions {
    flex-direction: column;
    align-items: stretch;
    min-width: 96px;
}

.rf-table--wide .rf-btn {
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
}

/* pager under the account tables (website/partials/account-pagination) */
.rf-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.rf-pager__summary {
    color: var(--rf-muted);
    font-size: 13.5px;
    font-weight: 600;
}

.rf-pager__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.rf-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--rf-line);
    border-radius: 10px;
    background: var(--rf-surface);
    color: #3b4250;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--rf-ease), color var(--rf-ease), border-color var(--rf-ease);
}

.rf-pager__btn {
    text-decoration: none !important;
}

.rf-pager__btn:hover:not(.is-disabled):not(.is-active) {
    border-color: #ffc9b4;
    background: var(--rf-orange-soft);
    color: var(--rf-orange);
}

.rf-pager__btn.is-active {
    border-color: var(--rf-orange);
    background: var(--rf-orange);
    box-shadow: 0 4px 12px rgba(234, 80, 28, 0.25);
    color: #fff;
}

.rf-pager__btn.is-disabled {
    opacity: 0.45;
    cursor: default;
}

.rf-pager__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--rf-orange-ring);
}

.rf-pager__gap {
    padding: 0 2px;
    color: var(--rf-muted);
    font-weight: 700;
}

html[dir="rtl"] .rf-pager__arrow i {
    transform: scaleX(-1);
}

/* meetings: info chips */
.rf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--rf-surface-alt);
    color: #3b4250;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.rf-chip i { color: var(--rf-orange); }
.rf-chip--warning { background: #fff5e0; color: #a15c00; }
.rf-chip--warning i { color: #a15c00; }
.rf-chip--muted { background: #f1f2f6; color: #6b7280; }
.rf-chip--muted i { color: #9aa0ad; }

.rf-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* summary line above a table (transactions: total earnings / amount due) */
.rf-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.rf-summary__item {
    flex: 1 1 200px;
    padding: 14px 16px;
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    background: var(--rf-surface-alt);
}

.rf-summary__label {
    display: block;
    color: var(--rf-muted);
    font-size: 13px;
    font-weight: 600;
}

.rf-summary__value {
    display: block;
    margin-top: 2px;
    color: var(--rf-text);
    font-size: 22px;
    font-weight: 800;
}

/* 6. Filters & dropdowns ---------------------------------------------------- */
/* one frame around the desktop filter instead of nested shadows */
.left-part:has(> .form-box) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.form-box.card {
    border: 1px solid var(--rf-line) !important;
    border-radius: var(--rf-radius-lg) !important;
    box-shadow: var(--rf-shadow) !important;
}

/* native selects and the custom dropdown buttons read the same */
.form-box .form-select,
.x-filter-scroll .form-select,
.x-rental-dropdown-toggle,
.x-newprops-dropdown-toggle {
    min-height: 46px;
    border: 1px solid #dfe3ea !important;
    border-radius: var(--rf-radius) !important;
    background-color: var(--rf-surface) !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    color: var(--rf-text) !important;
    font-size: 15px;
    font-weight: 600 !important;
    transition: border-color var(--rf-ease), box-shadow var(--rf-ease), background-color var(--rf-ease);
}

.form-box .form-select:hover,
.x-filter-scroll .form-select:hover,
.x-rental-dropdown-toggle:hover,
.x-newprops-dropdown-toggle:hover {
    border-color: #ffc9b4 !important;
}

.form-box .form-select:focus,
.x-filter-scroll .form-select:focus,
.x-rental-dropdown-toggle:focus-visible,
.x-newprops-dropdown-toggle:focus-visible,
.x-rental-dropdown.open .x-rental-dropdown-toggle,
.x-newprops-dropdown.open .x-newprops-dropdown-toggle {
    border-color: var(--rf-orange) !important;
    outline: none;
    box-shadow: 0 0 0 4px var(--rf-orange-ring) !important;
}

.form-box label,
.x-filter-scroll label {
    color: #3b4250;
    font-size: 13.5px;
    font-weight: 700;
}

/* number filters with a unit (price EGP, area m²): one control, unit as an attached suffix */
.form-box .input-group,
.x-filter-scroll .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.form-box .input-group .form-control,
.x-filter-scroll .input-group .form-control {
    min-height: 46px;
    border: 1px solid #dfe3ea !important;
    margin: 0 !important;
    border-radius: var(--rf-radius) 0 0 var(--rf-radius) !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    color: var(--rf-text);
    font-weight: 600;
}

.form-box .input-group .form-control:focus,
.x-filter-scroll .input-group .form-control:focus {
    border-color: var(--rf-orange) !important;
    box-shadow: 0 0 0 4px var(--rf-orange-ring) !important;
}

.form-box .input-group .input-group-text,
.x-filter-scroll .input-group .input-group-text {
    display: flex;
    align-items: center;
    align-self: stretch;
    height: auto !important;
    min-width: 56px;
    margin: 0 !important;
    justify-content: center;
    border: 1px solid #dfe3ea !important;
    border-left: 0 !important;
    border-radius: 0 var(--rf-radius) var(--rf-radius) 0 !important;
    background: var(--rf-surface-alt) !important;
    color: var(--rf-muted);
    font-size: 14px;
    font-weight: 700;
}

html[dir="rtl"] .form-box .input-group .form-control,
html[dir="rtl"] .x-filter-scroll .input-group .form-control {
    border-radius: 0 var(--rf-radius) var(--rf-radius) 0 !important;
}

html[dir="rtl"] .form-box .input-group .input-group-text,
html[dir="rtl"] .x-filter-scroll .input-group .input-group-text {
    border-left: 1px solid #dfe3ea !important;
    border-right: 0 !important;
    border-radius: var(--rf-radius) 0 0 var(--rf-radius) !important;
}

/* the custom filter pop-ups (price range, beds/guests...) */
.x-rental-dropdown-menu,
.x-newprops-dropdown-menu {
    padding: 14px !important;
    border: 1px solid var(--rf-line) !important;
    border-radius: 14px !important;
    background: var(--rf-surface) !important;
    box-shadow: var(--rf-shadow-pop) !important;
}

/* bootstrap-select and select2 lists used by some filters */
.bootstrap-select .dropdown-menu,
.select2-container--open .select2-dropdown {
    overflow: hidden;
    padding: 6px;
    border: 1px solid var(--rf-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--rf-shadow-pop) !important;
}

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu .dropdown-item,
.select2-container .select2-results__option {
    border-radius: 9px;
    font-weight: 600;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option--highlighted {
    background: var(--rf-orange-soft) !important;
    color: var(--rf-orange) !important;
}

.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu .dropdown-item.active,
.select2-container .select2-results__option[aria-selected="true"] {
    background: var(--rf-orange) !important;
    color: #fff !important;
}

/* 7. RTL -------------------------------------------------------------------- */
html[dir="rtl"] .left-part:has(> .bottom-part) .bottom-part li.active a::before {
    right: 0;
    left: auto;
    border-radius: 3px 0 0 3px;
}

html[dir="rtl"] .right-part .file-input .file-caption-name,
html[dir="rtl"] .right-part .file-input .file-caption.form-control {
    border-radius: 0 var(--rf-radius) var(--rf-radius) 0 !important;
}

html[dir="rtl"] .right-part .file-input .btn-file {
    border-radius: var(--rf-radius) 0 0 var(--rf-radius) !important;
}

/* 8. Mobile ----------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* the account menu becomes a horizontal strip of pills instead of a tall list above the page */
    .left-part:has(> .bottom-part) .top-part {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px 12px;
        padding: 16px !important;
    }

    .left-part:has(> .bottom-part) .prof-img {
        flex: 0 0 100%;
    }

    .left-part:has(> .bottom-part) .prof-img img {
        width: 72px !important;
        height: 72px !important;
    }

    .left-part:has(> .bottom-part) .top-part .btn-rap,
    .left-part:has(> .bottom-part) .top-part .btn-rap + .btn-rap {
        margin: 0;
    }

    .left-part:has(> .bottom-part) .top-part .btn-all {
        width: auto;
        min-height: 38px;
        padding: 0 16px;
    }

    .left-part:has(> .bottom-part) .bottom-part {
        padding: 10px 0 !important;
    }

    .left-part:has(> .bottom-part) .bottom-part ul {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding: 0 10px 4px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .left-part:has(> .bottom-part) .bottom-part ul::-webkit-scrollbar {
        display: none;
    }

    .left-part:has(> .bottom-part) .bottom-part li {
        flex: none;
        scroll-snap-align: start;
    }

    .left-part:has(> .bottom-part) .bottom-part li a {
        min-height: 40px;
        padding: 6px 14px 6px 6px !important;
        border: 1px solid var(--rf-line) !important;
        border-radius: 999px;
        background: var(--rf-surface);
        font-size: 15px;
        white-space: nowrap;
    }

    html[dir="rtl"] .left-part:has(> .bottom-part) .bottom-part li a {
        padding: 6px 6px 6px 14px !important;
    }

    .left-part:has(> .bottom-part) .bottom-part li a i {
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .left-part:has(> .bottom-part) .bottom-part li.active a {
        border-color: #ffc9b4 !important;
    }

    .left-part:has(> .bottom-part) .bottom-part li.active a::before {
        display: none;
    }

    .right-part .dash-table .table thead th,
    .right-part .dash-table .table tbody td {
        padding: 12px !important;
    }

    /* file picker stays one line: caption + Browse */
    .right-part .file-input .file-caption-main {
        flex-wrap: nowrap;
    }

    .right-part .file-input .btn-file {
        padding: 0 12px;
        white-space: nowrap;
    }
}

@media (max-width: 575.98px) {
    /* login.css forces every field to half width (flex: 0 0 calc(50% - 10px) !important); stack them on phones */
    .right-part .groupi {
        flex: 0 0 100% !important;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #header.renzo-site-header .dropdown-menu {
        animation: none;
    }

    .btn-all:hover,
    .custom-btn:hover,
    .post_btn:hover,
    .round-btn:hover {
        transform: none;
    }
}