/* ==========================================
   REALTOR KENYA – THEME  (realtors.co.ke)
   Font : Plus Jakarta Sans (Google Fonts)
   ========================================== */

/* Plus Jakarta Sans is self-hosted via css/import.css → lib/fonts/fonts.css */

/* ── Colour palette (exact from realtors.co.ke) ─────────── */
:root {
    --rt-teal:          #F96302;          /* primary action / brand  */
    --rt-teal-dark:     #e05500;          /* hover                   */
    --rt-teal-deep:     #b84500;          /* active / deep text      */
    --rt-teal-light:    #fff5ee;          /* very-light tint bg      */
    --rt-teal-glass:    rgba(249,99,2,0.08);
    --rt-teal-border:   rgba(249,99,2,0.18);
    --rt-teal-mid:      rgba(249,99,2,0.12);

    --rt-navy:          #154279;          /* footer / dark sections  */
    --rt-navy-deep:     #0e2c51;
    --rt-navy-mid:      #1d4e93;

    --rt-white:         #ffffff;
    --rt-off-white:     #f9f9f9;          /* alt section bg          */
    --rt-gray-light:    #f7f8f8;
    --rt-gray-border:   #dce0e0;
    --rt-gray:          #666666;
    --rt-gray-dark:     #282828;
    --rt-dark:          #222222;

    --rt-shadow:        0 4px 8px  rgba(0,0,0,.10);
    --rt-shadow-hover:  0 8px 24px rgba(0,0,0,.14);
    --rt-shadow-card:   0 4px 12px rgba(0,0,0,.10);

    --rt-radius:        8px;
    --rt-radius-lg:     16px;
    --rt-transition:    0.22s ease;
    --rt-ease:          cubic-bezier(0.25, 1, 0.5, 1);

    /* hero overlay (navy → orange wash) */
    --rt-hero-overlay: linear-gradient(
        120deg,
        rgba(21,66,121,0.90) 0%,
        rgba(21,66,121,0.70) 55%,
        rgba(249,99,2,0.18) 100%
    );
}

/* ==========================================
   BASE
   ========================================== */
*, *::before, *::after { box-sizing: border-box; }

body.realtor-public {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--rt-gray-dark);
    background: var(--rt-white);
    margin: 0;
    padding: 0;
    line-height: 1.65;
}

body.realtor-public h1,
body.realtor-public h2,
body.realtor-public h3,
body.realtor-public h4,
body.realtor-public h5 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--rt-gray-dark);
}

/* ==========================================
   NAVBAR
   ========================================== */
.rt-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 20px 0;
    transition: background var(--rt-transition), padding var(--rt-transition), box-shadow var(--rt-transition);
}

.rt-navbar.scrolled {
    background: var(--rt-white);
    padding: 12px 0;
    box-shadow: 0 2px 16px rgba(0,0,0,.10);
}

.rt-navbar .rt-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.rt-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.rt-logo-icon {
    width: 38px; height: 38px;
    background: var(--rt-teal);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rt-logo-icon img {
    width: 24px; height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.rt-logo-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--rt-white);
}

.rt-logo-text span { color: var(--rt-teal); }

/* scrolled logo text changes to dark */
.rt-navbar.scrolled .rt-logo-text { color: var(--rt-gray-dark); }
.rt-navbar.scrolled .rt-logo-text span { color: var(--rt-teal); }

/* Nav links */
.rt-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0; padding: 0;
}

.rt-nav-links li a {
    color: rgba(255,255,255,.9);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: .2px;
    transition: color var(--rt-transition);
}

.rt-navbar.scrolled .rt-nav-links li a {
    color: var(--rt-gray-dark);
}

.rt-nav-links li a:hover { color: var(--rt-teal) !important; }

.rt-nav-register {
    background: transparent !important;
    color: var(--rt-teal) !important;
    padding: 8px 20px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    border: 1.5px solid var(--rt-teal) !important;
    transition: background var(--rt-transition), color var(--rt-transition), transform var(--rt-transition) !important;
}

.rt-nav-register:hover {
    background: var(--rt-teal) !important;
    color: var(--rt-white) !important;
    transform: translateY(-1px);
}

.rt-nav-login {
    background: var(--rt-teal) !important;
    color: var(--rt-white) !important;
    padding: 10px 24px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: background var(--rt-transition), transform var(--rt-transition) !important;
}

.rt-nav-login:hover {
    background: var(--rt-teal-dark) !important;
    color: var(--rt-white) !important;
    transform: translateY(-1px);
}

.rt-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.rt-nav-toggle span {
    display: block;
    width: 26px; height: 2px;
    background: var(--rt-white);
    margin: 5px 0;
    transition: var(--rt-transition);
}

.rt-navbar.scrolled .rt-nav-toggle span { background: var(--rt-gray-dark); }

/* ==========================================
   HERO
   ========================================== */
.rt-hero {
    position: relative;
    min-height: 68vh;
    display: flex;
    align-items: center;
    background-color: var(--rt-navy);
    overflow: hidden;
}

.rt-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('/images/login1.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}

.rt-hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--rt-hero-overlay);
}

.rt-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 0 56px;
}

.rt-hero-badge {
    display: inline-block;
    background: var(--rt-teal);
    color: var(--rt-white);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.rt-hero-title {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 800;
    color: var(--rt-white);
    max-width: 620px;
    margin: 0 0 12px;
    line-height: 1.15;
}

.rt-hero-title em {
    color: var(--rt-teal);
    font-style: normal;
}

/* The base `body.realtor-public h1` rule (specificity 0,1,2) outranks the bare
   `.rt-hero-title` class above (0,1,0), so the hero headline was being painted
   in dark body-text colour against the navy hero — only the <em> span stayed
   readable. Match that specificity to restore the intended white. */
body.realtor-public .rt-hero-title { color: var(--rt-white); }

.rt-hero-subtitle {
    font-size: 0.93rem;
    color: rgba(255,255,255,.78);
    max-width: 480px;
    margin: 0 0 28px;
    font-weight: 300;
    line-height: 1.65;
}

/* Search Bar */
.rt-search-box {
    background: var(--rt-white);
    border-radius: var(--rt-radius-lg);
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 820px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.rt-search-field,
.rt-search-select {
    flex: 1;
    min-width: 160px;
    padding: 14px 18px;
    border: 1.5px solid var(--rt-gray-border);
    border-radius: var(--rt-radius);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    background: var(--rt-white);
    color: var(--rt-gray-dark);
    outline: none;
    transition: border-color var(--rt-transition);
}

.rt-search-field:focus,
.rt-search-select:focus {
    border-color: var(--rt-teal);
    box-shadow: 0 0 0 3px rgba(249,99,2,.12);
}

.rt-search-field::placeholder { color: var(--rt-gray); }

.rt-search-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.rt-search-btn {
    background: var(--rt-teal);
    color: var(--rt-white);
    border: none;
    border-radius: var(--rt-radius);
    padding: 14px 32px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--rt-transition), transform var(--rt-transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rt-search-btn:hover {
    background: var(--rt-teal-dark);
    transform: translateY(-1px);
}

/* Hero quick-stats */
.rt-hero-stats {
    display: flex;
    gap: 36px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.rt-hero-stat strong {
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--rt-teal);
    line-height: 1;
    margin-bottom: 3px;
}

.rt-hero-stat span {
    font-size: 0.78rem;
    color: rgba(255,255,255,.65);
    font-weight: 400;
    letter-spacing: .4px;
}

/* ==========================================
   SECTION FOUNDATIONS
   ========================================== */
.rt-section { padding: 90px 0; }

.rt-section-dark {
    background: var(--rt-navy);
    color: var(--rt-white);
}

.rt-section-gray { background: var(--rt-off-white); }
.rt-section-teal { background: var(--rt-teal); color: var(--rt-white); }

.rt-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.rt-section-head { margin-bottom: 48px; }

.rt-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--rt-teal);
    display: block;
    margin-bottom: 10px;
}

.rt-section-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 14px;
    color: inherit;
}

.rt-section-sub {
    font-size: 0.97rem;
    color: var(--rt-gray);
    max-width: 520px;
    margin: 0;
    line-height: 1.75;
    font-weight: 400;
}

.rt-section-dark .rt-section-label { color: var(--rt-teal); }
.rt-section-dark .rt-section-title { color: var(--rt-white); }
.rt-section-dark .rt-section-sub   { color: rgba(255,255,255,.62); }

.rt-section-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
    flex-wrap: wrap;
    gap: 16px;
}

/* ==========================================
   PROPERTY CARDS
   ========================================== */
.rt-property-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.rt-property-card {
    background: var(--rt-white);
    border-radius: var(--rt-radius-lg);
    overflow: hidden;
    box-shadow: var(--rt-shadow-card);
    border: 1px solid var(--rt-gray-border);
    transition: transform var(--rt-transition), box-shadow var(--rt-transition);
}

.rt-property-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--rt-shadow-hover);
}

.rt-card-img-wrap {
    position: relative;
    height: 210px;
    overflow: hidden;
}

.rt-card-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    background-color: var(--rt-gray-light);
}

.rt-property-card:hover .rt-card-img-wrap img { transform: scale(1.06); }

.rt-card-badge {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--rt-teal);
    color: var(--rt-white);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
}

.rt-card-badge.rt-badge-rent {
    background: var(--rt-navy);
}

.rt-card-price {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 40px 14px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: var(--rt-white);
    font-size: 1.3rem;
    font-weight: 700;
}

.rt-card-body { padding: 18px 20px; }

.rt-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rt-gray-dark);
    margin: 0 0 8px;
    line-height: 1.35;
}

.rt-card-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.83rem;
    color: var(--rt-gray);
    margin-bottom: 14px;
}

.rt-card-location i { color: var(--rt-teal); }

.rt-card-specs {
    display: flex;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rt-gray-light);
}

.rt-card-spec {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--rt-gray);
}

.rt-card-spec i { color: var(--rt-teal); font-size: .85rem; }

/* ==========================================
   FEATURE CARDS  (Why Choose Us)
   ========================================== */
.rt-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.rt-feature-card {
    padding: 32px 28px;
    background: var(--rt-white);
    border-radius: var(--rt-radius-lg);
    border: 1px solid var(--rt-teal-border);
    transition: box-shadow var(--rt-transition), transform var(--rt-transition);
}

.rt-feature-card:hover {
    box-shadow: var(--rt-shadow-hover);
    transform: translateY(-4px);
}

.rt-feature-icon {
    width: 54px; height: 54px;
    background: var(--rt-teal-glass);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.rt-feature-icon i { font-size: 1.4rem; color: var(--rt-teal); }

.rt-feature-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--rt-gray-dark);
    margin: 0 0 10px;
}

.rt-feature-desc {
    font-size: 0.88rem;
    color: var(--rt-gray);
    line-height: 1.75;
    margin: 0;
}

/* ==========================================
   STATS  (dark-navy section)
   ========================================== */
.rt-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.rt-stat-item {
    padding: 28px 20px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--rt-radius-lg);
    transition: background var(--rt-transition);
}

.rt-stat-item:hover { background: rgba(255,255,255,.10); }

.rt-stat-item strong {
    display: block;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--rt-teal);
    line-height: 1;
    margin-bottom: 8px;
}

.rt-stat-item span {
    font-size: 0.84rem;
    color: rgba(255,255,255,.60);
    letter-spacing: .6px;
    text-transform: uppercase;
    font-weight: 500;
}

/* ==========================================
   CTA
   ========================================== */
.rt-cta {
    background: var(--rt-teal);
    padding: 84px 0;
    text-align: center;
}

.rt-cta-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--rt-white);
    margin: 0 0 14px;
}

.rt-cta-sub {
    font-size: 1rem;
    color: rgba(255,255,255,.82);
    margin: 0 0 40px;
    line-height: 1.7;
}

.rt-cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Buttons ── */
.rt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--rt-transition);
}

.rt-btn-dark {
    background: var(--rt-navy);
    color: var(--rt-white);
}

.rt-btn-dark:hover {
    background: var(--rt-navy-deep);
    color: var(--rt-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(21,66,121,.35);
}

.rt-btn-outline {
    background: transparent;
    color: var(--rt-white);
    border-color: rgba(255,255,255,.7);
}

.rt-btn-outline:hover {
    background: var(--rt-white);
    color: var(--rt-teal);
    border-color: var(--rt-white);
    transform: translateY(-2px);
}

/* ==========================================
   FOOTER
   ========================================== */
.rt-footer {
    background: var(--rt-navy);
    color: var(--rt-white);
    padding: 72px 0 0;
}

.rt-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.6fr;
    gap: 48px;
    padding-bottom: 52px;
}

.rt-footer-brand-desc {
    font-size: 0.88rem;
    color: rgba(255,255,255,.55);
    line-height: 1.75;
    margin: 16px 0 24px;
}

.rt-footer-social {
    display: flex;
    gap: 10px;
}

.rt-footer-social a {
    width: 36px; height: 36px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.6);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background var(--rt-transition), color var(--rt-transition);
}

.rt-footer-social a:hover {
    background: var(--rt-teal);
    color: var(--rt-white);
}

.rt-footer-col-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--rt-teal);
    margin: 0 0 20px;
}

.rt-footer ul {
    list-style: none;
    margin: 0; padding: 0;
}

.rt-footer ul li { margin-bottom: 10px; }

.rt-footer ul li a {
    color: rgba(255,255,255,.55);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color var(--rt-transition);
}

.rt-footer ul li a:hover { color: var(--rt-teal); }

.rt-footer-contact-list { list-style: none; margin: 0; padding: 0; }

.rt-footer-contact-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: rgba(255,255,255,.55);
    font-size: 0.88rem;
    margin-bottom: 14px;
    line-height: 1.5;
}

.rt-footer-contact-list li i {
    color: var(--rt-teal);
    margin-top: 2px;
    flex-shrink: 0;
    width: 14px;
}

.rt-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.rt-footer-bottom p {
    font-size: 0.82rem;
    color: rgba(255,255,255,.35);
    margin: 0;
}

/* ==========================================
   AUTH PAGES — Single Centered Card
   (used by Login, VerifyOtp, Setup, AccessDenied)
   ========================================== */
body.realtor-login {
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin: 0; padding: 0;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at top left,  rgba(249,99,2,.10) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(249,99,2,.08) 0%, transparent 55%),
        linear-gradient(160deg, var(--rt-navy-deep) 0%, var(--rt-navy) 50%, var(--rt-navy-mid) 100%);
    background-attachment: fixed;
    color: var(--rt-gray-dark);
}

/* Subtle dotted overlay so the navy background has texture */
body.realtor-login::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.rt-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    position: relative;
    z-index: 1;
}

.rt-login-form-wrap {
    width: 100%;
    max-width: 460px;
    background: var(--rt-white);
    border-radius: 18px;
    padding: 48px 44px 36px;
    box-shadow:
        0 24px 60px rgba(0,0,0,.30),
        0 0 0 1px rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    position: relative;
}

.rt-login-heading {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--rt-gray-dark);
    margin: 0 0 8px;
    text-align: center;
}

.rt-login-sub {
    font-size: 0.88rem;
    color: var(--rt-gray);
    margin: 0 0 28px;
    line-height: 1.6;
    text-align: center;
}

.rt-form-group { margin-bottom: 20px; }

.rt-form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rt-gray-dark);
    margin-bottom: 8px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.rt-form-input {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid var(--rt-gray-border);
    border-radius: var(--rt-radius);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.92rem;
    color: var(--rt-gray-dark);
    background: var(--rt-white);
    outline: none;
    transition: border-color var(--rt-transition), box-shadow var(--rt-transition);
}

.rt-form-input:focus {
    border-color: var(--rt-teal);
    box-shadow: 0 0 0 3px rgba(249,99,2,.14);
}

.rt-form-input::placeholder { color: #aaa; }

.rt-form-error {
    display: block;
    font-size: 0.78rem;
    color: #dc3545;
    margin-top: 5px;
}

.rt-login-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background: var(--rt-teal);
    color: var(--rt-white);
    border: none;
    border-radius: var(--rt-radius);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.97rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--rt-transition), transform var(--rt-transition), box-shadow var(--rt-transition);
    margin-top: 8px;
    letter-spacing: .2px;
}

.rt-login-btn:hover {
    background: var(--rt-teal-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(249,99,2,.30);
}

.rt-login-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.rt-login-disclaimer {
    font-size: 0.74rem;
    color: var(--rt-gray);
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--rt-gray-light);
    text-align: center;
    line-height: 1.6;
}
.rt-login-disclaimer i { color: var(--rt-teal); margin-right: 4px; }

.rt-login-alerts { margin-bottom: 18px; }

/* ==========================================
   OTP 6-DIGIT INPUT GRID
   ========================================== */
.rt-otp-grid {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: 6px 0 4px;
}
.rt-otp-cell {
    flex: 1;
    height: 58px;
    text-align: center;
    font-family: 'Plus Jakarta Sans', 'Courier New', monospace;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--rt-gray-dark);
    background: var(--rt-white);
    border: 1.5px solid var(--rt-gray-border);
    border-radius: 10px;
    outline: none;
    transition: border-color var(--rt-transition), box-shadow var(--rt-transition), background var(--rt-transition);
    min-width: 0;
    padding: 0;
}
.rt-otp-cell:focus {
    border-color: var(--rt-teal);
    box-shadow: 0 0 0 3px rgba(249,99,2,.18);
    background: var(--rt-teal-light);
}
.rt-otp-cell.is-filled {
    border-color: var(--rt-teal);
    color: var(--rt-teal);
}
.rt-otp-cell.is-error {
    border-color: #dc3545;
    color: #dc3545;
    animation: rtOtpShake .35s ease;
}
@keyframes rtOtpShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.rt-otp-target-email {
    background: var(--rt-teal-glass);
    border: 1px solid var(--rt-teal-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .82rem;
    color: var(--rt-gray-dark);
}
.rt-otp-target-email i { color: var(--rt-teal); font-size: 1rem; flex-shrink: 0; }
.rt-otp-target-email strong { color: var(--rt-teal-deep); font-weight: 700; }

.rt-otp-resend-row {
    text-align: center;
    margin-top: 18px;
    font-size: .82rem;
    color: var(--rt-gray);
}
.rt-otp-resend-row .rt-otp-countdown {
    color: var(--rt-teal-deep);
    font-weight: 700;
}
.rt-otp-resend-btn {
    background: none;
    border: none;
    color: var(--rt-teal);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--rt-transition), color var(--rt-transition);
}
.rt-otp-resend-btn:hover { background: var(--rt-teal-glass); color: var(--rt-teal-dark); }
.rt-otp-resend-btn:disabled { opacity: .6; cursor: not-allowed; }

.rt-otp-security {
    margin-top: 20px;
    padding: 14px 16px;
    background: #fff8e6;
    border-left: 3px solid #f39c12;
    border-radius: 8px;
    font-size: .76rem;
    color: #92660b;
    line-height: 1.6;
}
.rt-otp-security i { color: #f39c12; margin-right: 6px; }
.rt-otp-security strong { color: #6b4a04; font-weight: 800; }

/* ==========================================
   ADMIN LAYOUT  (rta-*)
   ========================================== */
.rta-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--rt-gray-light);
    margin: 0;
    /* override leftover Bootstrap template rule (body{padding-top:50px}) that
       left a white band above the fixed topbar */
    padding: 0 !important;
    color: var(--rt-gray-dark);
}

.rta-wrap { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.rta-sidebar {
    width: 240px;
    background: var(--rt-navy);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 200;
    transition: transform var(--rt-transition);
    overflow: hidden;
}

.rta-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}

.rta-sidebar-logo {
    padding: 22px 20px;
    border-bottom: 1px solid rgba(249,99,2,.12);
    flex-shrink: 0;
}

.rta-sidebar-logo .rt-logo-text { color: var(--rt-white); font-size: 1.15rem; }

/* Portal identity caption under the logo (Admin / Tenant / Agent / Proprietor).
   Colour follows --rt-accent where a portal theme sets it, brand orange otherwise. */
.rta-portal-label {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rt-accent, var(--rt-teal));
    padding: 4px 0 0 2px;
}

/* Nav */
.rta-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 0 8px;
    overflow-y: auto;
}

.rta-nav-section { flex: 1; }

.rta-nav-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.28);
    padding: 8px 20px 6px;
}

.rta-nav-list { list-style: none; margin: 0; padding: 0; }

.rta-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 20px;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background var(--rt-transition), color var(--rt-transition);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.rta-nav-link i {
    width: 18px;
    text-align: center;
    color: var(--rt-teal);
    font-size: 0.92rem;
    flex-shrink: 0;
}

.rta-nav-link:hover,
.rta-nav-link.active {
    color: var(--rt-teal);
    background: rgba(249,99,2,.08);
    text-decoration: none;
}

.rta-nav-arrow {
    margin-left: auto;
    font-size: 0.72rem;
    transition: transform var(--rt-transition);
    color: rgba(255,255,255,.28) !important;
    width: auto !important;
}

.rta-nav-group.active > .rta-nav-parent { color: var(--rt-teal); background: rgba(249,99,2,.08); }
.rta-nav-group.active > .rta-nav-parent .rta-nav-arrow { transform: rotate(180deg); }

/* Sub-menu */
.rta-nav-sub { list-style: none; margin: 0; padding: 0; display: none; background: rgba(0,0,0,.18); }
.rta-nav-group.active .rta-nav-sub { display: block; }

.rta-nav-sub-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 9px 48px;
    color: rgba(255,255,255,.50);
    text-decoration: none;
    font-size: 0.83rem;
    transition: color var(--rt-transition), background var(--rt-transition);
}

.rta-nav-sub-link i { font-size: 0.5rem; color: rgba(255,255,255,.25); }
.rta-nav-sub-link:hover { color: var(--rt-teal); background: rgba(249,99,2,.06); text-decoration: none; }

/* Logout */
.rta-nav-bottom {
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 8px;
    margin-top: auto;
    flex: 0;
}

.rta-nav-logout { color: rgba(255,255,255,.45) !important; }
.rta-nav-logout i { color: rgba(255,255,255,.35) !important; }
.rta-nav-logout:hover { color: #ff6b6b !important; background: rgba(255,107,107,.08) !important; }
.rta-nav-logout:hover i { color: #ff6b6b !important; }

/* ── Main area ── */
.rta-main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

/* ── Topbar ── */
.rta-topbar {
    height: 60px;
    background: linear-gradient(90deg, var(--rt-navy-deep) 0%, var(--rt-navy) 60%, var(--rt-navy-mid) 100%);
    border-bottom: 2px solid var(--rt-teal);
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 8px;
    box-shadow: 0 2px 12px rgba(14,44,81,.28);
}

.rta-sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.75);
    font-size: 1.1rem;
    padding: 7px 9px;
    border-radius: 6px;
    transition: color var(--rt-transition), background var(--rt-transition);
    display: none;
}

.rta-sidebar-toggle:hover { color: var(--rt-teal); background: rgba(255,255,255,.10); }

.rta-topbar-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.rta-topbar-client {
    font-size: 0.82rem;
    color: rgba(255,255,255,.65);
    font-weight: 500;
    margin-right: 12px;
    padding-right: 12px;
    border-right: 1px solid rgba(255,255,255,.18);
}

.rta-topbar-icon {
    position: relative;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.78);
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    transition: color var(--rt-transition), background var(--rt-transition);
}

.rta-topbar-icon:hover { color: var(--rt-teal); background: rgba(255,255,255,.10); }

.rta-badge {
    position: absolute;
    top: 4px; right: 4px;
    background: var(--rt-teal);
    color: var(--rt-white);
    font-size: 0.58rem;
    font-weight: 700;
    min-width: 15px; height: 15px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--rt-navy);
}

/* User dropdown */
.rta-user-menu { position: relative; margin-left: 8px; }

.rta-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 8px;
    padding: 7px 14px;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    color: rgba(255,255,255,.92);
    transition: border-color var(--rt-transition), box-shadow var(--rt-transition), background var(--rt-transition);
}

.rta-user-btn:hover { border-color: var(--rt-teal); background: rgba(255,255,255,.14); box-shadow: 0 0 0 2px rgba(249,99,2,.20); }
.rta-user-btn > i:first-child { color: var(--rt-teal); font-size: 1.1rem; }
.rta-user-btn strong { color: var(--rt-white); font-weight: 700; }
.rta-user-btn .fa-angle-down { font-size: 0.72rem; color: rgba(255,255,255,.65); margin-left: 2px; }

.rta-user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--rt-white);
    border: 1px solid var(--rt-gray-border);
    border-radius: var(--rt-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 192px;
    z-index: 500;
    display: none;
    overflow: hidden;
}

.rta-user-dropdown.open { display: block; }

.rta-user-drop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: var(--rt-gray);
    text-decoration: none;
    font-size: 0.87rem;
    transition: background var(--rt-transition), color var(--rt-transition);
}

.rta-user-drop-item:hover { background: var(--rt-teal-light); color: var(--rt-teal); text-decoration: none; }
.rta-user-drop-item i { width: 15px; text-align: center; }

.rta-user-drop-divider { border-top: 1px solid var(--rt-gray-light); margin: 4px 0; }

.rta-user-drop-logout { color: #dc3545; }
.rta-user-drop-logout:hover { background: #fff5f5 !important; color: #dc3545 !important; }

/* ── Content & Footer ── */
.rta-content { flex: 1; padding: 28px 28px 20px; }

.rta-footer {
    padding: 14px 28px;
    text-align: right;
    font-size: 0.8rem;
    color: var(--rt-gray);
    border-top: 1px solid var(--rt-gray-border);
    background: var(--rt-white);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Admin dashboard cards */
.rt-admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 28px;
}

.rt-admin-card {
    background: var(--rt-white);
    border-radius: var(--rt-radius-lg);
    padding: 26px;
    box-shadow: var(--rt-shadow);
    border-left: 4px solid var(--rt-teal);
    transition: transform var(--rt-transition);
}

.rt-admin-card:hover { transform: translateY(-3px); }

.rt-admin-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.rt-admin-card-icon {
    width: 46px; height: 46px;
    background: var(--rt-teal-glass);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rt-admin-card-icon i { font-size: 1.25rem; color: var(--rt-teal); }

.rt-admin-card-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--rt-gray-dark);
    line-height: 1;
    margin: 0 0 4px;
}

.rt-admin-card-label {
    font-size: 0.82rem;
    color: var(--rt-gray);
    margin: 0;
}

.rt-admin-card-trend {
    font-size: 0.78rem;
    color: #28a745;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Sessions table */
.rt-sessions-table {
    background: var(--rt-white);
    border-radius: var(--rt-radius-lg);
    box-shadow: var(--rt-shadow);
    overflow: hidden;
    border: 1px solid var(--rt-gray-border);
}

.rt-sessions-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--rt-gray-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rt-sessions-header h5 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--rt-gray-dark);
    margin: 0;
}

.rt-sessions-table .table {
    margin-bottom: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
}

.rt-sessions-table .table thead th {
    background: var(--rt-off-white);
    color: var(--rt-gray-dark);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    border: none;
    padding: 12px 16px;
}

.rt-sessions-table .table td {
    padding: 12px 16px;
    border-color: var(--rt-gray-light);
    vertical-align: middle;
    color: var(--rt-gray);
}

/* ==========================================
   DATATABLES — scroll frame (shared across admin tables)
   Applies when a DataTable is initialised with scrollX/scrollY.
   ========================================== */
.dataTables_scroll { border: 1px solid var(--rt-gray-border); border-radius: 10px; overflow: hidden; }
.dataTables_scrollHead { background: var(--rt-off-white); }
.dataTables_scrollHead table { margin-bottom: 0 !important; }
.dataTables_scrollBody table { margin-bottom: 0 !important; border-top: 0; }
.dataTables_scrollBody { scrollbar-width: thin; scrollbar-color: #c2cbd6 transparent; }
.dataTables_scrollBody::-webkit-scrollbar { width: 9px; height: 9px; }
.dataTables_scrollBody::-webkit-scrollbar-thumb { background: #c2cbd6; border-radius: 6px; }
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover { background: var(--rt-navy); }
.dataTables_scrollBody::-webkit-scrollbar-track { background: transparent; }

/* Page title */
.page-title-box { padding: 20px 0 !important; }

.page-title-box h4 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: var(--rt-gray-dark) !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
}

/* ==========================================
   HERO SEARCH TABS
   ========================================== */
.rt-search-tabs {
    display: flex;
    margin-bottom: 16px;
    background: rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 4px;
    width: fit-content;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
}

.rt-search-tab {
    padding: 9px 28px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,.65);
    border-radius: 5px;
    cursor: pointer;
    transition: background var(--rt-transition), color var(--rt-transition);
    border: none;
    background: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .3px;
}

.rt-search-tab.active { background: var(--rt-teal); color: var(--rt-white); }

/* Scroll indicator */
.rt-scroll-indicator {
    position: absolute;
    bottom: 36px; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: rgba(255,255,255,.45);
    font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase;
    text-decoration: none;
    animation: rtBounce 2.2s ease-in-out infinite;
}
.rt-scroll-indicator i { font-size: 1rem; }
@keyframes rtBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: .55; }
    50%       { transform: translateX(-50%) translateY(8px); opacity: .90; }
}

/* ==========================================
   CARD IMPROVEMENTS
   ========================================== */
.rt-card-overlay {
    position: absolute; inset: 0;
    background: rgba(21,66,121,.72);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .28s ease;
    z-index: 1;
}
.rt-property-card:hover .rt-card-overlay { opacity: 1; }

.rt-card-overlay-btn {
    padding: 11px 24px;
    background: var(--rt-teal); color: var(--rt-white);
    border-radius: 6px;
    font-size: 0.86rem; font-weight: 600;
    text-decoration: none;
    display: flex; align-items: center; gap: 7px;
    transition: background var(--rt-transition), transform var(--rt-transition);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.rt-card-overlay-btn:hover { background: var(--rt-teal-dark); transform: translateY(-2px); color: var(--rt-white); text-decoration: none; }

.rt-card-fav {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px;
    background: rgba(255,255,255,.92);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none;
    color: #bbb; font-size: 0.82rem;
    transition: color var(--rt-transition), transform var(--rt-transition), background var(--rt-transition);
    z-index: 2;
}
.rt-card-fav:hover { color: #e74c3c; transform: scale(1.12); }
.rt-card-fav.active { color: #e74c3c; }

.rt-card-category {
    position: absolute; bottom: 12px; right: 12px;
    background: rgba(0,0,0,.52);
    color: var(--rt-white);
    font-size: 0.62rem; font-weight: 600; letter-spacing: .8px;
    text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* ==========================================
   HOW IT WORKS
   ========================================== */
.rt-how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    position: relative;
}

.rt-how-grid::before {
    content: '';
    position: absolute;
    top: 36px; left: calc(16.66% + 28px); right: calc(16.66% + 28px);
    height: 2px;
    background: linear-gradient(90deg, var(--rt-teal-border), var(--rt-teal-border));
}

.rt-how-step { text-align: center; position: relative; z-index: 1; }

.rt-how-number {
    width: 72px; height: 72px;
    background: var(--rt-teal); color: var(--rt-white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800;
    margin: 0 auto 24px;
    box-shadow: 0 8px 28px rgba(249,99,2,.28);
    border: 4px solid var(--rt-white);
    outline: 2px solid var(--rt-teal-border);
    transition: transform var(--rt-transition), box-shadow var(--rt-transition);
}

.rt-how-step:hover .rt-how-number {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(249,99,2,.36);
}

.rt-how-title { font-size: 1.08rem; font-weight: 700; color: var(--rt-gray-dark); margin: 0 0 10px; }
.rt-how-desc  { font-size: 0.88rem; color: var(--rt-gray); line-height: 1.72; margin: 0; }

/* ==========================================
   TENANT GUIDE
   ========================================== */
.rt-tenant-guide {
    background: var(--rt-white);
}

.rt-tenant-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 32px;
}

.rt-tenant-grid .rt-how-step {
    grid-column: span 2;
}

/* Centre the last two orphan cards in the 5-step grid */
.rt-tenant-grid .rt-how-step:nth-child(4) { grid-column: 2 / span 2; }
.rt-tenant-grid .rt-how-step:nth-child(5) { grid-column: 4 / span 2; }

/* Override the single connector line — tenant grid is 2 rows, no connector */
.rt-tenant-grid::before { display: none; }

/* Differentiate tenant step numbers with a navy ring */
.rt-tenant-grid .rt-how-number {
    background: var(--rt-navy);
    box-shadow: 0 8px 28px rgba(21,66,121,.22);
    outline-color: rgba(21,66,121,.14);
}

.rt-tenant-grid .rt-how-step:hover .rt-how-number {
    box-shadow: 0 14px 36px rgba(21,66,121,.32);
}

.rt-tenant-guide-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 52px;
    flex-wrap: wrap;
}

.rt-btn-teal {
    background: var(--rt-teal);
    color: var(--rt-white);
    border: 2px solid var(--rt-teal);
}

.rt-btn-teal:hover {
    background: var(--rt-teal-dark);
    border-color: var(--rt-teal-dark);
    color: var(--rt-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249,99,2,.35);
}

.rt-btn-outline-dark {
    background: transparent;
    color: var(--rt-navy);
    border: 2px solid var(--rt-navy);
}

.rt-btn-outline-dark:hover {
    background: var(--rt-navy);
    color: var(--rt-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(21,66,121,.25);
}

/* ==========================================
   TESTIMONIALS
   ========================================== */
.rt-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.rt-testimonial-card {
    background: var(--rt-white);
    border-radius: var(--rt-radius-lg);
    padding: 28px 28px 24px;
    border: 1px solid var(--rt-gray-border);
    border-left: 3px solid var(--rt-teal);
    box-shadow: var(--rt-shadow);
    transition: transform var(--rt-transition), box-shadow var(--rt-transition);
    position: relative;
}

.rt-testimonial-card::before {
    content: '\201C';
    font-size: 4.5rem; line-height: 1;
    color: var(--rt-teal-glass);
    font-family: Georgia, serif;
    position: absolute;
    top: 16px; left: 20px;
    font-weight: 700;
    pointer-events: none;
}

.rt-testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--rt-shadow-hover); }

.rt-testimonial-stars { color: #f39c12; font-size: 0.82rem; margin-bottom: 12px; letter-spacing: 2px; }

.rt-testimonial-text {
    font-size: 0.92rem; color: var(--rt-gray);
    line-height: 1.78; font-style: italic;
    margin: 0 0 20px;
    padding-top: 24px;
}

.rt-testimonial-author { display: flex; align-items: center; gap: 12px; }

.rt-testimonial-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--rt-teal-glass);
    border: 2px solid var(--rt-teal-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; font-weight: 700;
    color: var(--rt-teal); flex-shrink: 0;
}

.rt-testimonial-name { font-size: 0.9rem; font-weight: 700; color: var(--rt-gray-dark); margin: 0; }
.rt-testimonial-role { font-size: 0.78rem; color: var(--rt-gray); margin: 2px 0 0; }

/* ==========================================
   SCROLL REVEAL
   ========================================== */
.rt-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s ease;
}
.rt-reveal.rt-revealed { opacity: 1; transform: none; }
.rt-reveal-d1 { transition-delay: .10s; }
.rt-reveal-d2 { transition-delay: .20s; }
.rt-reveal-d3 { transition-delay: .30s; }
.rt-reveal-d4 { transition-delay: .40s; }
.rt-reveal-d5 { transition-delay: .50s; }
.rt-reveal-d6 { transition-delay: .60s; }

/* ==========================================
   LOGIN IMPROVEMENTS
   ========================================== */
.rt-pwd-wrap { position: relative; }
.rt-pwd-wrap .rt-form-input { padding-right: 46px; }
.rt-pwd-toggle {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--rt-gray); font-size: 0.88rem; padding: 4px;
    transition: color var(--rt-transition);
}
.rt-pwd-toggle:hover { color: var(--rt-teal); }

.rt-form-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.rt-form-row .rt-form-label { margin-bottom: 0; }

.rt-form-forgot {
    font-size: 0.78rem; color: var(--rt-teal);
    text-decoration: none; font-weight: 500;
    transition: color var(--rt-transition);
}
.rt-form-forgot:hover { color: var(--rt-teal-dark); text-decoration: underline; }

.rt-back-home {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; color: var(--rt-gray); text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: color var(--rt-transition);
}
.rt-back-home:hover { color: var(--rt-teal); }

.rt-login-divider {
    border: none; border-top: 1px solid var(--rt-gray-light);
    margin: 24px 0 20px;
}

/* ==========================================
   ADMIN DASHBOARD IMPROVEMENTS
   ========================================== */
.rta-welcome {
    background: linear-gradient(135deg, var(--rt-navy) 0%, var(--rt-navy-mid) 100%);
    border-radius: var(--rt-radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    position: relative; overflow: hidden;
}
.rta-welcome::after {
    content: '';
    position: absolute; right: -60px; top: -60px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(249,99,2,.20) 0%, transparent 70%);
    pointer-events: none;
}
.rta-welcome-tag {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rt-teal); margin: 0 0 6px;
}
.rta-welcome-title { font-size: 1.55rem; font-weight: 800; color: var(--rt-white); margin: 0 0 5px; }
.rta-welcome-sub   { font-size: 0.85rem; color: rgba(255,255,255,.48); margin: 0; }
.rta-welcome-date  { text-align: right; position: relative; z-index: 1; }
.rta-welcome-date strong { display: block; font-size: 3rem; font-weight: 800; color: var(--rt-white); line-height: 1; }
.rta-welcome-date span   { font-size: 0.82rem; color: rgba(255,255,255,.42); display: block; margin-top: 4px; }

.rta-quick-actions { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.rta-quick-action {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    background: var(--rt-white);
    border: 1px solid var(--rt-gray-border);
    border-radius: 8px;
    font-size: 0.84rem; font-weight: 600;
    color: var(--rt-gray-dark); text-decoration: none;
    transition: border-color var(--rt-transition), color var(--rt-transition), box-shadow var(--rt-transition);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.rta-quick-action i { color: var(--rt-teal); font-size: 0.88rem; }
.rta-quick-action:hover {
    border-color: var(--rt-teal); color: var(--rt-teal);
    box-shadow: 0 0 0 3px rgba(249,99,2,.10);
    text-decoration: none;
}

.rta-panel-title {
    font-size: 0.9rem; font-weight: 700;
    color: var(--rt-gray-dark); margin: 0 0 18px;
    display: flex; align-items: center; gap: 8px;
}
.rta-panel-title i { color: var(--rt-teal); }

/* Status badges */
.rt-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.75rem; font-weight: 600;
    padding: 3px 10px; border-radius: 999px;
}
.rt-status-active   { background: rgba(40,167,69,.10); color: #28a745; }
.rt-status-inactive { background: rgba(220,53,69,.10); color: #dc3545; }
.rt-status-pending  { background: rgba(255,193,7,.12); color: #b8860b; }
.rt-status-dot    { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rt-status-danger { background: rgba(220,53,69,.10);  color: #dc3545; }
.rt-status-warning{ background: rgba(255,193,7,.12);  color: #b8860b; }
.rt-status-info   { background: rgba(13,110,253,.10); color: #0d6efd; }
.rt-status-success{ background: rgba(40,167,69,.10);  color: #28a745; }

/* Avatar shown in the portal top-bar / user menu */
.rta-nav-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; }

/* ── Tenant marketplace ── */
.rt-search-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.rt-search-bar .rt-form-input { flex:1; min-width:140px; }
.rt-result-count { font-size:.82rem; color:#8a9099; font-weight:600; margin:0 0 12px; }

.rt-saved-save-btn { display:inline-flex; align-items:center; gap:6px; background:none;
    border:1px solid var(--rt-gray-border,#e6e8eb); border-radius:10px; padding:0 14px; font-size:.84rem;
    font-weight:600; color:#5a6270; cursor:pointer; }
.rt-saved-save-btn:hover { border-color:var(--rt-teal,#2a9d8f); color:var(--rt-teal,#2a9d8f); }
.rt-saved-wrap { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.rt-saved-title { font-size:.78rem; font-weight:700; color:#8a9099; text-transform:uppercase; letter-spacing:.03em; }
.rt-saved-list { display:inline-flex; flex-wrap:wrap; gap:8px; }
.rt-saved-empty { font-size:.8rem; color:#8a9099; }
.rt-saved-chip { display:inline-flex; align-items:center; background:var(--rt-gray-light,#f1f3f5);
    border-radius:999px; padding:0 4px 0 0; overflow:hidden; }
.rt-saved-chip-link { display:inline-flex; align-items:center; gap:6px; padding:6px 8px 6px 12px;
    font-size:.8rem; font-weight:600; color:var(--rt-navy,#154279); text-decoration:none; }
.rt-saved-chip-link:hover { color:var(--rt-teal,#2a9d8f); }
.rt-saved-chip-x { border:none; background:none; color:#8a9099; font-size:1rem; line-height:1; cursor:pointer;
    padding:0 6px; }
.rt-saved-chip-x:hover { color:#dc3545; }

.rt-unit-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }

.rt-unit-card { background:#fff; border:1px solid var(--rt-gray-border,#e6e8eb); border-radius:14px;
    overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s; }
.rt-unit-card:hover { box-shadow:0 10px 28px rgba(0,0,0,.10); transform:translateY(-2px); }

.rt-unit-photo { position:relative; aspect-ratio:16/10; background-size:cover; background-position:center; }
.rt-unit-photo.is-empty { display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#154279 0%,#1e5fa8 100%); color:rgba(255,255,255,.5); font-size:2.4rem; }
.rt-unit-badge { position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.6); color:#fff;
    font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:999px; }

.rt-wish-btn { position:absolute; top:10px; right:10px; width:34px; height:34px; border:none; border-radius:50%;
    background:rgba(255,255,255,.92); color:#dc3545; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.18);
    display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; }
.rt-wish-btn.is-on { background:#dc3545; color:#fff; }
.rt-wish-inline { position:static; width:auto; height:auto; border-radius:8px; padding:8px 14px; gap:6px;
    font-weight:700; font-size:.84rem; }

.rt-unit-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; }
.rt-unit-rent { font-weight:800; color:var(--rt-navy,#154279); font-size:1.05rem; }
.rt-unit-rent small { font-weight:600; color:#8a9099; font-size:.72rem; }
.rt-unit-title { margin:2px 0 0; font-weight:700; font-size:.95rem; }
.rt-unit-loc { margin:0; font-size:.8rem; color:#8a9099; }
.rt-unit-specs { display:flex; flex-wrap:wrap; gap:10px; font-size:.78rem; color:#5a6270; margin-top:6px; }
.rt-unit-specs .rt-unit-type { margin-left:auto; font-weight:600; color:var(--rt-teal,#2a9d8f); }
.rt-unit-view { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:.82rem;
    font-weight:700; color:var(--rt-teal,#2a9d8f); text-decoration:none; }
.rt-unit-view:hover { text-decoration:underline; }

/* Detail */
.rt-unit-detail { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px; align-items:start; }
@media (max-width:768px){ .rt-unit-detail { grid-template-columns:1fr; } }
.rt-gallery-main { aspect-ratio:16/10; border-radius:14px; background-size:cover; background-position:center; }
.rt-gallery-main.is-empty { display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#154279 0%,#1e5fa8 100%); color:rgba(255,255,255,.5); font-size:3rem; }
.rt-gallery-thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.rt-gallery-thumb { width:74px; height:54px; border-radius:8px; background-size:cover; background-position:center;
    cursor:pointer; border:2px solid transparent; }
.rt-gallery-thumb:hover { border-color:var(--rt-teal,#2a9d8f); }
.rt-spec-grid { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:14px 0 0; }
.rt-spec-grid dt { font-weight:600; color:#8a9099; }
.rt-spec-grid dd { margin:0; }

.rt-unit-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.rt-compare-btn { display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--rt-gray-border,#e6e8eb);
    border-radius:8px; padding:6px 10px; font-size:.78rem; font-weight:600; color:#5a6270; cursor:pointer; }
.rt-compare-btn:hover { border-color:var(--rt-teal,#2a9d8f); color:var(--rt-teal,#2a9d8f); }
.rt-compare-btn.is-on { background:var(--rt-teal,#2a9d8f); border-color:var(--rt-teal,#2a9d8f); color:#fff; }

/* Comparison table */
.rt-cmp-table { width:100%; border-collapse:collapse; min-width:520px; }
.rt-cmp-table th { text-align:left; vertical-align:middle; padding:11px 14px; font-size:.8rem; font-weight:700;
    color:#8a9099; white-space:nowrap; width:130px; border-bottom:1px solid var(--rt-gray-light,#f1f3f5); }
.rt-cmp-table td { padding:11px 14px; font-size:.85rem; border-bottom:1px solid var(--rt-gray-light,#f1f3f5);
    border-left:1px solid var(--rt-gray-light,#f1f3f5); vertical-align:middle; min-width:170px; }
.rt-cmp-photo { width:100%; height:96px; border-radius:10px; background-size:cover; background-position:center; }
.rt-cmp-photo.is-empty { display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#154279 0%,#1e5fa8 100%); color:rgba(255,255,255,.5); font-size:1.6rem; }
.rt-cmp-remove { background:none; border:none; color:#dc3545; font-size:.8rem; font-weight:600; cursor:pointer; padding:0; }
.rt-cmp-remove:hover { text-decoration:underline; }

/* ── Portal data table ── */
.rta-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.rta-table thead th {
    text-align: left; padding: 10px 14px; font-weight: 700; font-size: .74rem;
    text-transform: uppercase; letter-spacing: .03em; color: #8a9099;
    border-bottom: 2px solid var(--rt-gray-border, #e6e8eb); white-space: nowrap;
}
.rta-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--rt-gray-light, #f1f3f5); vertical-align: middle; }
.rta-table tbody tr:hover { background: var(--rt-gray-light, #f7f8fa); }
.rta-table tbody tr:last-child td { border-bottom: none; }

/* ── Panel ── */
.rta-panel {
    background: var(--rt-white);
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    overflow: hidden;
}
.rta-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rt-gray-border);
    gap: 10px;
}
.rta-panel-head .rta-panel-title { margin: 0; }
.rta-panel-body { padding: 20px; }

/* ── Page header ── */
.rta-page-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.rta-page-head h4 {
    margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--rt-navy);
    display: flex; align-items: center; gap: 8px;
}

/* ── Detail grid ── */
.rt-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px 24px;
}
.rt-detail-item { display: flex; flex-direction: column; gap: 3px; }
.rt-detail-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--rt-gray);
}
.rt-detail-value { font-size: .9rem; font-weight: 600; color: var(--rt-gray-dark); }

/* ── Table ── */
.rt-table-wrap { overflow-x: auto; }
.rt-table {
    width: 100%; border-collapse: collapse;
    font-size: .84rem; font-family: 'Plus Jakarta Sans', sans-serif;
}
.rt-table thead th {
    padding: 11px 14px; background: var(--rt-off-white);
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--rt-gray);
    border-bottom: 1px solid var(--rt-gray-border);
    white-space: nowrap;
}
.rt-table tbody td {
    padding: 11px 14px; vertical-align: middle;
    border-bottom: 1px solid var(--rt-gray-border);
    color: var(--rt-gray-dark);
}
.rt-table tbody tr:last-child td { border-bottom: none; }
.rt-table tbody tr:hover td { background: var(--rt-off-white); }

/* Empty state */
.rta-empty-state {
    padding: 52px 24px;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.rta-empty-icon {
    width: 64px; height: 64px;
    background: var(--rt-teal-glass);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.rta-empty-icon i { font-size: 1.6rem; color: var(--rt-teal); }
.rta-empty-title  { font-size: 0.95rem; font-weight: 700; color: var(--rt-gray-dark); margin: 0 0 6px; }
.rta-empty-sub    { font-size: 0.84rem; color: var(--rt-gray); margin: 0; }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1200px) {
    .rt-property-grid { grid-template-columns: repeat(2, 1fr); }
    .rt-admin-stats   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .rta-sidebar { transform: translateX(-100%); }
    .rta-sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.28); }
    .rta-main { margin-left: 0; }
    .rta-sidebar-toggle { display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 992px) {
    .rt-footer-grid        { grid-template-columns: 1fr 1fr; gap: 36px; }
    .rt-stats-grid         { grid-template-columns: repeat(2, 1fr); }
    .rt-login-form-wrap    { padding: 40px 32px 28px; }
    .rt-testimonials-grid  { grid-template-columns: repeat(2, 1fr); }
    .rt-how-grid           { grid-template-columns: 1fr; gap: 28px; }
    .rt-how-grid::before   { display: none; }
    .rt-tenant-grid        { grid-template-columns: repeat(4, 1fr); gap: 32px; }
    .rt-tenant-grid .rt-how-step       { grid-column: span 2; }
    .rt-tenant-grid .rt-how-step:nth-child(4) { grid-column: 2 / span 2; }
    .rt-tenant-grid .rt-how-step:nth-child(5) { grid-column: 2 / span 2; }
    .rta-welcome           { flex-direction: column; text-align: center; }
    .rta-welcome-date      { text-align: center; }
}

@media (max-width: 640px) {
    .rt-tenant-grid        { grid-template-columns: 1fr; gap: 24px; }
    .rt-tenant-grid .rt-how-step,
    .rt-tenant-grid .rt-how-step:nth-child(4),
    .rt-tenant-grid .rt-how-step:nth-child(5) { grid-column: 1 / -1; }
    .rt-tenant-guide-cta   { flex-direction: column; align-items: center; }
}

@media (max-width: 576px) {
    .rta-content { padding: 18px 14px; }
    .rta-topbar-client { display: none; }
    .rta-admin-stats { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .rt-testimonials-grid { grid-template-columns: 1fr; }
    .rt-admin-stats { grid-template-columns: 1fr 1fr; }
    .rta-quick-actions .rta-quick-action { flex: 1 1 calc(50% - 5px); justify-content: center; }
}

@media (max-width: 768px) {
    .rt-property-grid { grid-template-columns: 1fr; }
    .rt-features-grid { grid-template-columns: 1fr; }
    .rt-stats-grid    { grid-template-columns: 1fr 1fr; }
    .rt-footer-grid   { grid-template-columns: 1fr; gap: 28px; }
    .rt-search-box    { flex-direction: column; }
    .rt-search-btn    { justify-content: center; }
    .rt-login-form-wrap { padding: 32px 22px 24px; border-radius: 14px; }
    .rt-otp-cell { height: 50px; font-size: 1.35rem; }
    .rt-otp-grid { gap: 7px; }
    .rt-admin-stats   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .rt-hero-stats { gap: 28px; }
    .rt-stats-grid { grid-template-columns: 1fr; }
    .rt-admin-stats{ grid-template-columns: 1fr; }
}

/* ==========================================
   UTILITY TOPBAR  (above main navbar)
   ========================================== */
.rt-topbar-utility {
    background: var(--rt-navy-deep);
    color: rgba(255,255,255,.65);
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1001;
    transition: transform var(--rt-transition), opacity var(--rt-transition);
}
.rt-topbar-utility .rt-container {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 9px; padding-bottom: 9px;
}
.rt-topbar-utility .rt-topbar-left,
.rt-topbar-utility .rt-topbar-right {
    display: flex; align-items: center; gap: 22px;
}
.rt-topbar-utility a,
.rt-topbar-utility .rt-topbar-hours {
    color: rgba(255,255,255,.62);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 500;
    transition: color var(--rt-transition);
}
.rt-topbar-utility a:hover { color: var(--rt-teal); }
.rt-topbar-utility i { color: var(--rt-teal); font-size: 0.82rem; }
.rt-topbar-utility .rt-topbar-right { gap: 14px; }
.rt-topbar-utility .rt-topbar-right a { font-size: 0.85rem; }

/* hide utility bar on scroll for a cleaner navbar */
.rt-topbar-utility.hide { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* push navbar down to make room for utility bar */
.rt-navbar { top: 38px; }
.rt-navbar.scrolled { top: 0; }

/* When the utility bar is kept visible (e.g. landing page), it never slides
   away on scroll — so keep the navbar docked right below it at every scroll
   position, on all screen sizes, instead of jumping to top:0 behind it. */
body[data-keep-utility="true"] .rt-navbar,
body[data-keep-utility="true"] .rt-navbar.scrolled { top: 38px; }

/* ==========================================
   STATIC NAVBAR (inner pages — e.g. Application / Booking)
   When body.rt-nav-static is set, the utility bar + navbar sit in normal
   document flow (scroll away with the page) instead of floating. The navbar
   is given its solid "scrolled" look so it stays legible over the light page
   background, and the first content section's large top padding (which only
   existed to clear the fixed bars) is trimmed.
   ========================================== */
/* The whole header stays visible on scroll: the utility bar sticks to the very
   top and the navbar sticks right below it (utility bar is 38px tall). Both are
   in normal flow, so neither disappears and content isn't overlapped. */
body.rt-nav-static .rt-topbar-utility { position: sticky; top: 0; z-index: 1001; }
body.rt-nav-static .rt-navbar {
    position: sticky; top: 38px; z-index: 1000;
    background: var(--rt-white);
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
body.rt-nav-static .rt-logo-text { color: var(--rt-gray-dark); }
body.rt-nav-static .rt-logo-text span { color: var(--rt-teal); }
body.rt-nav-static .rt-nav-links li a { color: var(--rt-gray-dark); }
body.rt-nav-static .rt-nav-toggle span { background: var(--rt-gray-dark); }

/* Content begins right after the navbar now — drop the fixed-bar clearance. */
/* `.rt-navbar + section` never matched: _PublicNav emits a <script> between the
   </nav> and the page content, so the adjacent-sibling combinator broke and these
   pages kept the full fixed-header clearance as dead space. Target the page's
   first section directly instead. */
body.rt-nav-static .rt-navbar + section,
body.rt-nav-static > section:first-of-type { padding-top: 40px !important; }

/* ==========================================
   NAVBAR DROPDOWNS
   ========================================== */
.rt-nav-has-menu { position: relative; }

.rt-nav-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
}
.rt-nav-caret {
    font-size: 0.72rem;
    transition: transform var(--rt-transition);
    opacity: .7;
}

.rt-nav-menu {
    position: absolute;
    top: calc(100% + 14px); left: -8px;
    min-width: 320px;
    background: var(--rt-white);
    border-radius: 12px;
    border: 1px solid var(--rt-gray-border);
    box-shadow: 0 18px 56px rgba(0,0,0,.18);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 1000;
}
.rt-nav-menu-sm { min-width: 280px; }

.rt-nav-has-menu:hover > .rt-nav-menu,
.rt-nav-has-menu.open > .rt-nav-menu,
.rt-nav-has-menu:focus-within > .rt-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rt-nav-has-menu:hover .rt-nav-caret,
.rt-nav-has-menu.open  .rt-nav-caret { transform: rotate(180deg); }

.rt-nav-menu a {
    display: flex !important; align-items: flex-start; gap: 12px;
    padding: 11px 12px !important;
    color: var(--rt-gray-dark) !important;
    text-decoration: none;
    font-size: 0.88rem !important;
    border-radius: 8px;
    transition: background var(--rt-transition), color var(--rt-transition);
}
.rt-nav-menu a > i {
    width: 34px; height: 34px;
    background: var(--rt-teal-glass);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--rt-teal);
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: background var(--rt-transition), color var(--rt-transition);
}
.rt-nav-menu a > span { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.rt-nav-menu a > span strong { font-size: 0.9rem; font-weight: 700; color: var(--rt-gray-dark); }
.rt-nav-menu a > span em {
    font-style: normal;
    font-size: 0.76rem;
    color: var(--rt-gray);
    font-weight: 400;
}
.rt-nav-menu a:hover {
    background: var(--rt-teal-glass);
    color: var(--rt-teal) !important;
}
.rt-nav-menu a:hover > i { background: var(--rt-teal); color: var(--rt-white); }
.rt-nav-menu a:hover > span strong { color: var(--rt-teal); }

/* Mobile nav drawer with collapsible dropdowns */
@media (max-width: 768px) {
    .rt-nav-toggle { display: block; }

    .rt-nav-links {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(86vw, 360px);
        background: var(--rt-white);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 88px 0 24px;
        box-shadow: -10px 0 32px rgba(0,0,0,.15);
        transform: translateX(100%);
        transition: transform var(--rt-transition);
        z-index: 999;
        overflow-y: auto;
    }
    .rt-nav-links.open { transform: translateX(0); }

    .rt-nav-links li { width: 100%; }
    .rt-nav-links li a {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 24px !important;
        color: var(--rt-gray-dark) !important;
        font-size: 0.95rem !important;
        border-bottom: 1px solid var(--rt-gray-light);
    }
    .rt-nav-links li a:hover { background: var(--rt-teal-glass); }

    .rt-nav-menu {
        position: static !important;
        min-width: 0; width: 100%;
        box-shadow: none; border: none; border-radius: 0;
        background: var(--rt-gray-light);
        padding: 4px 12px;
        opacity: 1; visibility: hidden; transform: none;
        max-height: 0; overflow: hidden;
        transition: max-height .3s ease, visibility .3s;
    }
    .rt-nav-has-menu.open > .rt-nav-menu {
        visibility: visible;
        max-height: 800px;
    }
    .rt-nav-menu a { border-bottom: 1px solid var(--rt-gray-border); padding: 10px 12px !important; }
    .rt-nav-menu a:last-child { border-bottom: none; }

    /* CTAs become full-width buttons inside drawer */
    .rt-nav-register,
    .rt-nav-login {
        margin: 12px 24px !important;
        text-align: center;
        justify-content: center;
        border-bottom: none !important;
    }
    .rt-nav-register { background: transparent !important; color: var(--rt-teal) !important; border: 1.5px solid var(--rt-teal) !important; }

    /* Mobile nav-toggle bars switch to dark when drawer open / scrolled */
    .rt-nav-toggle span { background: var(--rt-white); }
    .rt-navbar.scrolled .rt-nav-toggle span { background: var(--rt-gray-dark); }

    /* Utility bar simplified on mobile */
    .rt-topbar-utility .rt-topbar-hours { display: none; }
    .rt-topbar-utility .rt-topbar-left { gap: 14px; font-size: 0.74rem; }
    .rt-topbar-utility .rt-topbar-right a { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .rt-topbar-utility .rt-topbar-right { display: none; }
    .rt-topbar-utility .rt-container { justify-content: center; }
}

/* ==========================================
   TRUST STRIP  (subtle credibility row)
   ========================================== */
.rt-trust-strip {
    background: var(--rt-white);
    border-top: 1px solid var(--rt-gray-border);
    border-bottom: 1px solid var(--rt-gray-border);
    padding: 26px 0;
}
.rt-trust-strip .rt-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.rt-trust-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--rt-gray);
}
.rt-trust-logos {
    display: flex; align-items: center;
    gap: 36px; flex-wrap: wrap;
    flex: 1; justify-content: center;
}
.rt-trust-logo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #b8c0cc;
    text-transform: uppercase;
    opacity: .85;
    transition: color var(--rt-transition), opacity var(--rt-transition);
    display: inline-flex; align-items: center; gap: 8px;
}
.rt-trust-logo i { font-size: 1.1rem; }
.rt-trust-logo:hover { color: var(--rt-navy); opacity: 1; }
.rt-trust-rating {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 0.88rem;
    color: var(--rt-gray-dark);
    font-weight: 600;
}
.rt-trust-rating .rt-trust-stars { color: #f39c12; letter-spacing: 2px; font-size: 0.95rem; }
.rt-trust-rating em { font-style: normal; color: var(--rt-gray); font-weight: 400; }

@media (max-width: 768px) {
    .rt-trust-strip .rt-container { justify-content: center; text-align: center; gap: 18px; }
    .rt-trust-logos { gap: 20px; }
    .rt-trust-logo { font-size: 0.85rem; }
}

/* ==========================================
   BROWSE BY LOCATION
   ========================================== */
.rt-locations-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    height: 480px;
}
.rt-location-tile {
    position: relative;
    border-radius: var(--rt-radius-lg);
    overflow: hidden;
    background: var(--rt-navy);
    text-decoration: none;
    color: var(--rt-white);
    transition: transform var(--rt-transition), box-shadow var(--rt-transition);
    box-shadow: var(--rt-shadow-card);
}
.rt-location-tile:nth-child(1) { grid-row: 1 / span 2; }

.rt-location-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--rt-shadow-hover);
    color: var(--rt-white);
    text-decoration: none;
}

.rt-location-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.rt-location-tile:hover img { transform: scale(1.06); }

.rt-location-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(21,66,121,.10) 30%, rgba(21,66,121,.85) 100%);
    pointer-events: none;
}

.rt-location-info {
    position: absolute;
    bottom: 18px; left: 20px; right: 20px;
    z-index: 1;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px;
}
.rt-location-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--rt-white);
    margin: 0;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.rt-location-count {
    font-size: 0.74rem;
    color: rgba(255,255,255,.78);
    margin: 4px 0 0;
    letter-spacing: .3px;
}
.rt-location-arrow {
    width: 36px; height: 36px;
    background: var(--rt-teal);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--rt-white);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: transform var(--rt-transition);
}
.rt-location-tile:hover .rt-location-arrow {
    transform: rotate(-45deg);
}

.rt-location-tile:nth-child(1) .rt-location-name { font-size: 1.65rem; }

@media (max-width: 992px) {
    .rt-locations-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
    .rt-location-tile { height: 200px; }
    .rt-location-tile:nth-child(1) { grid-row: auto; grid-column: 1 / -1; height: 240px; }
}
@media (max-width: 576px) {
    .rt-locations-grid { grid-template-columns: 1fr; }
    .rt-location-tile:nth-child(1) { grid-column: 1; height: 200px; }
}

/* ==========================================
   PROPERTY CARD CTA (cleaned)
   ========================================== */
.rt-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.rt-card-action-btn {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--rt-transition), color var(--rt-transition), border-color var(--rt-transition);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1.5px solid transparent;
}
.rt-card-action-primary {
    background: var(--rt-navy);
    color: var(--rt-white);
    border-color: var(--rt-navy);
}
.rt-card-action-primary:hover {
    background: var(--rt-navy-mid);
    border-color: var(--rt-navy-mid);
    color: var(--rt-white);
    text-decoration: none;
}
.rt-card-action-ghost {
    background: transparent;
    color: var(--rt-navy);
    border-color: var(--rt-navy);
}
.rt-card-action-ghost:hover {
    background: var(--rt-navy);
    color: var(--rt-white);
    text-decoration: none;
}

/* For-Sale badge (counterpart to existing .rt-badge-rent) */
.rt-card-badge.rt-badge-sale {
    background: var(--rt-teal);
}

/* Empty state inside property grid */
.rt-empty-grid {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 24px;
    color: var(--rt-gray);
    background: var(--rt-gray-light);
    border-radius: var(--rt-radius-lg);
}
.rt-empty-grid i {
    color: var(--rt-teal);
    opacity: .35;
    margin-bottom: 12px;
}
.rt-empty-grid p { margin: 0; font-size: 1rem; }

/* ==========================================
   SOCIAL PROOF UNDER HERO TITLE
   ========================================== */
.rt-hero-proof {
    display: inline-flex; align-items: center;
    gap: 14px;
    margin: 4px 0 22px;
    padding: 8px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.rt-hero-proof-avatars { display: inline-flex; }
.rt-hero-proof-avatars span {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--rt-teal);
    border: 2px solid var(--rt-navy);
    margin-left: -8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700;
    color: var(--rt-white);
}
.rt-hero-proof-avatars span:first-child { margin-left: 0; }
.rt-hero-proof-text {
    font-size: 0.78rem;
    color: rgba(255,255,255,.85);
    font-weight: 500;
}
.rt-hero-proof-text strong { color: var(--rt-teal); font-weight: 800; }

/* ==========================================
   LOGIN — ICON INPUTS, CHECKBOX, ALT ACTIONS
   ========================================== */

/* Icon-prefixed inputs */
.rt-input-icon { position: relative; }
.rt-input-icon > i {
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    color: var(--rt-gray);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color var(--rt-transition);
    z-index: 1;
}
.rt-input-icon .rt-form-input { padding-left: 44px; }
.rt-input-icon .rt-form-input:focus ~ i,
.rt-input-icon:focus-within > i { color: var(--rt-teal); }
.rt-input-icon.rt-pwd-wrap .rt-form-input { padding-right: 46px; }

/* Inline form hint under input */
.rt-form-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--rt-gray);
    margin-top: 8px;
    line-height: 1.5;
}
.rt-form-hint i { color: var(--rt-teal); font-size: .78rem; }

/* Inline warning (caps-lock) */
.rt-form-warn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: #b8860b;
    margin-top: 6px;
    font-weight: 500;
}
.rt-form-warn i { font-size: 0.78rem; }

/* Form options row (remember-me etc.) */
.rt-form-options {
    display: flex;
    align-items: center;
    margin: 4px 0 18px;
}

/* Custom checkbox */
.rt-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.rt-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.rt-checkbox-box {
    width: 18px; height: 18px;
    border: 1.5px solid var(--rt-gray-border);
    border-radius: 4px;
    background: var(--rt-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--rt-transition), border-color var(--rt-transition);
    position: relative;
    flex-shrink: 0;
}
.rt-checkbox-box::after {
    content: '';
    width: 5px; height: 9px;
    border: solid var(--rt-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease;
    margin-bottom: 2px;
}
.rt-checkbox input:checked ~ .rt-checkbox-box {
    background: var(--rt-teal);
    border-color: var(--rt-teal);
}
.rt-checkbox input:checked ~ .rt-checkbox-box::after { transform: rotate(45deg) scale(1); }
.rt-checkbox input:focus-visible ~ .rt-checkbox-box {
    box-shadow: 0 0 0 3px rgba(249,99,2,.18);
}
.rt-checkbox-label {
    font-size: 0.85rem;
    color: var(--rt-gray-dark);
    font-weight: 500;
}

/* Login submit — loading state */
.rt-login-btn .rt-btn-label { margin-left: 4px; }
.rt-login-btn.rt-loading { background: var(--rt-teal-dark); cursor: progress; }

/* Secure hint under button */
.rt-secure-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 0.75rem;
    color: var(--rt-gray);
    letter-spacing: .2px;
}
.rt-secure-hint i { color: #2ea043; font-size: 0.82rem; }

/* "New to ... " divider with text */
.rt-login-divider-text {
    position: relative;
    text-align: center;
    margin: 28px 0 18px;
}
.rt-login-divider-text::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: var(--rt-gray-light);
}
.rt-login-divider-text span {
    position: relative;
    background: var(--rt-white);
    padding: 0 14px;
    font-size: 0.78rem;
    color: var(--rt-gray);
    font-weight: 500;
    letter-spacing: .3px;
}

/* Alternative-action cards */
.rt-alt-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.rt-alt-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: var(--rt-white);
    border: 1.5px solid var(--rt-gray-border);
    border-radius: var(--rt-radius);
    text-decoration: none;
    transition: border-color var(--rt-transition), box-shadow var(--rt-transition), transform var(--rt-transition);
}
.rt-alt-card:hover {
    border-color: var(--rt-teal);
    box-shadow: 0 6px 18px rgba(249,99,2,.10);
    transform: translateY(-1px);
    text-decoration: none;
}
.rt-alt-icon {
    width: 40px; height: 40px;
    background: var(--rt-teal-glass);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rt-teal);
    font-size: 1rem;
    flex-shrink: 0;
    transition: background var(--rt-transition), color var(--rt-transition);
}
.rt-alt-card:hover .rt-alt-icon { background: var(--rt-teal); color: var(--rt-white); }

.rt-alt-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.rt-alt-text strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--rt-gray-dark);
}
.rt-alt-text em {
    font-style: normal;
    font-size: 0.76rem;
    color: var(--rt-gray);
    font-weight: 400;
}
.rt-alt-arrow {
    color: var(--rt-gray-border);
    font-size: 0.8rem;
    transition: color var(--rt-transition), transform var(--rt-transition);
}
.rt-alt-card:hover .rt-alt-arrow {
    color: var(--rt-teal);
    transform: translateX(2px);
}

/* Footer links row (back-home + setup) */
.rt-login-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.rt-login-footer-links .rt-back-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--rt-gray);
    text-decoration: none;
    transition: color var(--rt-transition);
}
.rt-login-footer-links .rt-back-home:hover { color: var(--rt-teal); }
.rt-login-footer-links .rt-divider-dot { color: var(--rt-gray-border); }

/* ==========================================
   PORTAL ACCENT THEMES (Tenant / Agent / Owner)
   Single source of truth for portal-specific accent.
   ========================================== */
body[data-portal] { --rt-accent: var(--rt-teal); --rt-accent-bg: var(--rt-teal-glass); }
body[data-portal="tenant"] { --rt-accent: #11C299; --rt-accent-bg: rgba(17,194,153,.10); --rt-accent-soft: rgba(17,194,153,.06); }
body[data-portal="agent"]  { --rt-accent: #3B82F6; --rt-accent-bg: rgba(59,130,246,.10); --rt-accent-soft: rgba(59,130,246,.06); }
body[data-portal="owner"]  { --rt-accent: #F59E0B; --rt-accent-bg: rgba(245,158,11,.10); --rt-accent-soft: rgba(245,158,11,.06); }

body[data-portal] .rta-sidebar { border-top: 3px solid var(--rt-accent); }
body[data-portal] .rta-sidebar-logo .rt-logo span span { color: var(--rt-accent); }
body[data-portal] .rta-nav-link.rta-active {
    background: var(--rt-accent-bg);
    color: var(--rt-accent);
    border-left: 3px solid var(--rt-accent);
}
body[data-portal] .rta-nav-link.rta-active i { color: var(--rt-accent); }
body[data-portal] .rta-nav-sub-link:hover,
body[data-portal] .rta-nav-sub-link.rta-active { color: var(--rt-accent); }

/* Status pill row (portal — pending account etc.) */
.rta-portal-banner {
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-left: 4px solid #f59e0b;
    background: linear-gradient(90deg, #fffbeb 0%, #fef3c7 100%);
}
.rta-portal-banner i { color: #f59e0b; font-size: 1.15rem; flex-shrink: 0; }
.rta-portal-banner-title { font-size: .9rem; font-weight: 700; color: #92400e; margin: 0; }
.rta-portal-banner-sub   { font-size: .8rem; color: #b45309; margin: 2px 0 0; line-height: 1.55; }

.rta-nav-lock {
    margin-left: auto;
    font-size: .65rem;
    opacity: .5;
}
.rta-nav-locked {
    opacity: .42;
    cursor: not-allowed;
    pointer-events: none;
}

/* Unread / notification badge inside sidebar nav */
.rta-nav-count {
    margin-left: auto;
    background: #dc3545;
    color: #fff;
    border-radius: 10px;
    font-size: .6rem;
    font-weight: 700;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

/* ==========================================
   DASHBOARD — "GET STARTED" PANEL
   for portals with no data yet
   ========================================== */
.rta-getstarted {
    background: var(--rt-white);
    border-radius: 14px;
    padding: 28px 30px;
    box-shadow: 0 2px 14px rgba(0,0,0,.05);
    border: 1px solid var(--rt-gray-border);
    margin-top: 20px;
}
.rta-getstarted-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.rta-getstarted-head i {
    width: 36px; height: 36px;
    background: var(--rt-accent-bg, var(--rt-teal-glass));
    color: var(--rt-accent, var(--rt-teal));
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.rta-getstarted-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--rt-gray-dark);
    margin: 0;
}
.rta-getstarted-sub {
    font-size: .85rem;
    color: var(--rt-gray);
    margin: 0 0 22px;
    line-height: 1.6;
    max-width: 580px;
}
.rta-getstarted-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.rta-getstarted-step {
    border: 1px solid var(--rt-gray-border);
    border-radius: 10px;
    padding: 16px;
    background: var(--rt-off-white);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.rta-getstarted-step:hover {
    border-color: var(--rt-accent, var(--rt-teal));
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.rta-getstarted-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--rt-accent, var(--rt-teal));
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rta-getstarted-step h6 {
    font-size: .88rem;
    font-weight: 700;
    color: var(--rt-gray-dark);
    margin: 0 0 4px;
}
.rta-getstarted-step p {
    font-size: .78rem;
    color: var(--rt-gray);
    line-height: 1.5;
    margin: 0;
}

/* Soft empty placeholder for stat cards with no data */
.rt-admin-card-value.is-empty {
    color: var(--rt-gray-border);
    font-weight: 800;
}
.rt-admin-card-value.is-empty::after {
    content: '';
    display: inline-block;
}

/* ==========================================
   ADMIN PAGE HEADER (rt-page-head)
   Used by Security, Property, Tenant pages.
   ========================================== */
.rt-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--rt-gray-border);
    margin-bottom: 22px;
}
.rt-page-head h4 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--rt-navy);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.2;
}
.rt-page-head h4 i { color: var(--rt-teal); font-size: 1rem; }
.rt-page-head-sub {
    display: block;
    font-size: .78rem;
    color: var(--rt-gray);
    font-weight: 400;
    margin-top: 4px;
    letter-spacing: .1px;
}
.rt-page-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Compact toolbar button */
.rt-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background var(--rt-transition), color var(--rt-transition), border-color var(--rt-transition), transform var(--rt-transition);
}
.rt-btn-sm.rt-btn-primary {
    background: var(--rt-teal);
    color: var(--rt-white);
}
.rt-btn-sm.rt-btn-primary:hover {
    background: var(--rt-teal-dark);
    color: var(--rt-white);
    transform: translateY(-1px);
    text-decoration: none;
}
.rt-btn-sm.rt-btn-secondary {
    background: var(--rt-white);
    color: var(--rt-gray-dark);
    border-color: var(--rt-gray-border);
}
.rt-btn-sm.rt-btn-secondary:hover {
    border-color: var(--rt-navy);
    color: var(--rt-navy);
    text-decoration: none;
}

/* ==========================================
   USER LIST — AVATAR + META  (used in Security)
   ========================================== */
.rt-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rt-user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--rt-teal-glass);
    color: var(--rt-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.rt-user-name { font-weight: 700; color: var(--rt-gray-dark); font-size: .88rem; line-height: 1.2; }
.rt-user-sub  { font-size: .76rem; color: var(--rt-gray); margin-top: 2px; }

.rt-link-profile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--rt-navy);
    text-decoration: none;
    transition: color var(--rt-transition);
}
.rt-link-profile:hover { color: var(--rt-teal); text-decoration: none; }
.rt-link-profile i { color: var(--rt-teal); }

/* Compact KPI grid used at top of admin list pages */
.rt-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.rt-kpi-card {
    background: var(--rt-white);
    border: 1px solid var(--rt-gray-border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform var(--rt-transition), box-shadow var(--rt-transition);
}
.rt-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.rt-kpi-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: var(--rt-teal-glass);
    color: var(--rt-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.rt-kpi-icon.rt-kpi-success { background: rgba(40,167,69,.10);  color: #28a745; }
.rt-kpi-icon.rt-kpi-warning { background: rgba(255,193,7,.12);  color: #b8860b; }
.rt-kpi-icon.rt-kpi-danger  { background: rgba(220,53,69,.10);  color: #dc3545; }
.rt-kpi-icon.rt-kpi-info    { background: rgba(13,110,253,.10); color: #0d6efd; }
.rt-kpi-value {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--rt-gray-dark);
    line-height: 1.1;
}
.rt-kpi-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--rt-gray);
    margin-top: 3px;
}

/* Extra status variants (used by Maintenance / Billing) */
.rt-status-neutral  { background: rgba(138,147,165,.12); color: #6c757d; }
.rt-status-high     { background: rgba(255,130,0,.12);   color: #ff8200; }
.rt-status-progress { background: rgba(13,110,253,.10);  color: #0d6efd; }

/* ==========================================
   FORM SECTION TITLE (reused in CRUD forms)
   ========================================== */
.rt-form-section-title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rt-teal-deep);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rt-gray-border);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rt-form-section-title i { color: var(--rt-teal); font-size: .85rem; }

/* Compact form label (used on CRUD forms — replaces inline font-size labels) */
.rt-form-label-sm {
    font-size: .8rem;
    font-weight: 700;
    color: var(--rt-gray-dark);
    margin-bottom: 6px;
    display: block;
    letter-spacing: .15px;
}

/* CRUD form action row */
.rt-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--rt-gray-border);
}
.rt-form-actions .rt-btn-sm { padding: 10px 22px; font-size: .88rem; }

/* ==========================================
   BREADCRUMB
   ========================================== */
.rt-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.rt-breadcrumb a {
    color: var(--rt-gray);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--rt-transition);
}
.rt-breadcrumb a:hover { color: var(--rt-teal); }
.rt-breadcrumb span.rt-breadcrumb-sep { color: var(--rt-gray-border); }
.rt-breadcrumb span.rt-breadcrumb-current { color: var(--rt-navy); font-weight: 600; }

/* ==========================================
   GENERIC INFO CARD (centered icon + copy + actions)
   Used for placeholder pages, success pages, etc.
   ========================================== */
.rt-info-page {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rt-off-white);
    padding: 120px 16px 80px;
}
.rt-info-card {
    background: var(--rt-white);
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0,0,0,.10);
    padding: 56px 48px;
    text-align: center;
    max-width: 540px;
    width: 100%;
}
.rt-info-card-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--rt-teal);
    color: var(--rt-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
    font-size: 2rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.rt-info-card-icon.rt-info-icon-navy   { background: var(--rt-navy); }
.rt-info-card-icon.rt-info-icon-blue   { background: #3B82F6; }
.rt-info-card-icon.rt-info-icon-amber  { background: #F59E0B; }
.rt-info-card-icon.rt-info-icon-green  { background: #28a745; }
.rt-info-card h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--rt-gray-dark);
    margin: 0 0 12px;
    line-height: 1.2;
}
.rt-info-card p {
    color: var(--rt-gray);
    font-size: .95rem;
    line-height: 1.7;
    margin: 0 0 28px;
}
.rt-info-card-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================
   PROPERTY OVERVIEW CARD (used on Property/Index)
   ========================================== */
.rt-prop-card {
    background: var(--rt-white);
    border-radius: 14px;
    border: 1px solid var(--rt-gray-border);
    transition: transform var(--rt-transition), box-shadow var(--rt-transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.rt-prop-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(21,66,121,.10);
    border-color: var(--rt-teal-border);
}
.rt-prop-card-head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--rt-gray-light);
}
.rt-prop-card-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}
.rt-prop-card-title {
    font-size: .98rem;
    font-weight: 800;
    color: var(--rt-gray-dark);
    text-decoration: none;
    display: block;
    line-height: 1.25;
    transition: color var(--rt-transition);
}
.rt-prop-card-title:hover { color: var(--rt-teal); text-decoration: none; }
.rt-prop-card-location {
    font-size: .76rem;
    color: var(--rt-gray);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}
.rt-prop-card-location i { color: var(--rt-teal); font-size: .76rem; }
.rt-prop-card-meta {
    font-size: .72rem;
    color: var(--rt-gray);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.rt-prop-card-meta i { color: var(--rt-teal); margin-right: 4px; }
.rt-prop-card-body { padding: 16px 18px; flex: 1; }
.rt-prop-card-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    margin-bottom: 14px;
}
.rt-prop-card-mini-stats > div { padding: 0 8px; border-right: 1px solid var(--rt-gray-light); }
.rt-prop-card-mini-stats > div:last-child { border-right: none; }
.rt-prop-mini-num {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--rt-gray-dark);
    line-height: 1;
}
.rt-prop-mini-num.rt-prop-mini-occupied { color: #28a745; }
.rt-prop-mini-num.rt-prop-mini-vacant   { color: #b8860b; }
.rt-prop-mini-lbl {
    font-size: .68rem;
    color: var(--rt-gray);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
}
.rt-prop-occ-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.rt-prop-occ-row span:first-child { font-size: .74rem; color: var(--rt-gray); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.rt-prop-occ-row span:last-child  { font-size: .85rem; color: var(--rt-teal); font-weight: 800; }
.rt-prop-occ-bar {
    height: 6px;
    background: var(--rt-gray-light);
    border-radius: 4px;
    overflow: hidden;
}
.rt-prop-occ-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rt-teal) 0%, #ffa040 100%);
    transition: width .5s ease;
}
.rt-prop-card-foot {
    padding: 12px 18px;
    background: var(--rt-off-white);
    border-top: 1px solid var(--rt-gray-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.rt-prop-card-foot .rt-btn-sm { padding: 6px 12px; font-size: .76rem; }

/* ==========================================
   FILTER BAR  (used above tables)
   ========================================== */
.rt-filter-bar {
    background: var(--rt-white);
    border: 1px solid var(--rt-gray-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.rt-filter-bar select,
.rt-filter-bar input[type="text"],
.rt-filter-bar input[type="date"] {
    border: 1.5px solid var(--rt-gray-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: .82rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--rt-gray-dark);
    background: var(--rt-white);
    outline: none;
    transition: border-color var(--rt-transition), box-shadow var(--rt-transition);
    min-width: 140px;
    flex: 1;
}
.rt-filter-bar select { cursor: pointer; }
.rt-filter-bar select:focus,
.rt-filter-bar input:focus {
    border-color: var(--rt-teal);
    box-shadow: 0 0 0 3px rgba(249,99,2,.12);
}

/* Inline mini text inside a cell (used in tables for tenant + phone, unit + property) */
.rt-cell-primary { font-size: .87rem; font-weight: 600; color: var(--rt-gray-dark); line-height: 1.3; }
.rt-cell-sub     { font-size: .72rem; color: var(--rt-gray); margin-top: 2px; }
.rt-cell-money   { font-size: .9rem; font-weight: 700; color: var(--rt-gray-dark); }
.rt-cell-money.rt-money-pos { color: #28a745; }
.rt-cell-money.rt-money-neg { color: #dc3545; }
.rt-cell-money.rt-money-muted { color: var(--rt-gray); }

/* Alert callout (used by Billing arrears notice etc.) */
.rt-alert-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: .9rem;
    font-weight: 600;
}
.rt-alert-callout i { font-size: 1.1rem; flex-shrink: 0; }
.rt-alert-callout.rt-alert-danger {
    background: rgba(220,53,69,.07);
    border-left: 4px solid #dc3545;
    color: #dc3545;
}
.rt-alert-callout.rt-alert-warning {
    background: rgba(255,193,7,.08);
    border-left: 4px solid #b8860b;
    color: #b8860b;
}
.rt-alert-callout.rt-alert-info {
    background: rgba(13,110,253,.07);
    border-left: 4px solid #0d6efd;
    color: #0d6efd;
}

/* ==========================================================================
   ACCOUNT MENU (Register / Login) — public header
   Replaces the old orange "Access" nav button with an icon + dropdown.
   Scoped to .rt-account only; the rest of the navbar is untouched.
   ========================================================================== */

/* Keep the links right-aligned as before now that a 3rd flex child exists */
.rt-navbar .rt-nav-links { margin-left: auto; }

.rt-account { position: relative; margin-left: 26px; }

.rt-account-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    padding: 6px 8px;
    border-radius: 999px;
    color: var(--rt-teal);
    line-height: 1;
    transition: background var(--rt-transition), color var(--rt-transition);
}
.rt-account-btn:hover { background: rgba(249,99,2,.12); }
.rt-account-icon  { font-size: 1.5rem; }
.rt-account-caret { font-size: .78rem; transition: transform var(--rt-transition); }
.rt-account.open .rt-account-caret { transform: rotate(180deg); }

.rt-account-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rt-account-menu {
    position: absolute;
    top: calc(100% + 16px); right: 0;
    min-width: 214px;
    background: var(--rt-white);
    border: 1px solid rgba(15,27,45,.07);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(15,27,45,.05), 0 24px 48px -20px rgba(15,27,45,.34);
    padding: 8px;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--rt-transition), visibility var(--rt-transition), transform var(--rt-transition);
}
.rt-account.open > .rt-account-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.rt-account-menu a {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    color: #1f2a3a;
    font-size: 1rem; font-weight: 500;
    text-decoration: none;
    transition: background var(--rt-transition), color var(--rt-transition);
}
.rt-account-menu a i {
    color: var(--rt-teal);
    font-size: 1.05rem;
    width: 20px; text-align: center; flex-shrink: 0;
}
.rt-account-menu a:hover { background: var(--rt-teal-light); color: var(--rt-teal-deep); }

@media (max-width: 768px) {
    /* Sits between the logo and the burger once the links become a drawer */
    .rt-account { margin-left: auto; margin-right: 4px; }
    .rt-account-icon { font-size: 1.35rem; }
    .rt-account-menu { min-width: 196px; }
}


/* ==========================================================================
   ACCOUNT PAGES — shared form helpers
   Used by Login / ForgotPassword / SetPassword / Setup / VerifyOtp so the five
   pages behave and read identically. Scoped to body.realtor-login, so nothing
   here can reach the public site or the admin area.
   ========================================================================== */

/* Label + inline action (e.g. "Password" ... "Forgot password?") */
body.realtor-login .rt-pw-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 8px;
}
body.realtor-login .rt-pw-row .rt-form-label { margin-bottom: 0; }
body.realtor-login .rt-pw-forgot {
    font-size: .76rem; font-weight: 600;
    color: var(--rt-teal); text-decoration: none; white-space: nowrap;
}
body.realtor-login .rt-pw-forgot:hover { text-decoration: underline; }

/* Caps Lock warning under a password field */
body.realtor-login .rt-caps-hint {
    display: none;
    align-items: center; gap: 7px;
    margin: 8px 0 0; padding: 8px 11px;
    background: rgba(249,99,2,.07);
    border: 1px solid rgba(249,99,2,.22);
    border-radius: 7px;
    font-size: .76rem; color: var(--rt-teal-deep);
}
body.realtor-login .rt-caps-hint.show { display: flex; }

/* Small explanatory line under a field or control */
body.realtor-login .rt-field-hint {
    font-size: .78rem; color: var(--rt-gray);
    line-height: 1.55; margin: 0 0 20px; padding: 0 2px;
}

/* Informational callout (e.g. "a valid code is already in your inbox") */
body.realtor-login .rt-auth-callout {
    display: flex; align-items: center; gap: 9px;
    background: rgba(59,130,246,.07);
    border: 1px solid rgba(59,130,246,.20);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: .82rem; color: #1d4ed8;
}
body.realtor-login .rt-auth-callout i { flex-shrink: 0; }

/* The strength meter is injected inside .rt-input-icon by rt-password-strength.js,
   which leaves it flush against the field's bottom border — give it some air. */
body.realtor-login .rt-pw-meter { margin-top: 12px; }

/* Separate the "Back to Sign In" row from the secure hint above it */
body.realtor-login .rt-login-footer-links { margin-top: 18px; }

/* One-time-code screen — replaces the inline styles these elements carried */
body.realtor-login .rt-otp-label { text-align: center; }
body.realtor-login .rt-otp-error { display: block; text-align: center; }
body.realtor-login .rt-otp-hint  { text-align: center; margin: 12px 0 0; }
body.realtor-login .rt-otp-resend-lead { margin: 0 0 8px; }

/* Keyboard focus ring for the account pages' interactive bits */
body.realtor-login .rt-pwd-toggle:focus-visible,
body.realtor-login .rt-back-home:focus-visible,
body.realtor-login .rt-pw-forgot:focus-visible,
body.realtor-login .rt-otp-resend-btn:focus-visible {
    outline: 2px solid var(--rt-teal);
    outline-offset: 2px;
    border-radius: 4px;
}


/* ==========================================================================
   WORKSPACE TABS  (.ws-*)
   Presents a group of related pages — each still its own controller/route — as one
   tabbed workspace. Rendered by Views/Shared/_WorkspaceTabs.cshtml.

   Lives here rather than in directory.css because _Layout loads this file on every
   admin page, whereas directory.css is opted into per view. The partial is meant to
   be droppable anywhere, so its styling cannot depend on the host page remembering
   to include a second stylesheet.
   ========================================================================== */
.ws-tabs { display:flex; gap:2px; align-items:stretch; margin:0 0 18px; padding:4px;
           background:#f2f5f9; border:1px solid #e6eaf0; border-radius:12px;
           overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.ws-tabs::-webkit-scrollbar { height:5px; }
.ws-tabs::-webkit-scrollbar-thumb { background:#d3dae5; border-radius:5px; }
.ws-tab { display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
          padding:.55rem .95rem; border-radius:9px; font-size:.83rem; font-weight:700;
          color:#5b6678; text-decoration:none; transition:background .15s, color .15s, box-shadow .15s; }
.ws-tab i { font-size:.86rem; color:#8a93a5; transition:color .15s; }
.ws-tab:hover { background:#e7ecf4; color:#00204A; text-decoration:none; }
.ws-tab:hover i { color:#00204A; }
.ws-tab.active { background:#fff; color:#00204A; box-shadow:0 1px 3px rgba(16,32,64,.12); }
.ws-tab.active i { color:#F96302; }
.ws-tab:focus-visible { outline:2px solid #F96302; outline-offset:2px; }

/* Sibling workspaces (Workspace.Related). Deliberately quieter than .ws-tab: these
   leave the current workspace rather than moving within it, so they must not compete
   with the tabs above them. */
.ws-related { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-8px 0 18px; padding:0 4px; }
.ws-related-lbl { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8a93a5; }
.ws-related-link { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
                   padding:.3rem .7rem; border:1px solid #e6eaf0; border-radius:999px;
                   background:#fff; font-size:.76rem; font-weight:700; color:#5b6678;
                   text-decoration:none; transition:border-color .15s, color .15s, background .15s; }
.ws-related-link i { font-size:.74rem; color:#8a93a5; transition:color .15s; }
.ws-related-link:hover { background:#f7f9fc; border-color:#F96302; color:#00204A; text-decoration:none; }
.ws-related-link:hover i { color:#F96302; }
.ws-related-link:focus-visible { outline:2px solid #F96302; outline-offset:2px; }
.ws-related-arrow { opacity:.6; }

@media (max-width:575.98px) {
    .ws-tab span { display:none; }
    .ws-tab { padding:.55rem .8rem; }
    .ws-related-lbl { display:none; }
}

/* ==========================================================================
   ADMIN TOPBAR AVATAR + USER-MENU HEADER
   The topbar button shows the photo uploaded on Home/Profile, falling back to
   the generic icon; the dropdown gains an identity header.
   ========================================================================== */
.rta-user-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,.35);
}

.rta-user-drop-head {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px 12px;
}
.rta-user-drop-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.rta-user-drop-initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--rt-teal-light);
    color: var(--rt-teal-deep);
    font-size: .85rem; font-weight: 800;
    border: 1px solid var(--rt-teal-border);
}
.rta-user-drop-id { display: flex; flex-direction: column; min-width: 0; }
.rta-user-drop-id strong {
    font-size: .86rem; font-weight: 700; color: var(--rt-gray-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rta-user-drop-id em {
    font-style: normal; font-size: .74rem; color: var(--rt-gray);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==========================================================================
   MY PROFILE PAGE (Home/Profile)
   ========================================================================== */
.rtap-grid { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }

.rtap-card {
    background: #fff;
    border: 1px solid var(--rt-gray-border);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(15,27,45,.04), 0 8px 24px -18px rgba(15,27,45,.30);
}
.rtap-card + .rtap-card { margin-top: 22px; }
.rtap-card h3 {
    font-size: 1rem; font-weight: 800; color: var(--rt-gray-dark);
    margin: 0 0 16px; padding-bottom: 11px;
    border-bottom: 1px solid var(--rt-gray-light);
    display: flex; align-items: center; gap: 9px;
}
.rtap-card h3 i { color: var(--rt-teal); }

/* Identity panel */
.rtap-id { text-align: center; }
.rtap-avatar-wrap { position: relative; width: 124px; margin: 4px auto 14px; }
.rtap-avatar, .rtap-avatar-initials {
    width: 124px; height: 124px; border-radius: 50%;
    display: block; object-fit: cover;
    border: 3px solid var(--rt-teal-light);
}
.rtap-avatar-initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--rt-teal-light); color: var(--rt-teal-deep);
    font-size: 2.4rem; font-weight: 800; letter-spacing: .04em;
}
.rtap-name { font-size: 1.1rem; font-weight: 800; color: var(--rt-gray-dark); margin: 0; }
.rtap-role {
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--rt-teal); margin: 4px 0 2px;
}
.rtap-user { font-size: .8rem; color: var(--rt-gray); margin: 0 0 16px; }

.rtap-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rtap-photo-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--rt-teal); color: #fff;
    border: 1.5px solid var(--rt-teal);
    border-radius: 8px; padding: 8px 15px;
    font-size: .8rem; font-weight: 700; cursor: pointer;
    transition: background .2s, border-color .2s;
}
.rtap-photo-btn:hover { background: var(--rt-teal-dark); border-color: var(--rt-teal-dark); }
.rtap-photo-btn:focus-within { box-shadow: 0 0 0 3px var(--rt-teal-glass); }
.rtap-photo-remove {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; color: var(--rt-gray);
    border: 1.5px solid var(--rt-gray-border);
    border-radius: 8px; padding: 8px 15px;
    font-size: .8rem; font-weight: 700; cursor: pointer;
    transition: border-color .2s, color .2s;
}
.rtap-photo-remove:hover { border-color: #dc3545; color: #dc3545; }
.rtap-note { display: block; font-size: .72rem; color: var(--rt-gray); margin-top: 10px; }

/* Read-only summary rows */
.rtap-facts { display: flex; flex-direction: column; gap: 0; }
.rtap-fact {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 0; border-bottom: 1px solid var(--rt-gray-light);
    font-size: .86rem;
}
.rtap-fact:last-child { border-bottom: none; }
.rtap-fact span { color: var(--rt-gray); display: inline-flex; align-items: center; gap: 8px; }
.rtap-fact span i { color: var(--rt-teal); width: 14px; text-align: center; }
.rtap-fact strong { color: var(--rt-gray-dark); font-weight: 700; text-align: right; word-break: break-word; }

/* Sessions table */
.rtap-sessions { width: 100%; border-collapse: collapse; font-size: .84rem; }
.rtap-sessions th {
    text-align: left; font-size: .68rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; color: var(--rt-gray);
    padding: 0 10px 9px 0; border-bottom: 1px solid var(--rt-gray-border);
}
.rtap-sessions td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--rt-gray-light); color: var(--rt-gray-dark); }
.rtap-sessions tr:last-child td { border-bottom: none; }
.rtap-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: rgba(40,167,69,.12); color: #1f9d4d;
}
.rtap-pill-bad { background: rgba(220,53,69,.12); color: #dc3545; }
.rtap-empty { font-size: .84rem; color: var(--rt-gray); margin: 0; }

@media (max-width: 992px) {
    .rtap-grid { grid-template-columns: 1fr; }
}


/* ── Bootstrap 4 → 5 close-button bridge ──────────────────────────────────
   Several admin views mark their modal close control as .btn-close, which is
   Bootstrap 5. The layout is on Bootstrap 4, which has no such class, so those
   buttons rendered as an empty invisible box — the modal could be opened but
   not closed. Only :empty ones are given a glyph, so a button that already
   carries its own × is left alone. See the modal bridge in _Layout. */
.btn-close {
    background: transparent; border: 0; padding: 0 .25rem; line-height: 1;
    font-size: 1.5rem; font-weight: 700; color: #000; opacity: .5; cursor: pointer;
}
.btn-close:hover { opacity: .85; }
.btn-close:empty::before { content: "\00d7"; }