/* =====================================================================
   Sheltuz — PropertyPro-inspired theme
   Loaded after the existing stylesheets so it can safely override them.
   ===================================================================== */
:root{
  --sh-primary:#1061e4;
  --sh-primary-dark:#1061e4;
  --sh-accent:#f5afba;
  --sh-text:#222;
  --sh-muted:#6b7280;
  --sh-bg:white;
  --sh-border:#e5e7eb;
  --sh-radius:5px;
}

body{ color:var(--sh-text); background:#fff; }
a{ transition:color .15s ease; }

/* ---------- Top utility bar ---------- */
.sh-topbar{
  background:var(--sh-primary-dark); color:#dce6f7; font-size:12.5px;
}
.sh-topbar .container{ display:flex; justify-content:space-between; align-items:center; padding:6px 15px; }
.sh-topbar a{ color:#dce6f7; margin-left:16px; text-decoration:none; }
.sh-topbar a:hover{ color:#fff; }

/* ---------- Main navbar ---------- */
.sh-navbar{ background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06); position:relative; z-index:200; }
.sh-navbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; flex-wrap:wrap; }
.sh-navbar .container{ display:flex; align-items:center; justify-content:space-between; padding:12px 15px; flex-wrap:wrap; }
.sh-logo{ display:flex; align-items:center; font-weight:800; font-size:22px; color:var(--sh-primary); text-decoration:none; margin-left:10px; }
.sh-logo img{ height:42px; margin-right:8px; }
.sh-nav-links{ display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; }
.sh-nav-links a{ color:#33415c; font-weight:600; text-decoration:none; font-size:14.5px; }
.sh-nav-links a:hover, .sh-nav-links a.active{ color:var(--sh-primary); }
.sh-nav-links .dropdown{ position:relative; }
.sh-nav-links .dropdown-menu{
  display:none; position:absolute; top:130%; left:0; background:#fff; min-width:200px;
  box-shadow:0 10px 25px rgba(0,0,0,.12); border-radius:8px; padding:8px 0; list-style:none; margin:0;
}
.sh-nav-links .dropdown:hover .dropdown-menu{ display:block; }
.sh-nav-links .dropdown-menu li a{ display:block; padding:8px 18px; font-weight:500; color:#33415c; }
.sh-nav-links .dropdown-menu li a:hover{ background:var(--sh-bg); color:var(--sh-primary); }

.sh-nav-actions{ display:flex; align-items:center; gap:10px; }
.sh-btn{ display:inline-block; padding:9px 18px; border-radius:6px; font-weight:700; font-size:13.5px; text-decoration:none; border:1px solid transparent; }
.sh-btn-outline{ border-color:var(--sh-primary); color:var(--sh-primary); background:#fff; }
.sh-btn-outline:hover{ background:var(--sh-primary); color:#fff; }
.sh-btn-primary{ background:var(--sh-primary); color:#fff; }
.sh-btn-primary:hover{ background:var(--sh-primary-dark); color:#fff; }
.sh-btn-classifieds{ background:var(--sh-accent); color:#fff; box-shadow:0 4px 12px rgba(255,106,0,.35); }
.sh-btn-classifieds:hover{ background:#e05f00; color:#fff; }

.sh-nav-toggle{ display:none; background:none; border:none; font-size:26px; color:var(--sh-primary); }

/* ---------- Hero + search ---------- */
.sh-hero{
  background:linear-gradient(180deg, rgba(8,58,128,.92), rgba(8,58,128,.82)), url('../img/bg/bg1.jpg') center/cover;
  padding:40px 15px; color:#fff; text-align:center;
}
.sh-hero h1{ font-size:34px; font-weight:800; margin-bottom:8px; }
.sh-hero p{ font-size:16px; opacity:.9; margin:0; }
.sh-hero-tabs{ display:inline-flex; background:rgba(255,255,255,.15); border-radius:8px 8px 0 0; overflow:hidden; }
.sh-hero-tabs a{ padding:10px 22px; color:#fff; font-weight:700; text-decoration:none; font-size:14px; }
.sh-hero-tabs a.active{ background:#fff; color:var(--sh-primary); border-radius:8px 8px 0 0; }

.sh-classifieds-cta{
  max-width:900px; margin:14px auto 0; display:flex; align-items:center; justify-content:center; gap:10px;
}

/* ---------- Homepage hero carousel ----------
   One fixed aspect-ratio box that scales fluidly with the viewport width,
   so the carousel looks the same — same proportions, same layout of
   arrows/dots/caption — on a phone as on a desktop, just smaller. Slides
   are laid out side by side and moved with a transform on the track;
   only the active slide is visible thanks to overflow:hidden on the frame. */
.sh-carousel{ position:relative; width:100%; overflow:hidden; background:#0d1b34; }
.sh-carousel-frame{ position:relative; width:100%; aspect-ratio:21/8; overflow:hidden; }
.sh-carousel-track{ display:flex; width:100%; height:100%; transition:transform .5s ease; will-change:transform; }
.sh-carousel-slide{ position:relative; flex:0 0 100%; width:100%; height:100%; }
.sh-carousel-slide img{
  width:100%; height:100%; object-fit:cover; display:block; max-width:none;
}
.sh-carousel-slide a{ display:block; width:100%; height:100%; }
.sh-carousel-caption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 20px 40px;
  background:linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  color:#fff; pointer-events:none;
}
.sh-carousel-caption h3{ margin:0 0 4px; font-size:clamp(15px, 2.6vw, 24px); font-weight:800; }
.sh-carousel-caption p{ margin:0; font-size:clamp(11px, 1.6vw, 14px); opacity:.9; }

.sh-carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(13,27,52,.55); color:#fff; font-size:16px; display:flex;
  align-items:center; justify-content:center; transition:background .15s ease;
}
.sh-carousel-arrow:hover{ background:rgba(13,27,52,.85); }
.sh-carousel-arrow.prev{ left:12px; }
.sh-carousel-arrow.next{ right:12px; }

.sh-carousel-dots{
  position:absolute; left:0; right:0; bottom:12px; z-index:5;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.sh-carousel-dots button{
  width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.5); transition:background .15s ease, transform .15s ease;
}
.sh-carousel-dots button.active{ background:#fff; transform:scale(1.25); }

@media (max-width:640px){
  .sh-carousel-frame{ aspect-ratio:4/3; }
  .sh-carousel-arrow{ width:30px; height:30px; font-size:13px; }
  .sh-carousel-arrow.prev{ left:6px; }
  .sh-carousel-arrow.next{ right:6px; }
  .sh-carousel-caption{ padding:10px 14px 26px; }
}

/* ---------- Homepage search card (sits below the carousel) ----------
   Two stacked rows on every screen size: type + county dropdowns share
   the top row, keyword + search button share the row below. Keeping the
   same two-row shape at every width is what makes "dropdowns share a
   row, search bar sits below them" true on small screens without needing
   a different layout on larger ones. */
.sh-search-section{ background:var(--sh-bg); padding:34px 15px 44px; }
.sh-search-card{
  max-width:900px; margin:0 auto; background:#fff; border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.1); padding:18px; display:flex; flex-direction:column; gap:10px;
}
.sh-search-row{ display:flex; gap:10px; }
.sh-search-row-types > *{ flex:1 1 0; min-width:0; }
.sh-search-row-submit input[type=text]{
  flex:1 1 auto; min-width:0; border:1px solid var(--sh-border); border-radius:6px; padding:12px 14px; font-size:14px;
}
.sh-search-row-submit button{
  flex:0 0 auto; background:var(--sh-primary); color:#fff; border:none; border-radius:6px;
  padding:12px 28px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.sh-search-row-submit button:hover{ background:var(--sh-primary-dark); }
@media (max-width:480px){
  .sh-search-row-submit{ flex-wrap:wrap; }
  .sh-search-row-submit button{ flex:1 1 100%; }
}

/* ---------- Section headers ---------- */
.sh-section-title{ text-align:left; max-width:1180px; margin:0 auto 34px; }
.sh-section-title h2{ font-size:26px; font-weight:800; color:var(--sh-text); }
.sh-section-title p{ color:var(--sh-muted); font-size:14.5px; margin-top:6px; }

/* ---------- Listing cards ---------- */
.sh-card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:22px; }
.sh-card{
  background:#fff; border:1px solid var(--sh-border); border-radius:var(--sh-radius); overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04); transition:transform .15s ease, box-shadow .15s ease;
}
.sh-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.1); }
.sh-card img{ width:100%; height:180px; object-fit:cover; }
.sh-card-body{ padding:14px; }
.sh-card-price{ color:var(--sh-primary); font-weight:800; font-size:16px; }
.sh-card-title{ font-weight:600; font-size:14.5px; margin:4px 0; color:var(--sh-text); }
.sh-card-loc{ color:var(--sh-muted); font-size:12.5px; }

/* ---------- Footer ---------- */
.sh-footer{ background:#1061e4; color:#c9d3e3; padding:50px 0 0; }
.sh-footer h4{ color:#fff; font-size:15px; font-weight:700; margin-bottom:16px; }
.sh-footer ul{ list-style:none; padding:0; margin:0; }
.sh-footer ul li{ margin-bottom:9px; }
.sh-footer a{ color:#aebbd1; text-decoration:none; font-size:13.5px; }
.sh-footer a:hover{ color:#fff; }
.sh-footer-bottom{ border-top:1px solid rgba(255,255,255,.08); margin-top:30px; padding:16px 0; text-align:center; font-size:12.5px; color:#8fa0bd; }
.sh-social a{ display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border-radius:50%; margin-right:8px; }

/* ---------- Delete-warning modal ---------- */
.sh-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999; align-items:center; justify-content:center; }
.sh-modal-overlay.active{ display:flex; }
.sh-modal{ background:#fff; border-radius:10px; max-width:420px; width:92%; padding:26px; text-align:center; }
.sh-modal .sh-modal-icon{ font-size:38px; color:#e02424; margin-bottom:10px; }
.sh-modal h3{ font-size:18px; margin-bottom:8px; }
.sh-modal p{ color:var(--sh-muted); font-size:13.5px; margin-bottom:20px; }
.sh-modal-actions{ display:flex; gap:10px; justify-content:center; }
.sh-modal-actions button, .sh-modal-actions a{ padding:10px 20px; border-radius:6px; font-weight:700; font-size:13.5px; border:none; cursor:pointer; text-decoration:none; }
.sh-modal-cancel{ background:#f1f2f4; color:#333; }
.sh-modal-confirm{ background:#e02424; color:#fff; }

@media (max-width:991px){
  .sh-nav-links{ display:none; }
  .sh-nav-toggle{ display:block; }
  /* Classifieds / Login / Sign up / Post Ad move into the hamburger menu on
     small screens — keeping them in the header row too just crowds it.
     "My Account" is the one button that stays inline. */
  .sh-nav-hide-mobile{ display:none; }
  /* Keep logo, "My Account", and the toggle all on one line: no wrapping,
     and an explicit order so the toggle is always the rightmost element
     regardless of whether "My Account" is present (logged out = just
     logo + toggle, still far right). */
  .sh-navbar-inner{ flex-wrap:nowrap; }
  .sh-logo{ order:1; }
  .sh-nav-actions{ order:2; }
  .sh-nav-toggle{ order:3; }
}

/* Exactly 2 listing cards per row on small screens, regardless of the
   260px minimum used on larger screens (which would otherwise force
   a single column and waste horizontal space on a phone). */
@media (max-width:640px){
  .sh-card-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .sh-card img{ height:110px; }
  .sh-card-body{ padding:10px; }
  .sh-card-price{ font-size:14px; }
  .sh-card-title{ font-size:12.5px; }
}

/* =====================================================================
   Extended for the ground-up rebuild: base layout, forms, admin shell
   ===================================================================== */
*{ box-sizing:border-box; }
body{ font-family:'Segoe UI', Arial, sans-serif; margin:0; }
.sh-container{ max-width:1180px; margin:0 auto; padding:0 20px; }
img{ max-width:100%; }
.sh-page-section{ padding:10px 0; }
.sh-page-section.alt{ background:var(--sh-bg); }

/* Buttons already defined above (.sh-btn etc). Add block/full-width & sizes */
.sh-btn-block{ display:block; width:100%; text-align:center; }
.sh-btn-lg{ padding:13px 26px; font-size:15px; }

/* ---------- Forms ---------- */
.sh-form-group{ margin-bottom:16px; }
.sh-form-group label{ display:block; font-weight:600; font-size:13.5px; margin-bottom:6px; color:#33415c; }
.sh-input, .sh-select, textarea.sh-input{
  width:100%; padding:11px 14px; border:1px solid var(--sh-border); border-radius:6px; font-size:14px; background:#fff;
}
.sh-input:focus, .sh-select:focus{ outline:none; border-color:var(--sh-primary); box-shadow:0 0 0 3px rgba(11,79,174,.12); }
.sh-form-row{ display:flex; gap:14px; flex-wrap:wrap; }
.sh-form-row > *{ flex:1 1 200px; }
.sh-form-card{ background:#fff; border:1px solid var(--sh-border); border-radius:12px; padding:30px; max-width:520px; margin:0 auto; }
.sh-form-card.wide{ max-width:820px; }
.sh-form-card h2{ margin-top:0; }
.sh-alert{ padding:12px 16px; border-radius:8px; font-size:13.5px; margin-bottom:16px; }
.sh-alert-error{ background:#fdecea; color:#a12622; border:1px solid #f6c1bd; }
.sh-alert-success{ background:#e9f8ee; color:#1f7a3d; border:1px solid #bfe8cc; }

/* ---------- Rich text (listing descriptions — Quill editor + rendered output) ---------- */
.sh-rich-editor .ql-toolbar.ql-snow{ border:1px solid var(--sh-border); border-radius:6px 6px 0 0; background:#f7f8fa; }
.sh-rich-editor .ql-container.ql-snow{ border:1px solid var(--sh-border); border-radius:0 0 6px 6px; font-size:14px; min-height:160px; }
.sh-rich-editor .ql-editor{ min-height:160px; }
.sh-rich-text{ line-height:1.8; }
.sh-rich-text p{ margin:0 0 12px; }
.sh-rich-text ul, .sh-rich-text ol{ margin:0 0 12px; padding-left:22px; }
.sh-rich-text blockquote{ margin:0 0 12px; padding-left:14px; border-left:3px solid var(--sh-border); color:#666; }
.sh-rich-text a{ color:var(--sh-primary); }
.sh-rich-text h1, .sh-rich-text h2, .sh-rich-text h3{ margin:16px 0 8px; }

/* ---------- Filter sidebar (property / classifieds search) ---------- */
.sh-search-layout{ display:grid; grid-template-columns:270px 1fr; gap:28px; align-items:start; }
.sh-filter-box{ background:#fff; border:1px solid var(--sh-border); border-radius:10px; padding:20px; position:sticky; top:20px; }
.sh-filter-box h4{ font-size:14px; margin:0 0 14px; }
.sh-filter-box .sh-form-group:last-child{ margin-bottom:0; }
@media (max-width:900px){ .sh-search-layout{ grid-template-columns:1fr; } .sh-filter-box{ position:static; } }

/* ---------- Pagination ---------- */
.sh-pagination{ display:flex; gap:6px; justify-content:center; margin-top:30px; }
.sh-pagination a, .sh-pagination span{ padding:8px 14px; border:1px solid var(--sh-border); border-radius:6px; color:#33415c; text-decoration:none; font-size:13.5px; }
.sh-pagination a:hover{ background:var(--sh-bg); }
.sh-pagination .active{ background:var(--sh-primary); color:#fff; border-color:var(--sh-primary); }

/* ---------- Badges ---------- */
.sh-badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; }
.sh-badge-live{ background:#e9f8ee; color:#1f7a3d; }
.sh-badge-suspended{ background:#fdecea; color:#a12622; }

/* ---------- Detail page ---------- */
.sh-detail-layout{ display:grid; grid-template-columns:2fr 1fr; gap:30px; }
.sh-detail-gallery img{ width:100%; border-radius:10px; margin-bottom:10px; }
.sh-detail-price{ font-size:26px; font-weight:800; color:var(--sh-primary); }
.sh-contact-card{ background:#fff; border:1px solid var(--sh-border); border-radius:10px; padding:20px; position:sticky; top:20px; }
@media (max-width:900px){ .sh-detail-layout{ grid-template-columns:1fr; } }

/* ---------- Breadcrumb / page header ---------- */
.sh-page-head{ background:var(--sh-primary-dark); color:#fff; padding:30px 0; }
.sh-page-head h1{ margin:0; font-size:24px; }
.sh-breadcrumb a{ color:#cfe0f7; text-decoration:none; font-size:12.5px; }
.sh-breadcrumb span{ color:#fff; font-size:12.5px; }

/* ---------- Admin shell ---------- */
/* ---------- Admin / user-portal shell ----------
   Large screens: sidebar is fixed full-height against the left edge of
   the viewport (top:0 to bottom:0) — not a floating card — so it always
   reaches the top, bottom, and left side of the screen. Main content is
   offset by the sidebar's width via margin-left.
   Small screens: sidebar stays fixed/full-height but slides off-screen
   by default, and a toggle button (fixed in place, so it's reachable
   even after scrolling a long page) brings it in as an overlay. */
.sh-admin{ min-height:100vh; }
.sh-admin-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:230px; z-index:950;
  background:#0d1b34; color:#c9d3e3; padding:20px 0;
  box-shadow:4px 0 24px rgba(0,0,0,.12); overflow-y:auto;
}
.sh-admin-sidebar a{ display:block; padding:11px 22px; color:#c9d3e3; text-decoration:none; font-size:13.5px; }
.sh-admin-sidebar a:hover, .sh-admin-sidebar a.active{ background:rgba(255,255,255,.08); color:#fff; }
.sh-admin-sidebar .brand{ padding:0 22px 20px; font-weight:800; color:#fff; font-size:18px; }
.sh-admin-main{ margin-left:230px; padding:24px 24px 40px; min-height:100vh; }
.sh-admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.sh-admin-card{ background:#fff; border-radius:10px; padding:22px; border:1px solid var(--sh-border); margin-bottom:20px; }
.sh-admin-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.sh-admin-table th, .sh-admin-table td{ padding:10px 12px; border-bottom:1px solid var(--sh-border); text-align:left; }
.sh-admin-table th{ background:#f7f8fa; font-weight:700; color:#33415c; }

/* Sidebar toggle button — hidden on large screens (sidebar is always
   visible there). On small screens it's fixed in the corner so it stays
   reachable no matter how far down the page has been scrolled. */
.sh-sidebar-toggle{
  display:none; align-items:center; gap:8px; background:#fff; border:1px solid var(--sh-border);
  border-radius:8px; padding:10px 16px; font-weight:700; font-size:13.5px; color:#33415c;
  cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.sh-sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:900; }
.sh-sidebar-backdrop.active{ display:block; }

@media (max-width:900px){
  .sh-admin-main{ margin-left:0; padding:70px 16px 40px; }
  .sh-sidebar-toggle{
    display:inline-flex; position:fixed; top:14px; left:16px; z-index:960;
  }
  .sh-admin-sidebar{
    width:250px; max-width:80vw; transform:translateX(-100%); transition:transform .25s ease;
  }
  .sh-admin-sidebar.open{ transform:translateX(0); }
  body{ overflow-x:hidden; }
}
.sh-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.sh-stat-card{ background:#fff; border-radius:10px; padding:20px; border:1px solid var(--sh-border); }
.sh-stat-card .num{ font-size:28px; font-weight:800; color:var(--sh-primary); }

/* ---------- Bottom nav (small screens only) ----------
   Home / Post Ad / Property / Profile, fixed to the bottom of the viewport.
   Replaces the floating "+ Post Ad" button on mobile (hidden below, same
   breakpoint) so the two don't sit on top of each other. */
.sh-bottom-nav{ display:none; }
.sh-floating-post-ad{ display:block; }
@media (max-width:767px){
  .sh-floating-post-ad{ display:none; }
  body{ padding-bottom:60px; }
  .sh-bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:800;
    background:#fff; border-top:1px solid var(--sh-border); box-shadow:0 -4px 12px rgba(0,0,0,.08);
  }
  .sh-bottom-nav a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; padding:8px 4px 10px; color:#8a94a6; text-decoration:none; font-size:11px;
  }
  .sh-bottom-nav a i{ font-size:18px; }
  .sh-bottom-nav a.active{ color:var(--sh-primary); }
}