/* =========================================================
   MARKDECODE RENTALS — PREMIUM BRAND CSS
   ---------------------------------------------------------
   Primary Navy      : #08285C
   Dark Navy         : #061D45
   Orange            : #FF6500
   White             : #FFFFFF
   Light Navy Tint   : #EEF3F8
   Charcoal          : #1D2939
   Orange Hover      : #D95400
   ========================================================= */

:root{
  /* Brand Colors */
  --primary: #08285C;
  --primary-dark: #061D45;
  --orange: #FF6500;
  --orange-hover: #D95400;
  --white: #FFFFFF;
  --light: #EEF3F8;
  --charcoal: #1D2939;

  /* Premium UI Colors */
  --muted: #667085;
  --border: #D9E2EC;
  --surface: #FFFFFF;
  --surface-soft: #F7F9FC;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(6,29,69,.06);
  --shadow-md: 0 8px 24px rgba(6,29,69,.10);
  --shadow-lg: 0 18px 45px rgba(6,29,69,.15);
  --shadow-orange: 0 10px 26px rgba(255,101,0,.24);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --transition: .25s ease;
}

/* ===== Base ===== */
*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:'Montserrat','Inter','Poppins',sans-serif;
  background:var(--surface-soft);
  color:var(--charcoal);
  -webkit-font-smoothing:antialiased;
}

a{
  text-decoration:none;
  color:inherit;
}

button,
.btn,
.form-control,
.form-select{
  transition:all var(--transition);
}

/* ===== Typography ===== */
h1,h2,h3,h4,h5,h6{
  color:var(--primary-dark);
  font-weight:700;
  letter-spacing:-.02em;
}

.text-primary{
  color:var(--primary)!important;
}

.text-dark{
  color:var(--charcoal)!important;
}

.text-orange,
.text-brand-orange{
  color:var(--orange)!important;
}

.text-muted{
  color:var(--muted)!important;
}

/* ===== Navbar ===== */
.app-navbar{
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 72%,#103C78 100%);
  box-shadow:0 4px 18px rgba(6,29,69,.18);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.app-navbar .navbar-brand{
  color:var(--white)!important;
  font-weight:800;
}

.app-navbar .nav-link{
  position:relative;
  color:rgba(255,255,255,.84)!important;
  font-weight:600;
  padding:.75rem 1rem!important;
}

.app-navbar .nav-link:hover{
  color:var(--white)!important;
}

.app-navbar .nav-link.active{
  color:var(--white)!important;
  font-weight:700;
}

.app-navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:5px;
  height:3px;
  background:var(--orange);
  border-radius:99px;
}

/* Orange CTA in navbar */
.app-navbar .btn-brand-orange,
.app-navbar .btn-orange{
  background:var(--orange)!important;
  color:var(--white)!important;
  border:1px solid var(--orange)!important;
  box-shadow:0 5px 16px rgba(255,101,0,.25);
}

.app-navbar .btn-brand-orange:hover,
.app-navbar .btn-orange:hover{
  background:var(--orange-hover)!important;
  border-color:var(--orange-hover)!important;
  transform:translateY(-1px);
}

/* ===== Hero / Search ===== */
.hero{
  position:relative;
  overflow:hidden;
  color:var(--white);
  padding:58px 0 105px;
  border-radius:0 0 34px 34px;
  background:
    radial-gradient(circle at 85% 15%,rgba(255,101,0,.18),transparent 25%),
    linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 62%,#16447F 100%);
}

.hero::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-180px;
  top:-230px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
}

.hero::after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:80px;
  bottom:-190px;
  border:1px solid rgba(255,101,0,.20);
  border-radius:50%;
}

.hero h1{
  position:relative;
  z-index:2;
  color:var(--white);
  font-weight:800;
  font-size:clamp(2rem,4vw,3.3rem);
  line-height:1.1;
}

.hero h1 span,
.hero .highlight{
  color:var(--orange);
}

.hero p{
  position:relative;
  z-index:2;
  color:rgba(255,255,255,.78);
}

/* ===== Premium Search Card ===== */
.search-card{
  position:relative;
  z-index:5;
  background:var(--white);
  border:1px solid rgba(8,40,92,.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:20px;
  margin-top:-70px;
}

.search-card .form-control,
.search-card .form-select{
  min-height:48px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--white);
  color:var(--charcoal);
}

.search-card .form-control:focus,
.search-card .form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(8,40,92,.10);
}

.quick-chip{
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  margin:4px 6px 0 0;
  border:1px solid rgba(255,255,255,.30);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:var(--white);
  font-size:.82rem;
  font-weight:600;
  backdrop-filter:blur(8px);
}

.quick-chip:hover{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--white);
  transform:translateY(-1px);
}

/* ===== Buttons ===== */
.btn-primary{
  background:var(--primary)!important;
  border-color:var(--primary)!important;
  color:var(--white)!important;
  font-weight:700;
  box-shadow:0 5px 14px rgba(8,40,92,.16);
}

.btn-primary:hover,
.btn-primary:focus{
  background:var(--primary-dark)!important;
  border-color:var(--primary-dark)!important;
  color:var(--white)!important;
  transform:translateY(-1px);
}

.btn-brand-orange,
.btn-orange{
  background:var(--orange)!important;
  border-color:var(--orange)!important;
  color:var(--white)!important;
  font-weight:700;
  box-shadow:var(--shadow-orange);
}

.btn-brand-orange:hover,
.btn-orange:hover,
.btn-brand-orange:focus,
.btn-orange:focus{
  background:var(--orange-hover)!important;
  border-color:var(--orange-hover)!important;
  color:var(--white)!important;
  transform:translateY(-1px);
}

.btn-outline-primary{
  color:var(--primary)!important;
  border-color:var(--primary)!important;
  font-weight:700;
}

.btn-outline-primary:hover{
  background:var(--primary)!important;
  color:var(--white)!important;
}

.btn-outline-orange{
  color:var(--orange)!important;
  border:1px solid var(--orange)!important;
  background:transparent;
  font-weight:700;
}

.btn-outline-orange:hover{
  background:var(--orange)!important;
  color:var(--white)!important;
}

/* ===== Property Cards ===== */
.property-card{
  height:100%;
  overflow:hidden;
  background:var(--white);
  border:1px solid rgba(8,40,92,.07);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}

.property-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,101,0,.25);
  box-shadow:var(--shadow-lg);
}

.property-card .img-wrap{
  position:relative;
  height:210px;
  overflow:hidden;
  background:var(--light);
}

.property-card .img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

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

.property-card .badge-status{
  position:absolute;
  top:12px;
  left:12px;
  background:var(--orange)!important;
  color:var(--white)!important;
  border-radius:999px;
  padding:6px 11px;
  font-weight:700;
}

.property-card .badge-price{
  position:absolute;
  right:12px;
  bottom:12px;
  background:var(--primary-dark);
  color:var(--white);
  padding:6px 12px;
  border-radius:9px;
  font-weight:700;
  font-size:.86rem;
  box-shadow:0 5px 14px rgba(6,29,69,.25);
}

.property-card .body{
  padding:17px;
}

.property-card .title{
  color:var(--primary-dark);
  font-weight:700;
  font-size:1.04rem;
  margin-bottom:4px;
}

.property-card .loc,
.property-card .meta{
  color:var(--muted);
}

.property-card .btn-whatsapp{
  background:var(--orange);
  color:var(--white);
  border:none;
  font-weight:700;
}

.property-card .btn-whatsapp:hover{
  background:var(--orange-hover);
  color:var(--white);
  transform:translateY(-1px);
}

/* ===== Section Titles ===== */
.section-title{
  color:var(--primary-dark);
  font-weight:800;
  margin-bottom:5px;
}

.section-title::after{
  content:"";
  display:block;
  width:42px;
  height:4px;
  margin-top:9px;
  border-radius:99px;
  background:var(--orange);
}

.section-sub{
  color:var(--muted);
  margin-bottom:26px;
}

/* ===== Premium Info Sections ===== */
.brand-section,
.info-card,
.content-card{
  background:var(--white);
  border:1px solid rgba(8,40,92,.07);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

.info-card:hover,
.content-card:hover{
  border-color:rgba(255,101,0,.20);
  box-shadow:var(--shadow-md);
}

/* ===== Property Details ===== */
.detail-gallery img{
  width:100%;
  height:390px;
  object-fit:cover;
  border-radius:var(--radius);
}

.detail-thumbs img{
  width:100%;
  height:74px;
  object-fit:cover;
  border-radius:9px;
  cursor:pointer;
  border:2px solid transparent;
}

.detail-thumbs img.active-thumb{
  border-color:var(--orange);
  box-shadow:0 4px 12px rgba(255,101,0,.20);
}

.amenity-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--light);
  color:var(--primary);
  padding:7px 13px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  margin:0 6px 6px 0;
  border:1px solid rgba(8,40,92,.06);
}

.amenity-pill i{
  color:var(--orange);
}

.sticky-enquiry{
  position:sticky;
  top:90px;
}

/* ===== Forms ===== */
.form-label{
  color:var(--primary-dark);
  font-weight:600;
}

.form-control,
.form-select{
  color:var(--charcoal);
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
}

.form-control::placeholder{
  color:#98A2B3;
}

.form-control:focus,
.form-select:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(255,101,0,.10);
}

/* ===== Alerts / Badges ===== */
.badge-brand{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--light);
  color:var(--primary);
  font-weight:700;
}

.badge-orange{
  background:var(--orange)!important;
  color:var(--white)!important;
}

.alert-brand{
  background:var(--light);
  color:var(--primary-dark);
  border:1px solid rgba(8,40,92,.10);
  border-left:4px solid var(--orange);
  border-radius:10px;
}

/* ===== Footer ===== */
.site-footer{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  color:rgba(255,255,255,.80);
  border-top:3px solid var(--orange);
}

.site-footer h5,
.site-footer h6{
  color:var(--white);
}

.footer-link{
  color:rgba(255,255,255,.70);
  transition:color var(--transition);
}

.footer-link:hover{
  color:var(--orange);
}

/* ===== Bottom Mobile Navigation ===== */
.bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1030;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);
  box-shadow:0 -8px 25px rgba(6,29,69,.10);
  padding:7px 0 5px;
  border-top:1px solid rgba(8,40,92,.08);
}

.bn-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  flex:1;
  padding:4px 0;
  color:#8A94A6;
  font-size:.68rem;
  font-weight:600;
}

.bn-item i{
  font-size:1.25rem;
}

.bn-item.active,
.bn-item:hover{
  color:var(--primary);
}

.bn-item.bn-center{
  margin-top:-24px;
}

.bn-item.bn-center i{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--orange);
  color:var(--white);
  font-size:1.5rem;
  border:4px solid var(--white);
  box-shadow:0 8px 20px rgba(255,101,0,.32);
}

.bn-item.bn-center span{
  color:var(--orange);
  font-weight:700;
}

/* ===== Admin ===== */
.admin-sidebar{
  min-height:100vh;
  width:240px;
  background:linear-gradient(180deg,var(--primary-dark),var(--primary));
  color:var(--white);
  box-shadow:8px 0 25px rgba(6,29,69,.10);
}

.admin-sidebar .brand{
  color:var(--white);
  font-weight:800;
}

.admin-sidebar a{
  display:block;
  margin:3px 8px;
  padding:11px 18px;
  border-radius:9px;
  color:rgba(255,255,255,.72);
  font-size:.92rem;
  font-weight:500;
}

.admin-sidebar a:hover{
  color:var(--white);
  background:rgba(255,255,255,.08);
}

.admin-sidebar a.active{
  color:var(--white);
  background:var(--orange);
  box-shadow:0 6px 16px rgba(255,101,0,.22);
}

.admin-topbar{
  background:var(--white);
  border-bottom:1px solid rgba(8,40,92,.07);
  box-shadow:var(--shadow-sm);
}

.stat-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  padding:20px;
  color:var(--white);
  box-shadow:var(--shadow-md);
}

.stat-card::after{
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  right:-35px;
  top:-35px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}

.stat-card.primary{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
}

.stat-card.orange{
  background:linear-gradient(135deg,var(--orange-hover),var(--orange));
}

.thumb-sm{
  width:60px;
  height:50px;
  object-fit:cover;
  border-radius:7px;
}

/* ===== Login ===== */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:
    radial-gradient(circle at 80% 15%,rgba(255,101,0,.17),transparent 28%),
    linear-gradient(135deg,var(--primary-dark),var(--primary));
}

.login-box{
  width:100%;
  max-width:420px;
  padding:36px;
  background:var(--white);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius-lg);
  box-shadow:0 25px 65px rgba(6,29,69,.28);
}

.login-box .logo-accent{
  color:var(--orange);
}

/* ===== Brand Divider ===== */
.brand-divider{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-divider::before,
.brand-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--border);
}

.brand-divider span{
  color:var(--orange);
  font-weight:800;
}

/* ===== Tables ===== */
.table{
  --bs-table-color:var(--charcoal);
  --bs-table-bg:var(--white);
  border-color:var(--border);
}

.table thead th{
  background:var(--primary-dark);
  color:var(--white);
  border-color:var(--primary-dark);
  font-weight:700;
}

.table tbody tr:hover{
  background:var(--light);
}

.table .price,
.table .highlight{
  color:var(--orange);
  font-weight:800;
}

/* ===== Pagination ===== */
.pagination .page-link{
  color:var(--primary);
  border-color:var(--border);
}

.pagination .page-item.active .page-link{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--white);
}

.pagination .page-link:hover{
  color:var(--white);
  background:var(--orange);
  border-color:var(--orange);
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background:var(--light);
}

::-webkit-scrollbar-thumb{
  background:var(--primary);
  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
  background:var(--orange);
}

/* ===== Selection ===== */
::selection{
  background:var(--orange);
  color:var(--white);
}

/* ===== Responsive ===== */
@media (max-width:991.98px){
  body{
    padding-bottom:70px;
  }

  .hero{
    padding:34px 0 88px;
    border-radius:0 0 24px 24px;
  }

  .hero h1{
    font-size:1.7rem;
  }

  .search-card{
    margin-top:-55px;
  }

  .detail-gallery img{
    height:300px;
  }

  .sticky-enquiry{
    position:static;
  }
}

@media (max-width:575.98px){
  .hero{
    padding:30px 0 76px;
  }

  .search-card{
    padding:14px;
    border-radius:14px;
  }

  .property-card .img-wrap{
    height:185px;
  }

  .login-box{
    padding:25px 20px;
  }
}