/**
 * RENTAL GATES — Discover Page Styles
 *
 * Public property search page: filters + map + property cards
 * Responsive split-panel layout with light/dark theme support.
 */

/* ═══════════════════════════════════════
   BASE / VARIABLES — LIGHT THEME (default)
   ═══════════════════════════════════════ */

.rg-discover {
    --rg-bg: #f8fafc;
    --rg-surface: #ffffff;
    --rg-surface-2: #f1f5f9;
    --rg-surface-3: #e2e8f0;
    --rg-border: rgba(0,0,0,0.08);
    --rg-border-strong: rgba(0,0,0,0.12);
    --rg-text: #0f172a;
    --rg-text-secondary: #475569;
    --rg-text-muted: #94a3b8;
    --rg-accent: #10b981;
    --rg-accent-hover: #059669;
    --rg-accent-subtle: rgba(16,185,129,0.08);
    --rg-accent-border: rgba(16,185,129,0.2);
    --rg-danger: #ef4444;
    --rg-info: #3b82f6;
    --rg-radius: 10px;
    --rg-transition: 0.2s ease;
    --rg-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --rg-shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
    --rg-input-bg: rgba(0,0,0,0.03);
    --rg-hover: rgba(0,0,0,0.03);
    --rg-overlay: rgba(0,0,0,0.4);

    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--rg-bg);
    color: var(--rg-text);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ═══════════════════════════════════════
   DARK THEME OVERRIDE
   ═══════════════════════════════════════ */

.rg-discover.rg-theme-dark {
    --rg-bg: #0a0f1a;
    --rg-surface: #111827;
    --rg-surface-2: #1e293b;
    --rg-surface-3: #334155;
    --rg-border: rgba(255,255,255,0.06);
    --rg-border-strong: rgba(255,255,255,0.1);
    --rg-text: #e2e8f0;
    --rg-text-secondary: #94a3b8;
    --rg-text-muted: #64748b;
    --rg-accent-subtle: rgba(16,185,129,0.1);
    --rg-accent-border: rgba(16,185,129,0.2);
    --rg-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --rg-shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
    --rg-input-bg: rgba(255,255,255,0.05);
    --rg-hover: rgba(255,255,255,0.04);
    --rg-overlay: rgba(0,0,0,0.7);
}

.rg-discover.rg-discover--detail {
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
}


/* ═══════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════ */

.rg-discover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--rg-surface);
    border-bottom: 1px solid var(--rg-border);
    flex-shrink: 0;
    z-index: 100;
}

.rg-discover-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    color: var(--rg-text);
    text-decoration: none;
}

.rg-discover-logo-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}

.rg-discover-search-bar {
    flex: 1;
    max-width: 500px;
    margin: 0 24px;
    position: relative;
}

.rg-discover-search-bar input {
    width: 100%; box-sizing: border-box;
    padding: 10px 16px 10px 40px;
    border-radius: 10px;
    border: 1px solid var(--rg-border);
    background: var(--rg-surface-2);
    color: var(--rg-text);
    font-size: 14px;
    outline: none;
    transition: border-color var(--rg-transition);
}

.rg-discover-search-bar input:focus {
    border-color: var(--rg-accent);
}

.rg-discover-search-bar input::placeholder {
    color: var(--rg-text-muted);
}

.rg-discover-search-bar svg {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--rg-text-muted);
    width: 16px; height: 16px;
}

.rg-discover-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rg-discover-theme-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--rg-border);
    background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--rg-text-secondary);
    transition: all var(--rg-transition);
}
.rg-discover-theme-btn:hover {
    background: var(--rg-surface-2);
    color: var(--rg-text);
}
.rg-discover-theme-btn svg { width: 16px; height: 16px; }

.rg-discover-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--rg-border);
    background: transparent;
    color: var(--rg-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--rg-transition);
    font-family: inherit;
    text-decoration: none;
}

.rg-discover-btn:hover {
    background: var(--rg-surface-2);
    color: var(--rg-text);
}

.rg-discover-btn--primary {
    background: var(--rg-accent);
    color: #fff;
    border-color: var(--rg-accent);
}

.rg-discover-btn--primary:hover {
    background: var(--rg-accent-hover);
}


/* ═══════════════════════════════════════
   MAIN LAYOUT: Filters | Map+Cards
   ═══════════════════════════════════════ */

.rg-discover-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}


/* ═══════════════════════════════════════
   FILTERS SIDEBAR
   ═══════════════════════════════════════ */

.rg-discover-filters {
    width: 280px;
    flex-shrink: 0;
    background: var(--rg-surface);
    border-right: 1px solid var(--rg-border);
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rg-filter-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--rg-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.rg-filter-group select,
.rg-filter-group input[type="number"] {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--rg-border);
    background: var(--rg-surface-2);
    color: var(--rg-text);
    font-size: 13px;
    outline: none;
    font-family: inherit;
}

.rg-filter-group select:focus,
.rg-filter-group input[type="number"]:focus {
    border-color: var(--rg-accent);
}

.rg-filter-range {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rg-filter-range span {
    color: var(--rg-text-muted);
    font-size: 12px;
}

/* Checkbox group (bedrooms, types, amenities) */
.rg-filter-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rg-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--rg-border);
    background: transparent;
    color: var(--rg-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--rg-transition);
    font-family: inherit;
}

.rg-filter-chip:hover {
    border-color: var(--rg-accent);
    color: var(--rg-accent);
}

.rg-filter-chip.active {
    background: rgba(16, 185, 129, 0.12);
    border-color: var(--rg-accent);
    color: var(--rg-accent);
}

.rg-filter-apply {
    padding: 10px;
    border-radius: 8px;
    border: none;
    background: var(--rg-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--rg-transition);
    font-family: inherit;
    margin-top: auto;
}

.rg-filter-apply:hover { background: var(--rg-accent-hover); }

.rg-filter-clear {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--rg-border);
    background: transparent;
    color: var(--rg-text-muted);
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
}

.rg-filter-clear:hover { color: var(--rg-text-secondary); border-color: var(--rg-text-muted); }


/* ═══════════════════════════════════════
   CONTENT AREA: Map + Cards
   ═══════════════════════════════════════ */

.rg-discover-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rg-discover-map {
    height: 45%;
    min-height: 250px;
    position: relative;
}

.rg-discover-map-container {
    width: 100%;
    height: 100%;
}

.rg-discover-map-overlay {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    z-index: 500;
}

.rg-search-area-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    background: var(--rg-surface);
    color: var(--rg-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all var(--rg-transition);
    font-family: inherit;
    display: none;
}

.rg-search-area-btn.visible { display: block; }
.rg-search-area-btn:hover { background: var(--rg-surface-2); }


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

.rg-discover-cards {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--rg-bg);
}

.rg-discover-cards-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rg-discover-count {
    font-size: 13px;
    color: var(--rg-text-muted);
}

.rg-discover-sort select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--rg-border);
    background: var(--rg-surface);
    color: var(--rg-text-secondary);
    font-size: 12px;
    font-family: inherit;
}

.rg-discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.rg-property-card {
    background: var(--rg-surface);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--rg-transition);
}

.rg-property-card:hover {
    border-color: rgba(16, 185, 129, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.rg-property-card.highlighted {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.rg-property-card-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: var(--rg-surface-2);
}

.rg-property-card-img-placeholder {
    width: 100%;
    height: 160px;
    background: var(--rg-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rg-text-muted);
    font-size: 32px;
}

.rg-property-card-body {
    padding: 14px;
}

.rg-property-card-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--rg-accent);
}

.rg-property-card-price span {
    font-size: 12px;
    font-weight: 400;
    color: var(--rg-text-muted);
}

.rg-property-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rg-text);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rg-property-card-location {
    font-size: 12px;
    color: var(--rg-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rg-property-card-meta {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--rg-border);
}

.rg-property-card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--rg-text-secondary);
}

.rg-property-card-meta-item svg { width: 14px; height: 14px; }

.rg-property-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 14px;
}

.rg-save-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--rg-border);
    background: transparent;
    color: var(--rg-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--rg-transition);
    font-family: inherit;
}

.rg-save-btn:hover { border-color: var(--rg-accent); color: var(--rg-accent); }
.rg-save-btn.saved { background: rgba(239,68,68,0.1); border-color: var(--rg-danger); color: var(--rg-danger); }

.rg-load-more {
    display: block;
    margin: 20px auto;
    padding: 10px 28px;
    border-radius: 8px;
    border: 1px solid var(--rg-border);
    background: var(--rg-surface);
    color: var(--rg-text-secondary);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}

.rg-load-more:hover { border-color: var(--rg-accent); color: var(--rg-accent); }

/* Empty state */
.rg-discover-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--rg-text-muted);
    text-align: center;
}

.rg-discover-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.rg-discover-empty-title { font-size: 16px; font-weight: 600; color: var(--rg-text-secondary); }
.rg-discover-empty-text { font-size: 13px; margin-top: 6px; }


/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

@media (max-width: 900px) {
    .rg-discover-filters {
        display: none;
    }

    .rg-discover-body {
        flex-direction: column;
    }

    .rg-discover-map {
        height: 200px;
        min-height: 200px;
    }

    .rg-discover-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 600px) {
    .rg-discover-header {
        padding: 10px 14px;
    }

    .rg-discover-search-bar {
        margin: 0 12px;
    }

    .rg-discover-logo span {
        display: none;
    }

    .rg-discover-grid {
        grid-template-columns: 1fr;
    }

    .rg-property-card-img,
    .rg-property-card-img-placeholder {
        height: 140px;
    }
}


/* ═══════════════════════════════════════
   RTL SUPPORT
   ═══════════════════════════════════════ */

[dir="rtl"] .rg-discover-filters {
    border-right: none;
    border-left: 1px solid var(--rg-border);
}

[dir="rtl"] .rg-discover-search-bar svg {
    left: auto;
    right: 14px;
}

[dir="rtl"] .rg-discover-search-bar input {
    padding-left: 16px;
    padding-right: 40px;
}


/* ═══════════════════════════════════════
   BUILDING DETAIL PAGE
   ═══════════════════════════════════════ */

.rg-bd {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 28px 60px;
    animation: rg-fade-in 0.25s ease;
}

/* Back button */
.rg-bd-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; border: 1px solid var(--rg-border-strong);
    background: transparent; color: var(--rg-text-secondary); font-size: 13px;
    cursor: pointer; font-family: inherit; margin-bottom: 16px;
    transition: all 0.15s;
}
.rg-bd-back:hover { background: var(--rg-hover); color: var(--rg-text); }

/* Gallery */
.rg-bd-gallery {
    display: grid; gap: 4px; border-radius: 14px; overflow: hidden;
    height: 340px; margin-bottom: 24px;
}
.rg-bd-gallery--1 { grid-template-columns: 1fr; }
.rg-bd-gallery--2 { grid-template-columns: 1.5fr 1fr; }
.rg-bd-gallery--3 { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; }
.rg-bd-gallery-main { grid-row: 1 / -1; }
.rg-bd-gallery-img { overflow: hidden; position: relative; }
.rg-bd-gallery-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.3s;
}
.rg-bd-gallery-img:hover img { transform: scale(1.03); }

.rg-bd-gallery-empty {
    height: 220px; background: var(--rg-surface-2); border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
}
.rg-bd-gallery-placeholder { font-size: 64px; opacity: 0.3; }

/* Header */
.rg-bd-header { margin-bottom: 28px; }
.rg-bd-name {
    font-size: 28px; font-weight: 800; color: var(--rg-text);
    letter-spacing: -0.02em; line-height: 1.2;
}
.rg-bd-address {
    font-size: 14px; color: var(--rg-text-muted); margin-top: 8px;
}

/* Tags */
.rg-bd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rg-bd-tag {
    display: inline-block; padding: 4px 12px; border-radius: 20px;
    font-size: 12px; font-weight: 500; text-transform: capitalize;
    background: var(--rg-input-bg); color: var(--rg-text-secondary);
    border: 1px solid var(--rg-border);
}
.rg-bd-tag--green {
    background: var(--rg-accent-subtle); color: var(--rg-accent);
    border-color: var(--rg-accent-border);
}

/* Two-column body */
.rg-bd-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.rg-bd-left, .rg-bd-right { min-width: 0; }

/* Sections */
.rg-bd-section { margin-bottom: 24px; }
.rg-bd-section-title {
    font-size: 16px; font-weight: 700; color: var(--rg-text);
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.rg-bd-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; border-radius: 12px;
    background: var(--rg-accent-subtle); color: var(--rg-accent);
    font-size: 12px; font-weight: 700; padding: 0 6px;
}

/* Description */
.rg-bd-desc {
    font-size: 14px; line-height: 1.8; color: var(--rg-text-secondary);
    margin: 0; white-space: pre-wrap;
}

/* Amenities */
.rg-bd-amenities { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-bd-amenity {
    display: inline-block; padding: 6px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 500; text-transform: capitalize;
    background: var(--rg-accent-subtle); color: var(--rg-accent);
    border: 1px solid var(--rg-accent-border);
}

/* Contact */
.rg-bd-contact {
    background: var(--rg-surface); border: 1px solid var(--rg-border);
    border-radius: 12px; padding: 16px 20px;
    box-shadow: var(--rg-shadow);
}
.rg-bd-contact .rg-bd-section-title { margin-bottom: 10px; }
.rg-bd-contact-row {
    font-size: 14px; color: var(--rg-text-secondary); margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
}
.rg-bd-contact-row:last-child { margin-bottom: 0; }
.rg-bd-contact-row a { color: var(--rg-accent); text-decoration: none; }
.rg-bd-contact-row a:hover { text-decoration: underline; }

/* Virtual tour link */
.rg-bd-tour-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; border-radius: 10px;
    background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2);
    color: var(--rg-info); font-size: 13px; font-weight: 600;
    text-decoration: none; transition: all 0.15s;
}
.rg-bd-tour-link:hover { background: rgba(59,130,246,0.14); }

/* Map */
.rg-bd-map {
    height: 240px; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--rg-border);
}

/* Units list */
.rg-bd-units { display: flex; flex-direction: column; gap: 8px; }
.rg-bd-unit {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 14px 16px;
    background: var(--rg-surface-2); border: 1px solid var(--rg-border);
    border-radius: 10px; transition: border-color 0.15s;
}
.rg-bd-unit:hover { border-color: var(--rg-accent-border); }

.rg-bd-unit-info { flex: 1; min-width: 0; }
.rg-bd-unit-meta {
    font-size: 13px; font-weight: 600; color: var(--rg-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rg-bd-unit-title {
    font-size: 12px; color: var(--rg-text-muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rg-bd-unit-price {
    font-size: 15px; font-weight: 700; color: var(--rg-accent); margin-top: 4px;
}

.rg-bd-unit-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.rg-bd-save-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--rg-border-strong); background: transparent;
    color: var(--rg-text-muted); font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.rg-bd-save-btn:hover { background: var(--rg-hover); color: var(--rg-text); }
.rg-bd-save-btn.saved { color: var(--rg-danger); border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.06); }

/* No units state */
.rg-bd-no-units {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 40px 20px;
    background: var(--rg-surface); border-radius: 12px;
    border: 1px solid var(--rg-border);
    font-size: 14px; color: var(--rg-text-muted);
}
.rg-bd-no-units-icon { font-size: 36px; opacity: 0.3; margin-bottom: 10px; }

/* Responsive */
@media (max-width: 768px) {
    .rg-bd { padding: 16px 16px 40px; }
    .rg-bd-gallery { height: 200px; }
    .rg-bd-name { font-size: 22px; }
    .rg-bd-body { grid-template-columns: 1fr; gap: 0; }
    .rg-bd-unit { flex-direction: column; align-items: stretch; }
    .rg-bd-unit-actions { justify-content: flex-end; margin-top: 8px; }
}
@media (max-width: 480px) {
    .rg-bd-gallery { height: 160px; }
    .rg-bd-gallery--2,
    .rg-bd-gallery--3 { grid-template-columns: 1fr; grid-template-rows: auto; }
    .rg-bd-gallery-main { grid-row: auto; }
}


/* ═══════════════════════════════════════
   APPLICATION MODAL
   ═══════════════════════════════════════ */

.rg-app-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--rg-overlay); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: rg-fade-in 0.2s ease;
}
@keyframes rg-fade-in { from { opacity: 0; } to { opacity: 1; } }

.rg-app-modal {
    background: var(--rg-surface); border: 1px solid var(--rg-border-strong);
    border-radius: 16px; width: 100%; max-width: 560px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: var(--rg-shadow-lg);
    animation: rg-slide-up 0.25s ease;
}
@keyframes rg-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.rg-app-modal-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--rg-border);
}
.rg-app-modal-title { font-size: 18px; font-weight: 700; color: var(--rg-text); }
.rg-app-modal-sub { font-size: 13px; color: var(--rg-text-muted); margin-top: 3px; }
.rg-app-modal-close {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: var(--rg-input-bg); color: var(--rg-text-secondary);
    font-size: 20px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
    transition: all 0.15s;
}
.rg-app-modal-close:hover { background: var(--rg-hover); color: var(--rg-text); }

.rg-app-modal-body { padding: 20px 24px; }

.rg-app-section { margin-bottom: 16px; }
.rg-app-section-label {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--rg-text-muted); margin-bottom: 10px;
    padding-bottom: 6px; border-bottom: 1px solid var(--rg-border);
}

.rg-app-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.rg-app-field { margin-bottom: 10px; }
.rg-app-field label {
    display: block; font-size: 12px; font-weight: 500;
    color: var(--rg-text-secondary); margin-bottom: 4px;
}
.rg-app-field input,
.rg-app-field select,
.rg-app-field textarea {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--rg-border-strong);
    background: var(--rg-input-bg); color: var(--rg-text);
    font-size: 13px; font-family: inherit; outline: none;
    transition: border-color 0.15s;
}
.rg-app-field input:focus,
.rg-app-field select:focus,
.rg-app-field textarea:focus { border-color: var(--rg-accent); }
.rg-app-field select { appearance: auto; }
.rg-app-field textarea { resize: vertical; }

.rg-app-modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 16px; margin-top: 8px;
    border-top: 1px solid var(--rg-border);
}

.rg-app-error {
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px; padding: 10px 14px; margin-bottom: 12px;
    font-size: 13px; color: var(--rg-danger);
}


/* ═══════════════════════════════════════
   SUCCESS TOAST
   ═══════════════════════════════════════ */

.rg-app-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--rg-surface); border: 1px solid var(--rg-accent-border);
    border-radius: 10px; padding: 14px 20px; z-index: 10000;
    font-size: 14px; font-weight: 600; color: var(--rg-accent);
    box-shadow: var(--rg-shadow-lg);
    opacity: 0; transition: all 0.3s ease; text-align: center;
    font-family: 'DM Sans', -apple-system, sans-serif;
}
.rg-app-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.rg-app-toast small { font-weight: 400; color: var(--rg-text-secondary); }

@media (max-width: 600px) {
    .rg-app-modal { max-height: 100vh; border-radius: 0; }
    .rg-app-row { grid-template-columns: 1fr; }
    .rg-app-modal-overlay { padding: 0; align-items: stretch; }
}