/* ============================================
   NAZIL — Additional stylesheet
   Covers: auth, property detail, checkout,
   dashboard, admin, calendar, forms, states
   ============================================ */

/* ---------- Form elements ---------- */
.form-field { display:block; margin-bottom:18px; }
.form-field .form-label {
    display:block; font-size:13px; font-weight:600; margin-bottom:6px;
    color: var(--ink); letter-spacing:0.01em;
}
.form-field input, .form-field textarea, .form-field select, .form-input, .form-select {
    width:100%; padding:12px 14px;
    border:1.5px solid var(--stone-300);
    border-radius:12px; background:#fff;
    font-family:inherit; font-size:15px;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus,
.form-input:focus, .form-select:focus {
    outline:none; border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(200,90,62,0.12);
}
.form-field input:disabled { background: var(--stone-50); cursor:not-allowed; color: var(--stone-500); }
.form-field textarea { resize:vertical; min-height:100px; font-family:inherit; }

.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.form-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:640px) {
    .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns:1fr; }
}

.form-check, .filter-check, .filter-radio {
    display:flex; gap:10px; align-items:center; cursor:pointer;
    padding:8px 0; font-size:14px; color: var(--ink);
}
.form-check input, .filter-check input, .filter-radio input {
    width:18px; height:18px; accent-color: var(--terracotta); margin:0;
}
.form-row-between {
    display:flex; justify-content:space-between; align-items:center;
    margin: -4px 0 16px;
}
.link-muted { color: var(--stone-500); font-size:14px; text-decoration:none; }
.link-muted:hover { color: var(--terracotta); }

.form-select-inline {
    padding:4px 8px; font-size:13px; border:1px solid var(--stone-300);
    border-radius:8px; background:#fff;
}

/* ---------- Buttons additions ---------- */
.btn-block { display:block; width:100%; text-align:center; }
.btn-lg { padding:16px 28px; font-size:16px; border-radius:14px; }
.btn-sm { padding:7px 14px; font-size:13px; border-radius:10px; }
.btn-danger { color:#C43A3A; }
.btn-danger:hover { background: rgba(196,58,58,0.08); }
.btn-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border:none; background:transparent;
    border-radius:8px; cursor:pointer; font-size:15px;
    transition: background .15s;
}
.btn-icon:hover { background: var(--stone-100); }
.btn-icon-danger:hover { background: rgba(196,58,58,0.1); }
.btn-icon-active { color: var(--saffron); }

/* ---------- Alerts ---------- */
.alert {
    padding:14px 18px; border-radius:12px; margin-bottom:18px;
    font-size:14px; font-weight:500;
}
.alert-success { background: rgba(76,175,80,0.1); color:#2E7D32; border:1px solid rgba(76,175,80,0.3); }
.alert-error   { background: rgba(200,90,62,0.1); color: var(--terracotta); border:1px solid rgba(200,90,62,0.3); }
.alert-info    { background: rgba(33,150,243,0.08); color:#1565C0; border:1px solid rgba(33,150,243,0.25); }

/* ---------- Auth pages ---------- */
.auth-wrap {
    display:grid; grid-template-columns:1fr 1fr; min-height: calc(100vh - 80px);
}
.auth-visual { position:relative; overflow:hidden; }
.auth-visual img { width:100%; height:100%; object-fit:cover; }
.auth-visual-overlay {
    position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
    padding:48px; background: linear-gradient(to top, rgba(28,26,23,0.85), transparent 60%);
    color:#fff;
}
.auth-visual-overlay h2 { font-family: var(--font-display); font-size:44px; line-height:1.1; margin-bottom:12px; font-weight:400; }
.auth-visual-overlay p { opacity:0.9; font-size:16px; max-width:380px; }

.auth-form {
    display:flex; align-items:center; justify-content:center; padding:48px 32px;
    background: var(--cream);
}
.auth-form-inner { width:100%; max-width:420px; }
.auth-brand { display:inline-flex; margin-bottom:32px; }
.auth-form h1 { font-family: var(--font-display); font-size:36px; font-weight:400; margin-bottom:6px; color: var(--ink); }
.auth-sub { color: var(--stone-500); margin-bottom:28px; font-size:15px; }
.auth-switch { text-align:center; margin-top:24px; color: var(--stone-500); font-size:14px; }
.auth-switch a { color: var(--terracotta); font-weight:600; text-decoration:none; }
.auth-demo {
    margin-top:28px; padding:16px; background: rgba(232,163,61,0.08);
    border: 1px dashed rgba(232,163,61,0.4); border-radius:12px; font-size:13px;
}
.auth-demo-title { font-weight:700; margin-bottom:8px; color: var(--ink); }
.auth-demo ul { list-style:none; padding:0; margin:0; }
.auth-demo li { padding:3px 0; color: var(--stone-700); font-family: ui-monospace, monospace; }
.auth-demo strong { color: var(--ink); }

.role-switch {
    display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px;
}
.role-option {
    position:relative; padding:16px; border:2px solid var(--stone-300);
    border-radius:14px; cursor:pointer; background:#fff;
    transition: border-color .15s, background .15s;
}
.role-option input { position:absolute; opacity:0; pointer-events:none; }
.role-option.is-active { border-color: var(--terracotta); background: rgba(200,90,62,0.04); }
.role-option-title { display:block; font-weight:700; color: var(--ink); margin-bottom:4px; }
.role-option-sub { display:block; font-size:12px; color: var(--stone-500); }

@media (max-width: 960px) {
    .auth-wrap { grid-template-columns:1fr; }
    .auth-visual { min-height:220px; }
}

/* ---------- Property page ---------- */
.breadcrumb {
    display:flex; gap:8px; align-items:center; font-size:13px; color: var(--stone-500);
    padding:16px 0;
}
.breadcrumb a { color: var(--stone-500); text-decoration:none; }
.breadcrumb a:hover { color: var(--terracotta); }

.property-header { padding-bottom:20px; }
.property-title {
    font-family: var(--font-display); font-size:36px; line-height:1.15;
    color: var(--ink); font-weight:400; margin-bottom:10px;
}
.property-meta-row {
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    flex-wrap:wrap;
}
.property-meta-left { display:flex; gap:8px; align-items:center; font-size:14px; color: var(--ink); flex-wrap:wrap; }
.meta-rating { display:inline-flex; align-items:center; gap:4px; color: var(--ink); font-weight:600; }
.meta-rating-count { color: var(--stone-500); font-weight:400; margin-left:4px; }
.meta-sep { color: var(--stone-300); }
.property-actions { display:flex; gap:8px; }
.action-btn {
    display:inline-flex; gap:6px; align-items:center; padding:8px 14px;
    background:transparent; border:none; border-radius:10px; cursor:pointer;
    font-size:14px; font-weight:600; color: var(--ink); text-decoration:none;
    transition: background .15s;
}
.action-btn:hover { background: var(--stone-100); }
.action-btn.is-active { color: var(--terracotta); }
.action-btn.is-active .lbl-save { display:none; }
.action-btn:not(.is-active) .lbl-saved { display:none; }

.property-gallery {
    display:grid; grid-template-columns:2fr 1fr 1fr;
    grid-template-rows: 220px 220px;
    gap:8px; border-radius: var(--radius-lg); overflow:hidden;
    margin-bottom:40px;
}
.gallery-main { grid-row: span 2; }
.gallery-item {
    position:relative; padding:0; border:none; background:none; overflow:hidden;
    cursor:pointer; display:block;
}
.gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-more {
    position:absolute; bottom:12px; right:12px;
    background: rgba(28,26,23,0.85); color:#fff; padding:6px 12px;
    border-radius:999px; font-size:13px; font-weight:600;
}
[dir="rtl"] .gallery-more { right:auto; left:12px; }

.property-layout {
    display:grid; grid-template-columns: 1fr 420px; gap:48px;
    align-items:start;
}
.property-main > * + * { border-top: 1px solid var(--stone-100); padding-top:32px; margin-top:32px; }
.property-main > *:first-child { border-top:none; padding-top:0; margin-top:0; }

.section-heading {
    font-family: var(--font-display); font-size:24px; font-weight:400;
    color: var(--ink); margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.section-sub { color: var(--stone-500); font-size:14px; }

.host-row {
    display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.host-avatar { flex-shrink:0; }
.host-avatar img, .host-avatar-placeholder {
    width:56px; height:56px; border-radius:50%; object-fit:cover;
    background: var(--saffron); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:22px;
}

.highlights-grid { display:grid; grid-template-columns:1fr; gap:18px; }
.highlight-item {
    display:flex; gap:14px; align-items:flex-start;
    color: var(--ink);
}
.highlight-item > svg { flex-shrink:0; margin-top:2px; color: var(--terracotta); }
.highlight-item h4 { font-weight:600; margin-bottom:2px; font-size:15px; }
.highlight-item p { font-size:13px; color: var(--stone-500); }

.property-description p { color: var(--ink); line-height:1.75; font-size:15px; }

.amenities-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.amenity-item {
    display:flex; gap:12px; align-items:center;
    padding:10px 0; font-size:14px; color: var(--ink);
}
.amenity-item > svg { color: var(--stone-700); flex-shrink:0; }
.amenity-icon { font-size:18px; }

.map-static {
    position:relative; border-radius:16px; overflow:hidden;
    background: var(--stone-100); aspect-ratio: 16/8;
}
.map-static svg { width:100%; height:100%; display:block; }
.map-note {
    position:absolute; bottom:12px; left:12px;
    background:#fff; padding:8px 14px; border-radius:10px;
    font-size:13px; font-weight:600; color: var(--ink);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
[dir="rtl"] .map-note { left:auto; right:12px; }

.reviews-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.review-card {
    background:#fff; padding:20px;
    border:1px solid var(--stone-100); border-radius:16px;
}
.review-head { display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.review-avatar {
    width:44px; height:44px; border-radius:50%; overflow:hidden;
    background: var(--saffron); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; flex-shrink:0;
}
.review-avatar img { width:100%; height:100%; object-fit:cover; }
.review-head h4 { font-size:14px; font-weight:700; margin:0; color: var(--ink); }
.review-date { font-size:12px; color: var(--stone-500); margin:0; }
.review-stars { display:flex; gap:2px; margin-bottom:8px; color: var(--saffron); }
.review-card p { font-size:14px; line-height:1.6; color: var(--ink); }

.similar-grid {
    display:grid; grid-template-columns: repeat(4, 1fr); gap:20px;
}
@media (max-width: 960px) { .similar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .similar-grid { grid-template-columns: 1fr; } }

.property-section { margin-bottom: 40px; }

/* Booking card */
.property-side { position:sticky; top:100px; }
.booking-card {
    background:#fff; border:1px solid var(--stone-100);
    border-radius: var(--radius-lg); padding:24px;
    box-shadow: 0 6px 20px rgba(28,26,23,0.06);
}
.booking-card-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.booking-price strong { font-size:26px; color: var(--ink); font-family: var(--font-display); font-weight:500; }
.booking-price span { font-size:14px; color: var(--stone-500); margin-left:4px; }
.booking-rating { display:flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color: var(--ink); }

.booking-dates {
    display:grid; grid-template-columns:1fr 1fr;
    border:1.5px solid var(--stone-300); border-radius:14px; overflow:hidden;
    margin-bottom: 0;
}
.booking-dates label {
    display:block; padding:10px 14px; cursor:text;
    border-right:1.5px solid var(--stone-300);
}
[dir="rtl"] .booking-dates label { border-right:none; border-left:1.5px solid var(--stone-300); }
.booking-dates label:last-child { border-right:none; }
[dir="rtl"] .booking-dates label:last-child { border-left:none; }
.booking-dates label span {
    display:block; font-size:10px; font-weight:700; letter-spacing:0.08em;
    text-transform:uppercase; color: var(--ink); margin-bottom:2px;
}
.booking-dates input { border:none; padding:0; font-size:14px; width:100%; background:none; }
.booking-dates input:focus { box-shadow:none; outline:none; }

.booking-guests {
    display:block; padding:12px 14px; margin-top:-1.5px;
    border:1.5px solid var(--stone-300); border-radius:0 0 14px 14px;
    border-top: 0; cursor:text;
}
.booking-guests span {
    display:block; font-size:10px; font-weight:700; letter-spacing:0.08em;
    text-transform:uppercase; color: var(--ink); margin-bottom:2px;
}
.booking-guests select { border:none; padding:0; font-size:14px; width:100%; background:none; }
.booking-dates { border-radius:14px 14px 0 0; }

.booking-reserve { margin-top:16px; font-size:16px; padding:14px; }
.booking-notice { text-align:center; color: var(--stone-500); font-size:12px; margin-top:10px; }

.booking-breakdown { border-top:1px solid var(--stone-100); margin-top:18px; padding-top:16px; }
.breakdown-row {
    display:flex; justify-content:space-between; padding:6px 0;
    font-size:14px; color: var(--ink);
}
.breakdown-row span { color: var(--stone-700); }
.breakdown-total { border-top:1px solid var(--stone-100); margin-top:8px; padding-top:14px; font-size:16px; }
.breakdown-total strong { color: var(--ink); font-weight:700; }

@media (max-width: 960px) {
    .property-layout { grid-template-columns:1fr; gap:32px; }
    .property-side { position:static; }
    .property-gallery { grid-template-columns:1fr 1fr; grid-template-rows: 220px 180px 180px; }
    .gallery-main { grid-column: span 2; grid-row: auto; }
    .property-title { font-size:28px; }
    .reviews-grid { grid-template-columns:1fr; }
    .amenities-grid { grid-template-columns:1fr; }
}

/* ---------- Search/listings ---------- */
.search-page { padding: 20px 0 60px; }
.search-header {
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:24px; flex-wrap:wrap; gap:16px;
}
.search-title {
    font-family: var(--font-display); font-size:32px; font-weight:400;
    margin-bottom:6px; color: var(--ink);
}
.search-count { color: var(--stone-500); font-size:14px; }

.view-toggle { display:flex; gap:4px; background: var(--stone-100); padding:4px; border-radius:12px; }
.view-toggle-btn {
    width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:8px; color: var(--stone-700); text-decoration:none;
}
.view-toggle-btn.is-active { background:#fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.search-layout {
    display:grid; grid-template-columns: 280px 1fr; gap:32px; align-items:start;
}

.filters-sidebar {
    position:sticky; top:100px;
    background:#fff; border:1px solid var(--stone-100);
    border-radius:16px; padding:20px;
    max-height: calc(100vh - 120px); overflow-y:auto;
}
.filter-block { border-bottom:1px solid var(--stone-100); padding:16px 0; }
.filter-block:first-child { padding-top:0; }
.filter-block:last-child { border-bottom:none; padding-bottom:8px; }
.filter-title { font-size:14px; font-weight:700; color: var(--ink); margin-bottom:10px; }

.filter-chips { display:flex; flex-wrap:wrap; gap:6px; }
.filter-chip {
    padding:6px 12px; border:1.5px solid var(--stone-300); border-radius:999px;
    font-size:13px; cursor:pointer; background:#fff; color: var(--ink);
    transition: border-color .15s, background .15s;
}
.filter-chip input { display:none; }
.filter-chip.is-active { border-color: var(--ink); background: var(--ink); color:#fff; }

.filter-radios, .filter-checks { display:flex; flex-direction:column; gap:2px; }

.results-toolbar {
    display:flex; justify-content:flex-end; margin-bottom:16px;
}
.sort-select { display:flex; gap:8px; align-items:center; font-size:14px; }
.sort-select select {
    padding:8px 12px; border:1px solid var(--stone-300); border-radius:10px;
    background:#fff; font-size:14px;
}

.results-grid {
    display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;
}
@media (max-width:1100px) { .results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:600px)  { .results-grid { grid-template-columns: 1fr; } }

.results-list { grid-template-columns: 1fr; }
.results-list .property-card { display:grid; grid-template-columns: 320px 1fr; gap:20px; }
.results-list .property-card-media { aspect-ratio: 4/3; }
@media (max-width:600px) { .results-list .property-card { grid-template-columns:1fr; } }

.empty-state {
    text-align:center; padding:60px 24px; color: var(--stone-500);
}
.empty-state.small { padding:32px 16px; }
.empty-state svg { color: var(--stone-300); margin-bottom:16px; }
.empty-state h3 { font-family: var(--font-display); font-size:24px; color: var(--ink); margin-bottom:8px; font-weight:400; }
.empty-state p { margin-bottom:20px; }

.pagination {
    display:flex; gap:6px; justify-content:center; margin-top:40px;
}
.pg {
    min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--stone-300); border-radius:10px; color: var(--ink);
    text-decoration:none; font-size:14px; font-weight:500; padding: 0 8px;
}
.pg:hover { border-color: var(--ink); }
.pg.is-active { background: var(--ink); color:#fff; border-color: var(--ink); }
.pg.is-disabled { opacity:0.4; pointer-events:none; }
.pg-dots { display:inline-flex; align-items:center; padding: 0 8px; color: var(--stone-500); }

.map-wrap { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.map-placeholder { position:relative; border-radius:16px; overflow:hidden; }
.map-list { max-height:70vh; overflow-y:auto; }
@media (max-width:900px) { .map-wrap { grid-template-columns:1fr; } }

@media (max-width:900px) {
    .search-layout { grid-template-columns:1fr; }
    .filters-sidebar { position:static; max-height:none; }
}

/* ---------- Checkout ---------- */
.checkout-page { padding: 20px 0 80px; }
.checkout-title {
    font-family: var(--font-display); font-size:36px; font-weight:400;
    color: var(--ink); margin:20px 0 30px;
}
.checkout-layout {
    display:grid; grid-template-columns: 1.2fr 1fr; gap:40px; align-items:start;
}
.checkout-section {
    background:#fff; border:1px solid var(--stone-100);
    border-radius:16px; padding:24px; margin-bottom:20px;
}
.checkout-section h2 {
    font-family: var(--font-display); font-size:22px; font-weight:400;
    color: var(--ink); margin-bottom:16px;
}
.summary-dates {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;
    padding:16px; background: var(--stone-50); border-radius:12px;
}
.summary-dates > div span { display:block; font-size:12px; color: var(--stone-500); margin-bottom:4px; }
.summary-dates > div strong { color: var(--ink); }

.payment-methods { display:flex; flex-direction:column; gap:10px; }
.payment-method {
    display:block; padding:16px; border:1.5px solid var(--stone-300);
    border-radius:14px; cursor:pointer; background:#fff;
    transition: border-color .15s, background .15s;
}
.payment-method.is-active { border-color: var(--terracotta); background: rgba(200,90,62,0.03); }
.payment-method input { display:none; }
.payment-method-head { display:flex; align-items:center; gap:14px; }
.payment-method-icon { font-size:28px; }
.payment-method-head strong { display:block; color: var(--ink); margin-bottom:2px; }
.payment-method-head p { font-size:12px; color: var(--stone-500); margin:0; }

.booking-summary-card {
    position:sticky; top:100px;
    background:#fff; border:1px solid var(--stone-100);
    border-radius:16px; padding:24px;
    box-shadow: 0 6px 20px rgba(28,26,23,0.06);
}
.summary-property {
    display:flex; gap:12px; align-items:center;
    padding-bottom:16px; border-bottom:1px solid var(--stone-100);
}
.summary-property img { width:72px; height:72px; object-fit:cover; border-radius:12px; flex-shrink:0; }
.summary-property h3 { font-size:15px; font-weight:700; color: var(--ink); margin:0 0 4px; }
.summary-property p { font-size:13px; color: var(--stone-500); margin:0; }
.summary-breakdown { margin-top:16px; }

.checkout-success {
    max-width:520px; margin: 40px auto; text-align:center;
    background:#fff; border-radius:20px; padding:48px 32px;
    box-shadow: 0 10px 40px rgba(28,26,23,0.08);
}
.success-icon { color: #4CAF50; margin-bottom:16px; }
.checkout-success h1 { font-family: var(--font-display); font-size:32px; font-weight:400; margin-bottom:10px; }
.checkout-success > p { color: var(--stone-500); margin-bottom:24px; }
.success-summary {
    background: var(--stone-50); border-radius:12px; padding:20px;
    display:flex; flex-direction:column; gap:10px; text-align:left; margin-bottom:24px;
}
.success-summary > div { display:flex; justify-content:space-between; font-size:14px; }
.success-summary span { color: var(--stone-500); }
.success-summary strong { color: var(--ink); }
.success-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
[dir="rtl"] .success-summary { text-align:right; }

@media (max-width: 900px) {
    .checkout-layout { grid-template-columns:1fr; }
    .booking-summary-card { position:static; }
    .summary-dates { grid-template-columns:1fr; }
}

/* ---------- Dashboard ---------- */
.dashboard-layout {
    display:grid; grid-template-columns: 260px 1fr; gap:0;
    min-height: calc(100vh - 80px);
    align-items:stretch;
}
.dashboard-sidebar {
    background:#fff; border-right:1px solid var(--stone-100);
    padding:24px 16px; position:sticky; top:80px;
    align-self:start; max-height: calc(100vh - 80px); overflow-y:auto;
}
[dir="rtl"] .dashboard-sidebar { border-right:none; border-left:1px solid var(--stone-100); }

.dashboard-user {
    display:flex; gap:12px; align-items:center;
    padding:12px; margin-bottom:16px;
    background: var(--stone-50); border-radius:12px;
}
.dashboard-avatar, .mini-avatar {
    width:42px; height:42px; border-radius:50%;
    background: var(--saffron); color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:700; flex-shrink:0;
}
.admin-avatar { background: var(--ink); }
.mini-avatar { width:34px; height:34px; font-size:13px; }
.dashboard-user strong { display:block; font-size:14px; color: var(--ink); }
.role-tag {
    display:inline-block; padding:2px 8px;
    background: var(--stone-100); color: var(--stone-700);
    border-radius:999px; font-size:11px; margin-top:2px;
    text-transform: capitalize;
}
.role-tag-admin { background: var(--ink); color:#fff; }
.role-owner { background: rgba(232,163,61,0.2); color: #9A6A20; }
.role-customer { background: rgba(200,90,62,0.12); color: var(--terracotta); }
.role-admin { background: var(--ink); color:#fff; }

.dashboard-menu { display:flex; flex-direction:column; gap:2px; }
.dashboard-menu a {
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border-radius:10px;
    color: var(--stone-700); text-decoration:none;
    font-size:14px; font-weight:500;
    transition: background .15s, color .15s;
}
.dashboard-menu a:hover { background: var(--stone-50); color: var(--ink); }
.dashboard-menu a.is-active { background: var(--ink); color:#fff; }
.dashboard-menu-sep { height:1px; background: var(--stone-100); margin:8px 4px; }

.dashboard-main { padding:32px 40px; background: var(--cream); }
.dashboard-header {
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:28px; flex-wrap:wrap; gap:16px;
}
.dashboard-header h1 {
    font-family: var(--font-display); font-size:32px; font-weight:400;
    color: var(--ink); margin:0 0 4px;
}
.dashboard-header .text-muted { color: var(--stone-500); font-size:14px; }

.stat-cards {
    display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
    margin-bottom:32px;
}
.stat-card {
    background:#fff; border:1px solid var(--stone-100);
    border-radius:16px; padding:20px;
}
.stat-card.stat-accent {
    background: linear-gradient(135deg, var(--terracotta), #9F4830);
    color:#fff; border-color: transparent;
}
.stat-card.stat-accent .stat-label,
.stat-card.stat-accent .stat-foot { color: rgba(255,255,255,0.8); }
.stat-label { display:block; font-size:12px; font-weight:600; text-transform:uppercase;
    letter-spacing:0.06em; color: var(--stone-500); margin-bottom:8px; }
.stat-value { display:block; font-family: var(--font-display); font-size:28px; font-weight:500; color: var(--ink); }
.stat-foot { display:block; font-size:12px; color: var(--stone-500); margin-top:4px; }
.stat-card.stat-accent .stat-value { color:#fff; }

@media (max-width: 1024px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-cards { grid-template-columns: 1fr; } }

.dashboard-section {
    background:#fff; border:1px solid var(--stone-100);
    border-radius:16px; padding:24px; margin-bottom:20px;
}
.dashboard-section h2 {
    font-family: var(--font-display); font-size:22px; font-weight:400;
    color: var(--ink); margin:0 0 16px;
}

.admin-grid { display:grid; grid-template-columns: 2fr 1fr; gap:20px; }
@media (max-width:900px){ .admin-grid { grid-template-columns:1fr; } }

/* Tables */
.table-wrap { overflow-x:auto; }
.data-table {
    width:100%; border-collapse:separate; border-spacing:0;
    font-size:14px;
}
.data-table thead th {
    text-align:left; padding:12px 14px;
    font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.06em; color: var(--stone-500);
    background: var(--stone-50); border-bottom:1px solid var(--stone-100);
}
[dir="rtl"] .data-table thead th { text-align:right; }
.data-table tbody td {
    padding:14px; border-bottom:1px solid var(--stone-100);
    color: var(--ink); vertical-align:middle;
}
.data-table tbody tr:hover { background: var(--stone-50); }
.data-table code {
    font-family: ui-monospace, monospace; font-size:12px;
    background: var(--stone-100); padding:2px 8px; border-radius:6px;
    color: var(--stone-700);
}
.data-table a { color: var(--ink); text-decoration:none; font-weight:500; }
.data-table a:hover { color: var(--terracotta); }

.cell-user, .cell-property { display:flex; align-items:center; gap:10px; }
.mini-thumb { width:44px; height:44px; object-fit:cover; border-radius:8px; }

.row-actions { display:flex; gap:4px; justify-content:flex-end; }

.status-badge {
    display:inline-block; padding:4px 10px; border-radius:999px;
    font-size:11px; font-weight:700; letter-spacing:0.04em;
    text-transform: uppercase;
}
.status-pending    { background: rgba(232,163,61,0.18); color:#8A5A10; }
.status-confirmed  { background: rgba(76,175,80,0.15); color:#2E7D32; }
.status-completed  { background: rgba(33,150,243,0.12); color:#1565C0; }
.status-cancelled  { background: rgba(200,90,62,0.15); color: var(--terracotta); }
.status-active     { background: rgba(76,175,80,0.15); color:#2E7D32; }
.status-inactive   { background: var(--stone-100); color: var(--stone-700); }
.status-draft      { background: rgba(232,163,61,0.18); color:#8A5A10; }
.status-suspended  { background: rgba(200,90,62,0.15); color: var(--terracotta); }

.tab-bar {
    display:flex; gap:4px; margin-bottom:20px;
    border-bottom: 1px solid var(--stone-100);
}
.tab {
    padding:10px 18px; color: var(--stone-500); text-decoration:none;
    font-size:14px; font-weight:600; border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--terracotta); }

.admin-toolbar {
    display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; align-items:center;
}
.admin-toolbar .form-input, .admin-toolbar .form-select { width:auto; min-width:200px; }

.user-row-mini {
    display:grid; grid-template-columns: auto 1fr auto; gap:12px; align-items:center;
    padding:10px 0; border-bottom:1px solid var(--stone-100);
}
.user-row-mini:last-child { border-bottom:none; }
.user-row-mini strong { display:block; font-size:14px; color: var(--ink); }
.user-row-mini .text-muted { font-size:12px; margin:0; }

.props-grid { display:flex; flex-direction:column; gap:14px; }
.prop-row {
    display:grid; grid-template-columns: 120px 1fr auto; gap:20px; align-items:center;
    background:#fff; border:1px solid var(--stone-100);
    border-radius:14px; padding:14px;
}
.prop-row-img img { width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius:10px; }
.prop-row-body h3 { font-size:16px; color: var(--ink); margin:0 0 4px; }
.prop-row-body .text-muted { font-size:13px; color: var(--stone-500); margin:0 0 6px; }
.prop-row-meta { display:flex; gap:12px; font-size:12px; color: var(--stone-700); flex-wrap:wrap; }
.prop-row-actions { display:flex; gap:6px; flex-wrap:wrap; }

/* Booking cards (dashboard bookings view) */
.booking-cards { display:flex; flex-direction:column; gap:14px; }
.booking-card-row {
    display:grid; grid-template-columns: 140px 1fr auto; gap:20px;
    background:#fff; border:1px solid var(--stone-100);
    border-radius:14px; padding:14px;
}
.booking-card-row > img { width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius:10px; }
.booking-info h3 { font-size:16px; margin:0 0 6px; }
.booking-info h3 a { color: var(--ink); text-decoration:none; }
.booking-info h3 a:hover { color: var(--terracotta); }
.booking-info .text-muted { font-size:13px; margin:4px 0; }
.booking-dates-line { font-size:13px; margin:8px 0; color: var(--ink); }
.booking-actions-col {
    display:flex; flex-direction:column; align-items:flex-end; gap:8px;
    min-width:160px;
}
.booking-amount { font-family: var(--font-display); font-size:20px; color: var(--ink); }
.status-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

@media (max-width: 720px) {
    .prop-row, .booking-card-row { grid-template-columns: 1fr; }
    .booking-actions-col { align-items:flex-start; }
}

@media (max-width: 900px) {
    .dashboard-layout { grid-template-columns:1fr; }
    .dashboard-sidebar { position:static; max-height:none; border-right:none; border-bottom: 1px solid var(--stone-100); }
    .dashboard-main { padding: 24px 16px; }
}

/* ---------- Calendar ---------- */
.calendar-legend {
    display:flex; gap:20px; margin-bottom:20px; font-size:13px; color: var(--stone-700);
    flex-wrap:wrap;
}
.calendar-legend span { display:inline-flex; align-items:center; gap:6px; }
.dot { width:12px; height:12px; border-radius:3px; display:inline-block; }
.dot-available { background: var(--stone-50); border:1px solid var(--stone-300); }
.dot-booked { background: rgba(200,90,62,0.2); }
.dot-pending { background: rgba(232,163,61,0.3); }

.calendar-months { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
@media (max-width: 1100px) { .calendar-months { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .calendar-months { grid-template-columns: 1fr; } }
.calendar-month {
    background:#fff; border:1px solid var(--stone-100);
    border-radius:14px; padding:18px;
}
.calendar-month h3 {
    font-family: var(--font-display); font-size:16px; font-weight:500;
    margin:0 0 12px; color: var(--ink); text-align:center;
}
.calendar-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.cal-dow {
    text-align:center; font-size:11px; font-weight:700;
    color: var(--stone-500); padding:4px 0;
}
.cal-day {
    aspect-ratio: 1; display:flex; align-items:center; justify-content:center;
    font-size:13px; border-radius:8px; color: var(--ink);
    background: var(--stone-50); cursor:default;
}
.cal-empty { background:transparent; }
.cal-confirmed { background: rgba(200,90,62,0.25); color: var(--terracotta); font-weight:700; }
.cal-pending   { background: rgba(232,163,61,0.3); color:#8A5A10; font-weight:700; }
.cal-completed { background: rgba(33,150,243,0.15); color:#1565C0; }

/* ---------- Property form (owner) ---------- */
.form-card {
    background:#fff; border:1px solid var(--stone-100);
    border-radius:16px; padding:24px; margin-bottom:20px;
}
.form-card h3 {
    font-family: var(--font-display); font-size:20px; font-weight:400;
    color: var(--ink); margin:0 0 16px;
}
.amenities-check-grid {
    display:grid; grid-template-columns: repeat(3, 1fr); gap:6px 18px;
}
@media (max-width: 720px) { .amenities-check-grid { grid-template-columns: 1fr; } }

.upload-field {
    display:block; position:relative; cursor:pointer;
    border:2px dashed var(--stone-300); border-radius:14px;
    padding:40px 20px; text-align:center; transition: border-color .15s, background .15s;
}
.upload-field:hover { border-color: var(--terracotta); background: rgba(200,90,62,0.02); }
.upload-field input[type=file] {
    position:absolute; inset:0; opacity:0; cursor:pointer;
}
.upload-cta {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color: var(--stone-700); font-weight:600;
}
.upload-cta svg { color: var(--terracotta); }

.existing-images {
    display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; margin-top:16px;
}
.existing-images img {
    width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px;
}
@media (max-width:720px) { .existing-images { grid-template-columns: repeat(3, 1fr); } }

.form-actions { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }

/* ---------- About / Contact ---------- */
.about-hero { padding: 60px 0 40px; background: var(--cream); }
.about-hero-grid {
    display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center;
}
.eyebrow {
    display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.12em; color: var(--terracotta); margin-bottom:16px;
}
.about-title {
    font-family: var(--font-display); font-size:56px; line-height:1.05;
    font-weight:400; color: var(--ink); margin-bottom:20px;
}
.about-title em { font-style:italic; color: var(--terracotta); }
.about-intro { font-size:18px; line-height:1.6; color: var(--stone-700); max-width:480px; }
.about-hero-visual img { width:100%; border-radius: var(--radius-lg); object-fit:cover; aspect-ratio: 4/5; }

.about-stats { padding: 40px 0; background:#fff; }
.stats-grid {
    display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; text-align:center;
}
.stat-block strong {
    display:block; font-family: var(--font-display); font-size:40px;
    font-weight:500; color: var(--terracotta); margin-bottom:6px;
}
.stat-block span { font-size:14px; color: var(--stone-500); }

.about-values { padding: 60px 0; }
.section-title {
    font-family: var(--font-display); font-size:40px; font-weight:400;
    text-align:center; margin-bottom:40px; color: var(--ink);
}
.values-grid {
    display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;
}
.value-card {
    background:#fff; border:1px solid var(--stone-100);
    border-radius: var(--radius-lg); padding:32px;
}
.value-icon { font-size:40px; margin-bottom:16px; }
.value-card h3 { font-family: var(--font-display); font-size:22px; font-weight:500; color: var(--ink); margin-bottom:10px; }
.value-card p { color: var(--stone-700); line-height:1.6; }

.about-cta { padding: 60px 0 80px; }
.cta-inner {
    background: linear-gradient(135deg, var(--ink), #2E2A24);
    color:#fff; border-radius: var(--radius-xl);
    padding: 60px 40px; text-align:center;
}
.cta-inner h2 { font-family: var(--font-display); font-size:40px; font-weight:400; margin-bottom:24px; }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media (max-width: 900px) {
    .about-hero-grid, .stats-grid, .values-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .about-title { font-size:40px; }
}

.contact-page { padding: 40px 0 80px; }
.contact-layout { display:grid; grid-template-columns: 1fr 1.2fr; gap:48px; align-items:start; }
.contact-intro h1 { font-family: var(--font-display); font-size:36px; font-weight:400; margin-bottom:16px; }
.contact-intro > p { color: var(--stone-700); font-size:16px; line-height:1.6; margin-bottom:24px; }
.contact-info { display:flex; flex-direction:column; gap:14px; }
.contact-info-item {
    display:flex; gap:14px; align-items:center; padding:14px;
    background:#fff; border:1px solid var(--stone-100); border-radius:12px;
}
.contact-icon { font-size:20px; }
.contact-info-item strong { display:block; color: var(--ink); margin-bottom:2px; font-size:13px; }
.contact-info-item p { margin:0; color: var(--stone-700); font-size:14px; }

.contact-form-wrap {
    background:#fff; border:1px solid var(--stone-100);
    border-radius: var(--radius-lg); padding:32px;
}

@media (max-width: 900px) {
    .contact-layout { grid-template-columns:1fr; }
}

/* ---------- Profile ---------- */
.profile-form { background:#fff; padding:32px; border:1px solid var(--stone-100); border-radius:16px; }

/* ---------- Text helpers ---------- */
.text-muted { color: var(--stone-500); }

/* ---------- Settings form ---------- */
.settings-form { max-width:820px; }

/* ---------- Utilities ---------- */
@media print {
    .dashboard-sidebar, .header, .footer { display:none; }
}