/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(120deg, #6a00ff, #b100ff);
  min-height: 100vh;
  color: white;
}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;

  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.logo {
  font-size: 22px;
  font-weight: bold;
}

/* NAV LINKS */
.navbar nav {
  display: flex;
  gap: 25px;
}

.navbar a {
  color: white;
  text-decoration: none;
  font-size: 15px;
  transition: 0.3s;
}

.navbar a:hover {
  color: #ffd6ff;
  transform: translateY(-2px);
}

/* AUTH BUTTON */
.btn {
  background: rgba(255,255,255,0.2);
  border: none;
  padding: 8px 18px;
  border-radius: 25px;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.btn:hover {
  background: rgba(255,255,255,0.4);
}

/* HERO */


.hero {
  text-align: center;

  padding: 20px 20px 10px;   /* ✅ reduced top padding */

  display: flex;
  flex-direction: column;

  justify-content: flex-start;   /* ✅ THIS IS THE KEY FIX ✅ */
  align-items: center;

  gap: 12px;   /* tighter spacing */
}


.hero h1 {
  font-size: 50px;
  margin-bottom: 10px;   /* ✅ tighter spacing */
}

.hero p {
  font-size: 20px;
  opacity: 0.9;
  margin-bottom: 15px;   /* ✅ ADD THIS */
}

/* CTA BUTTON */
.cta {
  padding: 12px 32px;
  border-radius: 30px;
  border: none;
  background: white;
  color: #6a00ff;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.cta:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* CARD (Properties) */
.card {
  backdrop-filter: blur(15px);
  background: rgba(255,255,255,0.1);
  padding: 15px;
  border-radius: 12px;
  margin: 10px;
  width: 250px;
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.2);
}

/* PAGE */
.page {
  padding: 30px;
}

/* MATERIAL FORM */
input {
  padding: 8px;
  border-radius: 6px;
  border: none;
  margin: 0;
}

button {
  padding: 8px 15px;
  border-radius: 6px;
  border: none;
  background: #fff;
  color: #6a00ff;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #e6d6ff;
}

/* TABLE */
table {
  width: 100%;
  margin-top: 20px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  overflow: hidden;
}

table th, table td {
  padding: 10px;
  text-align: center;
}

/* LOGIN CARD */
.login-card {
  width: 300px;
  margin: 100px auto;
  padding: 30px;
  border-radius: 15px;
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.1);
  text-align: center;
  animation: fadeIn 1s ease;
}

/* ANIMATION */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ✅ RESPONSIVE DESIGN */
@media (max-width: 768px) {

  .navbar {
    flex-direction: column;
    gap: 10px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .hero p {
    font-size: 16px;
  }

 
}

/* ================= MATERIAL FORM ================= */

.form-grid, .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-end;
}

label {
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}

input {
  padding: 8px;
  border-radius: 6px;
  border: none;
}

.btn-align {
  display: flex;
  align-items: flex-end;
}

/* TABLE IMPROVEMENT */
table {
  width: 100%;
  margin-top: 20px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
}

table th, table td {
  padding: 10px;
  text-align: center;
}


/* PROPERTY CARD BUTTON */
.card button {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.3);
  color: white;
  transition: 0.3s;
}

.card button:hover {
  background: rgba(255,255,255,0.5);
}

/* MATERIAL FORM */
.form-grid, .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-end;
}

label {
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}

.btn-align {
  display: flex;
  align-items: flex-end;
}
``

/* EDIT FORM */
#editForm input {
  width: 100%;
  margin-bottom: 8px;
}

#editForm button {
  margin-right: 10px;
}

/* PROPERTY BUTTON */
.card button {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.3);
  color: white;
}

.card button:hover {
  background: rgba(255,255,255,0.5);
}

/* ================= IMAGE PREVIEW FIX ================= */


/* ✅ PROPERTY IMAGE (bigger + better) */

.property-img {
  height: 120px;        /* ✅ fixed height */
  width: auto;          /* ✅ width adjusts */
  max-width: 160px;     /* ✅ optional cap */
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

.property-img:hover {
  transform: scale(1.08);
}

/* ✅ PROPERTY CARD IMPROVEMENT */




/* ✅ TITLE */
.prop-title {
  font-size: 20px;
  margin-bottom: 8px;
}

/* ✅ LOCATION TEXT */
.prop-location {
  font-size: 14px;
  margin-bottom: 10px;
}

/* ✅ PRICE TEXT */
.prop-price {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

/* ✅ LABEL STYLE */
.label {
  font-weight: bold;
  opacity: 0.9;
}

.actions {
  margin-top: 12px;
}


/* row of images */

.img-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;   /* ✅ IMPORTANT */
  margin-top: 10px;
}


/* fullscreen modal */
.preview-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* full image */
#previewImg {
  max-width: 90%;
  max-height: 85%;
  border-radius: 10px;
}

/* close button */
.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 32px;
  color: white;
  cursor: pointer;
}

/* navigation arrows */
.nav {
  position: absolute;
  top: 50%;
  font-size: 40px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
}

.nav.left {
  left: 30px;
}

.nav.right {
  right: 30px;
}

#previewImg {
  transition: 0.3s ease;
}

/* ================= CONFIRM MODAL ================= */

.confirm-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.confirm-box {
  background: white;
  color: black;
  padding: 20px 30px;
  border-radius: 10px;
  text-align: center;
  width: 300px;
}

.confirm-box h3 {
  margin-bottom: 10px;
}

.confirm-box p {
  margin-bottom: 20px;
}

.confirm-actions {
  display: flex;
  justify-content: space-around;
}

.yes-btn {
  background: red;
  color: white;
  padding: 8px 15px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.no-btn {
  background: gray;
  color: white;
  padding: 8px 15px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.yes-btn:hover {
  background: darkred;
}

.no-btn:hover {
  background: black;
}

/* ========================================================= */
/* ✅ DO NOT REMOVE ANYTHING ABOVE — ONLY ADD THIS BELOW */
/* ================= MODERN CONFIRM POPUP ================= */
/* ========================================================= */

.confirm-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* ✅ Dark overlay + blur (matches modern apps) */
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);

  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* ✅ Bigger modal with homepage theme */
.confirm-box {
  width: 420px;          /* increased width */
  min-height: 230px;     /* increased height */
  padding: 30px;

  border-radius: 18px;

  /* ✅ SAME PURPLE THEME */
  background: linear-gradient(135deg, #6a00ff, #b100ff);
  color: white;

  text-align: center;

  /* ✅ depth + glass */
  box-shadow: 0 12px 35px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);

  animation: confirmPop 0.25s ease;
}

/* TITLE */
.confirm-box h3 {
  font-size: 22px;
  margin-bottom: 15px;
}

/* MESSAGE */
.confirm-box p {
  font-size: 16px;
  margin-bottom: 25px;
}

/* BUTTON LAYOUT */
.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* YES BUTTON */
.yes-btn {
  background: #ff3b3b;
  color: white;
  padding: 10px 25px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}

.yes-btn:hover {
  background: #e60000;
  transform: scale(1.05);
}

/* NO BUTTON */
.no-btn {
  background: rgba(255,255,255,0.3);
  color: white;
  padding: 10px 25px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}

.no-btn:hover {
  background: rgba(255,255,255,0.6);
  transform: scale(1.05);
}

/* ✅ ANIMATION */
@keyframes confirmPop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ✅ MOBILE SUPPORT */
@media (max-width: 768px) {
  .confirm-box {
    width: 90%;
  }
}

/* ===================================================== */
/* ✅ PREMIUM POPUP ENHANCEMENT                           */
/* ===================================================== */

/* 🔥 WARNING ICON */
.warn-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

/* ✅ BUTTON RIPPLE BASE */
.ripple {
  position: relative;
  overflow: hidden;
}

/* ✅ RIPPLE EFFECT */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: scale(0);
  animation: rippleAnim 0.5s linear;
}

/* ✅ RIPPLE ANIMATION */
@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ================= FORM ALIGNMENT FIX ================= */




/* each field block */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

/* labels */
.form-group label {
  font-size: 14px;
  margin-bottom: 4px;
  opacity: 0.9;
}



/* primary button */

.primary-btn:hover {
  transform: scale(1.02);
}

/* search button alignment */
.search-bar {
  margin-bottom: 15px;
}

.search-bar button {
  padding: 8px 20px;
  border-radius: 20px;
  background: white;
  color: #6a00ff;
}

/* ================= FORM ALIGNMENT FIX ================= */



.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

.form-group label {
  margin-bottom: 4px;
  font-size: 14px;
}



.primary-btn:hover {
  transform: scale(1.03);
}

/* ================= SEARCH BUTTON ================= */

.search-bar {
  margin-bottom: 15px;
  text-align: center;
}

.search-bar button {
  padding: 8px 20px;
  border-radius: 20px;
  background: white;
  color: #6a00ff;
}

/* ===================================================== */
/* ✅ MATERIALS PAGE ALIGNMENT FIX (FULL ROW CONTROL) */
/* ===================================================== */

/* TOP FORM ROW */
.material-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 15px;
  margin-bottom: 20px;
}

/* EACH FIELD */
.material-group {
  display: flex;
  flex-direction: column;
  min-width: 160px;
}

/* LABEL */
.material-group label {
  font-size: 14px;
  margin-bottom: 5px;
}

/* INPUT */
.material-group input {
  padding: 8px;
  border-radius: 8px;
  border: none;
}

/* DATE INPUT FIX */
.material-group input[type="date"] {
  padding: 7px;
}

/* ✅ ADD BUTTON ALIGNMENT */
.add-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 20px;
  background: white;
}

/* ================= CENTER ALIGN LABEL + INPUT ================= */

.material-group label,
.search-group label {
  text-align: center;
  display: block;
  font-weight: 500;
}

.material-group input,
.search-group input {
  text-align: center;
}

.material-group,
.search-group {
  align-items: center;
}

/* ===================================================== */
/* ✅ SEARCH HISTORY SPACING IMPROVEMENT */
/* ===================================================== */

/* ROW SPACING */
.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 30px;              /* 🔥 main spacing */
  margin-top: 20px;
}

/* EACH FIELD BLOCK */
.search-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}

/* LABEL */
.search-group label {
  text-align: center;
  font-size: 14px;
  margin-bottom: 3px;
}

/* INPUT / SELECT */
.search-group input,
.search-group select {
  width: 160px;
  padding: 8px;
  border-radius: 8px;
  border: none;
  text-align: center;
}

/* DATE RANGE GROUP FIX */
#dateFields {
  display: flex;
  flex-direction: row;
  gap: 20px;              /* ✅ space between From/To */
}

/* BUTTON CONTAINER */
.search-btn {
  margin-top: 25px;       /* ✅ push downward */
  padding: 10px 20px;
  border-radius: 20px;
  background: white;
  color: #6a00ff;
  cursor: pointer;
}

/* BUTTON GAP */
.search-btn + .search-btn {
  margin-left: 10px;      /* ✅ spacing between Search & Clear */
}

/* TOTAL TEXT SPACING */
#totalAmount {
  margin-top: 20px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .search-row {
    flex-direction: column;
    align-items: center;
  }

  #dateFields {
    flex-direction: column;
  }
}

/* ===================================================== */
/* ✅ MATERIALS PAGE FINAL POLISH */
/* ===================================================== */

/* FORM */
.material-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  margin-top: 20px;
}

.material-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.material-group label {
  text-align: center;
  margin-bottom: 5px;
}

.material-group input {
  width: 160px;
  padding: 8px;
  border-radius: 8px;
  border: none;
  text-align: center;
}

/* BUTTON */
button {
  padding: 8px 18px;
  border-radius: 20px;
  border: none;
  background: white;
  color: #6a00ff;
  cursor: pointer;
}

button:hover {
  transform: scale(1.05);
}

/* DELETE BUTTON */
.danger-btn {
  margin-top: 15px;
  background: #ff4d4d;
  color: white;
}

/* SEARCH */
.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 20px;
  align-items: flex-end;
}

.search-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* DATE RANGE FIX */
#dateFields {
  display: flex;
  gap: 15px;
}

/* TABLE */
#materialTable {
  width: 100%;
  margin-top: 20px;
}

#materialTable th,
#materialTable td {
  padding: 10px;
  text-align: center;
}

/* TOTAL */
#totalAmount {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
}


/* ===================================================== */
/* ✅ DELETE BUTTON — WHITE + PURPLE THEME */
/* ===================================================== */

.danger-btn {
  background: #ffffff;              /* ✅ pure white */
  color: #6a00ff;                   /* ✅ theme purple */
  padding: 10px 26px;
  border-radius: 40px;              /* ✅ fully rounded */
  border: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* ✅ HOVER EFFECT */
.danger-btn:hover {
  background: #f3e9ff;              /* light purple tint */
  color: #5a00cc;                   /* darker purple */
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* ✅ CLICK EFFECT */
.danger-btn:active {
  transform: scale(0.95);
}


/* ===================================================== */
/* ✅ BUTTON TEXT IMPROVEMENT */
/* ===================================================== */

.danger-btn {
  font-size: 14px;
}

/* ===================================================== */
/* ✅ OPTION: ADD ICON (if you later want) */
/* ===================================================== */
/*
.danger-btn::before {
  content: "🗑 ";
}
*/

/* ===================================================== */
/* ✅ ACTION BUTTONS (SEARCH + CLEAR + DELETE) */
/* ===================================================== */

.action-buttons {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 10px;
}



/* ✅ HOVER */
.primary-btn:hover {
  background: #f3e9ff;
  color: #5a00cc;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* ✅ SPACING FIX */
.search-row {
  gap: 25px;
}

/* ===================================================== */
/* ✅ SAVE BUTTON FIX */
/* ===================================================== */

.small-btn {
  background: #ffffff;
  color: #6a00ff;
  padding: 6px 14px;
  border-radius: 18px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: auto !important;
  white-space: nowrap;
}

/* ===================================================== */
/* ✅ COMMON BUTTON (SEARCH/CLEAR/DELETE) */
/* ===================================================== */


/* ✅ PREVENT DELETE TEXT WRAP */
.no-wrap {
  white-space: nowrap;
}

/* ===================================================== */
/* ✅ BUTTON ALIGNMENT */
/* ===================================================== */

.action-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 5px;
}

/* ===================================================== */
/* ✅ FORM FIX */
/* ===================================================== */

.material-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}


/* ===================================================== */
/* ✅ SEARCH ROW SPACING */
/* ===================================================== */

.search-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 25px;
  align-items: flex-end;
}

/* ✅ FIX DATE INPUT SIZE */
#fromGroup input,
#toGroup input {
  width: 150px;
}

/* ===================================================== */
/* ✅ FIX SAVE BUTTON ALIGNMENT */
/* ===================================================== */

/* Reduce spacing inside form */
.material-form {
  gap: 14px; /* 🔥 reduce gap so Save comes closer */
}

/* Make Date + Save tighter */
.material-group:last-child {
  margin-left: -10px; /* 🔥 pulls Save closer to Date */
}

/* Align button vertically with input */
.small-btn {
  margin-top: 2px;   /* fine-tuning alignment */
}

/* ===================================================== *//** ✅ FINAL FIX: DATE + SAVE PERFECT ALIGNMENT */
/* ===================================================== */

.combined-group {
  display: flex;
  flex-direction: column;
}

.date-save-row {
  display: flex;
  align-items: center;
  gap: 8px;  /* ✅ tight spacing */
}

.date-save-row input {
  margin: 0;
}

.date-save-row .small-btn {
  margin: 0;
  padding: 6px 14px;
  height: 34px;
  display: flex;
  align-items: center;
}

/* ===================================================== */
/* ✅ KEEP BUTTONS SMALL */
/* ===================================================== */

.small-btn {
  background: #ffffff;
  color: #6a00ff;
  border-radius: 20px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

/* ===================================================== */
/* ✅ FIX DELETE TEXT WRAP */
/* ===================================================== */

.no-wrap {
  white-space: nowrap;
}

/* ===================================================== */
/* ✅ FINAL OVERRIDE FIX (DO NOT REMOVE OLD CODE) */
/* ===================================================== */


/* ✅ 1. FIX ALL FORM INPUT ALIGNMENT */
.material-group input,
.search-group input,
.search-group select,
.material-group select {
  height: 40px !important;
  box-sizing: border-box;
  padding: 0 12px !important;
}


/* ✅ FIX DATE INPUT EXACTLY LIKE OTHERS */
input[type="date"] {
  height: 40px !important;
  padding: 0 12px !important;
}


/* ✅ 2. FIX DATE LABEL CENTER ALIGNMENT */
.combined-group label,
.material-group label {
  text-align: center !important;
  width: 100%;
}


/* ✅ DATE + SAVE PERFECT LINE */
.date-save-row {
  display: flex;
  align-items: center !important;
  gap: 8px;
}


/* ✅ SAVE BUTTON ALIGNMENT */
.date-save-row .small-btn {
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
}


/* ===================================================== */
/* ✅ 3. SEARCH FULL ROW ALIGNMENT */
/* ===================================================== */

.search-row {
  display: flex !important;
  align-items: flex-end !important; /* 🔥 KEY FIX */
  flex-wrap: wrap;
  gap: 20px;
}


/* ✅ ENSURE ALL SEARCH BLOCKS SAME STRUCTURE */
.search-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ✅ LABEL ALIGNMENT */
.search-group label {
  text-align: center;
  margin-bottom: 5px;
}


/* ===================================================== */
/* ✅ 4. BUTTONS ALIGN WITH INPUTS */
/* ===================================================== */

.action-buttons {
  display: flex;
  align-items: flex-end !important; /* 🔥 aligns with inputs */
  gap: 12px;
}


/* ✅ PREVENT BUTTON BREAK */
.primary-btn,
.small-btn,
.no-wrap {
  white-space: nowrap;
}


/* ===================================================== */
/* ✅ OPTIONAL: UNIFORM WIDTH FOR PERFECT ALIGNMENT */
/* ===================================================== */

.search-group input,
.search-group select,
.material-group input {
  min-width: 170px;
}

/* ===================================================== *//* ================================================= PERFECT ALIGNMENT FIX (NO SIZE CHANGE) */
/* ===================================================== */

/* ✅ FORM ROW ALIGNMENT */
.material-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;   /* 🔥 key fix */
  gap: 20px;
}

/* ✅ KEEP INPUT SIZE UNCHANGED */
.material-group input {
  margin: 0;
}

/* ✅ DATE + SAVE ALIGNMENT */
.date-save-row {
  display: flex;
  align-items: flex-end;   /* 🔥 aligns perfectly with inputs */
  gap: 8px;
}

/* ✅ FIX DATE LABEL CENTER */
.combined-group label {
  text-align: center;
  display: block;
}

/* ===================================================== */
/* ✅ SEARCH SECTION PERFECT ALIGNMENT */
/* ===================================================== */

.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;   /* 🔥 aligns ALL in same line */
  gap: 20px;
}

/* ✅ ENSURE SEARCH FIELDS ALIGN */
.search-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ✅ BUTTONS ALIGN WITH INPUT BASELINE */
.action-buttons {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

/* ✅ PREVENT TEXT WRAP */
.no-wrap,
.primary-btn,
.small-btn {
  white-space: nowrap;
}

/* ===================================================== */
/* ✅ MATERIAL FORM GRID */
/* ===================================================== */

.material-grid {
  display: grid;
  grid-template-columns: repeat(6, max-content);
  gap: 18px;
  align-items: end;
}

.material-grid div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.material-grid label {
  text-align: center;
  margin-bottom: 5px;
}

.save-cell {
  display: flex;
  align-items: flex-end;
}


/* ===================================================== */
/* ✅ SEARCH GRID */
/* ===================================================== */

.search-grid {
  display: grid;
  grid-template-columns: repeat(6, max-content);
  gap: 18px;
  align-items: end;
}

.search-grid div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-grid label {
  text-align: center;
  margin-bottom: 5px;
}

.btn-cell {
  display: flex;
  align-items: flex-end;
}


/* ===================================================== */
/* ✅ NO WRAP BUTTON */
/* ===================================================== */

.no-wrap {
  white-space: nowrap;
}

/* ===================================================== */
/* ✅ FORM ALIGNMENT FIX */
/* ===================================================== */

.material-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end; /* ✅ KEY */
}

/* DATE GROUP */
.date-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

/* ===================================================== */
/* ✅ SEARCH ALIGNMENT FIX */
/* ===================================================== */

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end; /* ✅ KEY */
}

/* SEARCH FIELD */
.search-group {
  display: flex;
  flex-direction: column;
}

/* BUTTON GROUP */
.button-group {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  white-space: nowrap;
}

/* ===================================================== */
/* ✅ BUTTON STYLE */
/* ===================================================== */

.btn {
  background: white;
  color: #6a00ff;
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

/* PREVENT WRAP */
.no-wrap {
  white-space: nowrap;
}

/* ===================================================== */
/* ✅ FINAL UI ALIGNMENT FIX (PIXEL LEVEL) */
/* ===================================================== */

/* ✅ Reduce field height (clean compact look) */
.material-group input,
.search-group input,
.search-group select {
  height: 32px;                /* ✅ reduced from big size */
  padding: 4px 10px;
  border-radius: 10px;
}

/* ✅ Uniform label alignment */
.material-group label,
.search-group label {
  text-align: center;
  margin-bottom: 4px;
}

/* ===================================================== */
/* ✅ FORM ROW PERFECT ALIGNMENT */
/* ===================================================== */

.material-form {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;      /* ✅ KEY FIX */
}

/* ✅ Each field same structure */
.material-group {
  display: flex;
  flex-direction: column;
  align-items: center;

}

/* ✅ DATE + SAVE alignment */
.date-group .date-row {
  display: flex;
  align-items: center;        /* ✅ aligns perfectly */
  gap: 10px;
}

/* ✅ Make Save same height as input */
.date-row .btn {
  height: 32px;
  padding: 0 14px;
  display: flex;
  align-items: center;
}


/* ===================================================== */
/* ✅ SEARCH ROW PERFECT ALIGNMENT */
/* ===================================================== */


.search-row {
  display: flex;
  flex-wrap: nowrap;    /* ✅ FIX: prevents breaking to next line */
  gap: 18px;
  align-items: flex-end !important;
}

/* ✅ keep date inputs compact */
#fromGroup input,
#toGroup input {
  width: 150px;
}

/* ✅ Make all search blocks consistent */
.search-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* ✅ Button group alignment */
.button-group {
  display: flex;
  align-items: center;        /* ✅ LEVEL MATCH FIX */
  gap: 10px;
}

/* ✅ Fix button height to match inputs */
.btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ Prevent wrapping */
.no-wrap {
  white-space: nowrap;
}

/* ===================================================== */
/* ✅ FINAL ALIGNMENT + COMPACT SIZE FIX */
/* ===================================================== */

/* ✅ COMPACT INPUT SIZE */
.material-group input,
.search-group input,
.search-group select {
  height: 30px !important;
  padding: 4px 10px !important;
  box-sizing: border-box;
}

/* ✅ LABEL CENTER */
.material-group label,
.search-group label {
  text-align: center;
  margin-bottom: 4px;
}

/* ===================================================== */
/* ✅ FORM ROW ALIGNMENT */
/* ===================================================== */

.material-form {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end !important;
}

/* ✅ FIELD BLOCK */
.material-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ✅ DATE + SAVE */
.date-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

/* ✅ SAVE BUTTON SAME HEIGHT */
.date-row .btn {
  height: 30px;
}

/* ===================================================== */
/* ✅ SEARCH ROW ALIGNMENT */
/* ===================================================== */

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end !important;
}

/* ✅ CONSISTENT SEARCH BLOCKS (FIXED) */

.search-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.button-group {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

/* ===================================================== */
/* ✅ BUTTON STYLE */
/* ===================================================== */

.btn {
  height: 30px !important;
  padding: 0 14px;
  border-radius: 18px;
  background: white;
  color: #6a00ff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ PREVENT WRAP */
.no-wrap {
  white-space: nowrap;
}

#editModal input,
#editModal select {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 6px;
  border: none;
}

/* ✅ MODERN TOAST MESSAGE */

.toast-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) scale(0.9);
  padding: 16px 30px;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  opacity: 0;
  z-index: 9999;
  transition: all 0.3s ease;
}

/* ✅ SUCCESS */
.toast-message.success {
  background: linear-gradient(45deg, #00c853, #00e676);
}

/* ✅ ERROR */
.toast-message.error {
  background: linear-gradient(45deg, #ff3d00, #ff5252);
}

/* ✅ SHOW ANIMATION */
.toast-message.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* ✅ PROPERTY IMAGE PREVIEW (ADD NEW - DO NOT REMOVE OLD CSS) */


/* ✅ PREVIEW CONTAINER FIX */
#previewContainer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ✅ THUMBNAIL IMAGE */
.preview-img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
}

/* ✅ hover */
.preview-img:hover {
  transform: scale(1.05);
}



.property-card {
  position: relative;   /* ✅ IMPORTANT */
}

/* ✅ BADGE BASE */
.prop-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  color: white;
  letter-spacing: 0.5px;
}

/* ✅ NEW PROPERTY (GREEN) */
.prop-badge.new {
  background: linear-gradient(45deg, #00c853, #00e676);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ✅ RESALE PROPERTY (ORANGE) */
.prop-badge.resale {
  background: linear-gradient(45deg, #ff6f00, #ff9800);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ✅ Align everything in one row */
.search-row {
  display: flex;
  align-items: flex-end;   /* ✅ KEY FIX */
  gap: 20px;
  flex-wrap: wrap;
}

/* ✅ Each field group */
.search-group {
  display: flex;
  flex-direction: column;
}

/* ✅ Same height for inputs */
.search-group input,
.search-group select {
  height: 40px;
  padding: 6px 10px;
  box-sizing: border-box;
}

/* ✅ Buttons alignment */
.search-actions {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

/* ✅ Button height same as input */
.search-actions button {
  height: 40px;
}

/* ✅ FIX UNIT DROPDOWN HEIGHT */

#unit {
  height: 40px;
  padding: 6px 10px;
  box-sizing: border-box;
}

/* ✅ CENTER DATE TEXT */
#date {
  text-align: center;
}



nav a {
  font-weight: normal;
}

nav a {
  font-weight: normal !important;
}

.custom-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  color: #000000;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  border-radius: 8px;
  margin-top: 5px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.dropdown-list div {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.dropdown-list div:last-child {
  border-bottom: none;
}


.dropdown-list div {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: all 0.2s ease;
}

.dropdown-list div:last-child {
  border-bottom: none;
}


.dropdown-list div:hover {
  background-color: #f3e9ff;   /* ✅ matches theme */
}


/* ✅ keyboard active item (MAIN ADD) */

/* ✅ ACTIVE (KEYBOARD SELECTION) */
.dropdown-list .active {
  background: #eedeff;   /* ✅ soft light purple */
  color: #4b0099;        /* ✅ deep readable purple */
  font-weight: 500;
}


.material-group {
  position: relative;
}

.custom-dropdown {
  position: relative;
}




.dropdown-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;

  width: 0;
  height: 0;

  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #666;   /* ✅ softer color */

  transition: 0.2s;
  z-index: 10;
}

.dropdown-arrow:hover {
  border-top-color: #000;
}

.dropdown-arrow.open {
  transform: translateY(-50%) rotate(180deg);
}

.dropdown-list {
  max-height: 200px;
  overflow-y: auto;
}

.custom-dropdown input {
  padding-right: 40px;   /* ✅ space for arrow */
}


.clear-btn {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 12px;
}

.custom-dropdown {
  position: relative;
  width: 100%;
}

.custom-dropdown input {
  width: 100%;
  padding-right: 50px; /* ✅ space for icons */
}

.clear-btn {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 12px;
  display: block;  /* ✅ force visible */
  z-index: 10;
}

.dropdown-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 12px;
  display: block;  /* ✅ force visible */
  z-index: 10;
}

.toast-message {
  z-index: 9999;   /* ✅ VERY IMPORTANT */
}

/* ✅ CRITICAL FIX FOR DROPDOWN */
.material-form,
.page {
  overflow: visible !important;
}


/* ✅ CONTAINER */
#aboutCards {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 20px;
}

/* ✅ CARD */

/* ================= FINAL ABOUT HORIZONTAL CARD ================= */

/* ✅ CENTER CONTAINER */
#aboutCards {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

/* ================= FINAL LOGIC BASED CARD ================= */

/* ✅ CONTAINER CENTER */
#aboutCards {
  display: flex;
  justify-content: center;
  padding: 30px;
}

/* ✅ CARD STRUCTURE */







.about-card {
  display: flex;              /* ✅ CHANGE TO FLEX */
  gap: 25px;

  width: 90%;
  max-width: 1000px;

  padding: 25px;
  border-radius: 18px;

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);

  color: #ffffff;
  box-shadow: 0 12px 35px rgba(0,0,0,0.4);

  align-items: flex-start;
}


/* ✅ WITH IMAGE → 2 columns */
.about-card.with-image {
  grid-template-columns: 280px 1fr;
}

/* ✅ NO IMAGE → FULL WIDTH TEXT */
.about-card.no-image {
  grid-template-columns: 1fr;
}





/* ✅ IF IMAGE EXISTS → 2 COLUMN LAYOUT */

.about-card.has-image {
  flex-direction: row;      /* ✅ SWITCH TO ROW */
  align-items: flex-start;
  gap: 25px;
}


/* ✅ IMAGE */


.about-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
}



.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.full-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}


.about-left {
  flex: 0 0 250px;
}


.about-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}



.about-content {
  display: flex;
  flex-direction: column;

  flex: 1;  /* ✅ TAKES FULL HEIGHT */
}



.about-text {
  flex: 1;   /* ✅ takes left side */
}

/* ✅ EDIT BUTTON */
.edit-btn {
  margin-top: 12px;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: #ffffff;
  color: #6a00ff;
  cursor: pointer;
}

/* ✅ HOVER */
.about-card:hover {
  transform: translateY(-5px);
}

.delete-btn:hover {
  background: #e60000;
}


/* ================= FIXED POPUP MODAL ================= */

/* overlay (hidden by default) */
#aboutModal {
  display: none;

  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);

  justify-content: center;
  align-items: center;

  z-index: 9999;
}

/* ✅ SHOW MODAL */
#aboutModal.show {
  display: flex;
}



.about-box {
  width: 500px;
  min-height: 280px;

  padding: 30px;

  border-radius: 18px;

  background: linear-gradient(135deg, #6a00ff, #b100ff);
  color: white;

  text-align: left;

  box-shadow: 0 12px 35px rgba(0,0,0,0.5);

  animation: confirmPop 0.25s ease;
}


.about-box > * {
  margin-bottom: 15px;   /* ✅ space between toolbar, textbox, buttons */
}




/* save */
.primary-btn {
  padding: 10px;

  background: white;
  color: #6a00ff;

  border-radius: 30px;
  border: none;
  font-weight: bold;
}

/* cancel */
.secondary-btn {
  padding: 10px;

  background: rgba(255,255,255,0.3);
  color: white;

  border-radius: 30px;
  border: none;
}

/* animation */
@keyframes popup {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.edit-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  background: white;
  color: #6a00ff;
  cursor: pointer;
}

.delete-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  background: #ff4d4d;
  color: white;
  cursor: pointer;
}

.delete-btn:hover {
  background: #e60000;
}

/* ===================================================== */
/* ✅ FINAL BUTTON STANDARDIZATION (ABOUT PAGE FIX) */
/* ===================================================== */


/* ✅ EDIT BUTTON */
.edit-btn {
  background: #ffffff;
  color: #6a00ff;
}

/* ✅ DELETE BUTTON */
.delete-btn {
  background: #ff3b3b;
  color: #ffffff;
}

/* ✅ DELETE HOVER */
.delete-btn:hover {
  background: #e60000;
}


}

/* ✅ SAVE BUTTON */
.primary-btn {
  background: #ffffff;
  color: #6a00ff;
}

/* ✅ CANCEL BUTTON (MATCH SIZE + SHAPE) */
.secondary-btn {
  background: rgba(255,255,255,0.35);
  color: #ffffff;
}

/* ✅ HOVER EFFECT */
.primary-btn:hover,
.secondary-btn:hover,
.edit-btn:hover {
  transform: scale(1.05);
}


#aboutCards .about-actions button,
#aboutModal .modal-actions button {

  width: 140px !important;       /* ✅ slightly bigger */
  min-width: 140px !important;
  max-width: 140px !important;

  height: 44px !important;       /* ✅ balanced height */

  padding: 0 !important;

  border-radius: 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: none !important;

  white-space: nowrap !important;
  text-align: center !important;
}

/* ✅ COLORS */
#aboutCards .edit-btn,
#aboutModal .primary-btn {
  background: white !important;
  color: #6a00ff !important;
}

#aboutCards .delete-btn {
  background: #ff3b3b !important;
  color: white !important;
}

#aboutModal .secondary-btn {
  background: rgba(255,255,255,0.35) !important;
  color: white !important;
}


  
gap: 25px !important;
}


/* ✅ FINAL 180° ALIGNMENT FIX */

.about-row {
  display: flex;
  align-items: center;        /* ✅ SAME LINE */
  justify-content: space-between;
  width: 100%;
}

/* ✅ TEXT LEFT */
.about-text {
  flex: 1;
}




.about-actions {
  display: flex;
  justify-content: flex-end;

  gap: 12px;

  margin-top: auto;   /* ✅ PUSHES BUTTON TO BOTTOM */
}


.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin: 15px 0;
}


/* ✅ buttons smaller and clean */
.editor-toolbar button {
  padding: 6px 10px;

  border-radius: 20px;

  border: none;

  background: #ffffff;
  color: #6a00ff;

  font-size: 13px;

  cursor: pointer;
}

/* ✅ dropdowns compact */
.editor-toolbar select {
  padding: 5px;

  border-radius: 6px;
  border: none;

  font-size: 13px;
}

/* ✅ color input clean */
.editor-toolbar input[type="color"] {
  width: 30px;
  height: 30px;
  border: none;
}


.editor-toolbar button {
  min-width: 38px;
  height: 34px;

  border-radius: 8px;
  border: none;

  background: white;
  color: #6a00ff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  font-weight: bold;
}


.editor-toolbar select {
  height: 34px;
  padding: 4px 8px;

  border-radius: 8px;
  border: none;
}


.rich-editor:focus {
  caret-color: #000;   /* ✅ black cursor */
}




.about-text-content {
  text-align: left !important;   /* ✅ FORCE LEFT ALIGN */
  line-height: 1.6;
}



.editor-toolbar input[type="color"] {
  width: 34px;
  height: 34px;

  border: none;
  padding: 0;
  cursor: pointer;
}




#aboutEditInput p {
  margin: 0;
}

/* 🔴 DEBUG: REMOVE ANY INPUT INSIDE MODAL */
#aboutModal input[type="text"],
#aboutModal textarea {
  display: none !important;
}




.modal-actions {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, #a100ff, transparent);
  padding: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 10;
}


/* ✅ PREMIUM TEXTBOX */


.about-box {
  position: relative;
  overflow: hidden;
}


.about-box {
  max-height: 90vh;      /* ✅ limit height */
  overflow-y: auto;      /* ✅ enable scroll */
}

#aboutImagePreview {
  max-height: 200px;
  overflow-y: auto;
}


/* ✅ FINAL FIX TEXTBOX */


#aboutEditInput {
  min-height:


  padding: 12px;

  color: #000;

  outline: none;

  border: none;
}


/* ✅ FINAL VISIBLE EDITOR FIX */

#aboutEditInput {
  background: #ffffff !important;

  color: #000000 !important;

  min-height: 180px;

  border: 3px solid #000000;

  border-radius: 12px;

  padding: 15px;

  margin-top: 15px;

  width: 100%;

  display: block;

  box-sizing: border-box;

  font-size: 15px;
  line-height: 1.6;

  box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* ✅ CRITICAL: FORCE INNER TEXT COLOR */
#aboutEditInput * {
  color: #000000 !important;
}

/* ✅ HOVER */
#aboutEditInput:hover {
  border-color: #6a00ff;
}

/* ✅ FOCUS */
#aboutEditInput:focus {
  outline: none;

  border-color: #6a00ff;

  box-shadow: 0 0 0 3px rgba(106, 0, 255, 0.3);
}

/* ✅ PLACEHOLDER */
#aboutEditInput:empty::before {
  content: "Click here to edit content...";
  color: #999;
}

/* ✅ FINAL VISIBLE TEXTBOX (STRONG UI FIX) */



.editor-wrapper:hover {.editor-wrapper:hover6a00ff;
}

.editor-wrapper:focus-within {
  border-color: #6a00ff;
  box-shadow: 0 0 0 3px rgba(106, 0, 255, 0.3);
}

.modal {
  display: none;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  justify-content:center;
  align-items:center;
}

.modal-box {
  background:#fff;
  padding:20px;
  border-radius:10px;
  width:300px;
  text-align:center;
}


.modal-actions button {
  margin:5px;
  padding:8px 12px;
}

/* ✅ BACKGROUND OVERLAY */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* ✅ MAIN BOX (MATCH PROPERTIES PAGE) */
.confirm-box {
  background: linear-gradient(135deg, #6a00ff, #b300ff);
  color: white;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  width: 350px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* ✅ TITLE */
.confirm-box h2 {
  margin-bottom: 15px;
}

/* ✅ TEXT */
.confirm-box p {
  margin-bottom: 25px;
  font-size: 16px;
}

/* ✅ BUTTON CONTAINER */
.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* ✅ YES BUTTON (RED LIKE PROPERTIES) */
.yes-btn {
  background: #ff4d4d;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  color: white;
  cursor: pointer;
  font-weight: bold;
}

/* ✅ NO BUTTON (PURPLE LIGHT) */
.no-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  color: white;
  cursor: pointer;
  font-weight: bold;
}

.yes-btn:hover {
  opacity: 0.9;
}

.no-btn:hover {
  background: rgba(255,255,255,0.35);
}

.auth-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 768px) {
  .about-card {
    flex-direction: column;   /* ✅ stack on mobile */
  }

  .about-left {
    width: 100%;
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 40px;
}

/* LEFT */
.logo {
  font-size: 26px;
  font-weight: bold;
}

/* CENTER NAV */
.nav-center {
  display: flex;
  gap: 30px;
  margin: auto; /* ✅ THIS centers the links perfectly */
}

.nav-center a {
  text-decoration: none;
  color: white;
  font-weight: 500;
}

/* ✅ GENERAL MOBILE FIX */
body {
  overflow-x: hidden;
}

/* ✅ CONTAINER WIDTH */
.container, .main-container {
  width: 95%;
  max-width: 1200px;
  margin: auto;
}

/* ✅ FIXED: DON'T FORCE ALL CARDS FULL WIDTH */
.user-row,
.about-card {
  width: 100%;
  box-sizing: border-box;
}

/* ✅ PROPERTY CARD SIZE */
.property-card {
  width: 280px;   /* ✅ like your original */
}

/* ✅ FLEX WRAP FIX */
.row,
.btn-group,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ✅ BUTTONS MOBILE FRIENDLY */
button {
  padding: 10px 14px;
  font-size: 14px;
}

/* ✅ TABLE RESPONSIVE */
table {
  width: 100%;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

/* ✅ IMAGE */
.property-img,
.preview-img {
  max-width: 100%;
  height: auto;
}

/* ✅ INPUT FIELDS */

input, select, textarea {
  box-sizing: border-box;
}

/* ✅ ONLY MOBILE FULL WIDTH */
@media (max-width: 768px) {
  input, select, textarea {
    width: 100%;
  }
}


/* ================= MOBILE BREAKPOINT ================= */
@media (max-width: 768px) {

  /* ✅ NAVBAR STACK */
  nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  nav a {
    display: block;
    margin: 5px 0;
  }

  /* ✅ PROPERTY CARDS */
  .property-card {
    padding: 12px;
  }

  /* ✅ IMAGE GRID STACK */
  .img-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ✅ ADMIN PANEL */
  .user-row {
    font-size: 14px;
    line-height: 1.5;
  }

  /* ✅ BUTTON GROUP STACK */
  .btn-group {
    flex-direction: column;
  }

  .btn-group button {
    width: 100%;
  }

  /* ✅ FORMS STACK */
  form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* ✅ MODAL */
  .modal {
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
  }
}

.mobile-card {
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.05);
}

/* ✅ MOBILE RESPONSIVE */
@media (max-width: 768px) {

  .container {
    padding: 10px;
  }

  .card {
    padding: 15px;
  }

  .user-row {
    font-size: 14px;
    line-height: 1.6;
  }

  .mobile-card {
    background: rgba(255,255,255,0.1);
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
  }

  .btn-group {
    display: flex;
    flex-direction: column;
  }

  .btn-group button {
    width: 100%;
    margin: 5px 0;
  }

  .title {
    font-size: 24px;
  }

  nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  nav a {
    margin: 5px 0;
  }
}

/* =====================================================
✅ ✅ ✅ FINAL RESPONSIVE OVERRIDE (MASTER FIX)
===================================================== */


/* ✅ FORCE FLEX WRAP EVERYWHERE */
.material-form,
.search-row,
.action-buttons,
.button-group {
  /* flex-wrap: wrap !important; ❌ DISABLED */
}

/* ✅ REMOVE FIXED WIDTHS (MOBILE SAFE) */
.material-group input,
.search-group input,
.search-group select {
  /* width: 100% !important; ❌ DISABLED */
  /* min-width: unset !important; ❌ DISABLED */
}

/* ✅ GRID → FLEX FALLBACK */
.material-grid,
.search-grid {
  /* display: flex !important; ❌ DISABLED */
  /* flex-wrap: wrap; ❌ DISABLED */
  /* gap: 15px; ❌ DISABLED */
}

/* ✅ EACH FIELD RESPONSIVE */
.material-group,
.search-group {
  /* flex: 1 1 150px; ❌ DISABLED */
  /* min-width: 120px; ❌ DISABLED */
}

/* ✅ FULL WIDTH BUTTONS ON SMALL SCREEN */
@media (max-width: 768px) {

  /* NAVBAR STACK */
  .navbar {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  nav {
    flex-direction: column;
    align-items: center;
  }

  /* HERO TEXT */
  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 16px;
  }



  /* CARDS FULL WIDTH */
  .card,
  .property-card {
    width: 100% !important;
  }

  /* BUTTON STACK */
  .btn-group,
  .actions,
  .action-buttons,
  .button-group {
    flex-direction: column !important;
  }

  .btn-group button,
  .action-buttons button {
    width: 100%;
  }

  /* IMAGE GRID FIX */
  .img-row {
    justify-content: center;
  }

  /* ABOUT PAGE */
  .about-card {
    flex-direction: column !important;
  }

  .about-left {
    width: 100% !important;
  }

  /* TABLE SCROLL */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* MODAL FULL WIDTH */
  .confirm-box,
  .about-box {
    width: 95% !important;
  }
}

/* ✅ EXTRA SMALL DEVICES */
@media (max-width: 480px) {

  .hero h1 {
    font-size: 22px;
  }

  .hero p {
    font-size: 14px;
  }

  button {
    font-size: 13px;
  }

  .user-row {
    font-size: 13px;
  }

  .material-group,
  .search-group {
    flex: 1 1 100%;
  }
}

/* ================= PROPERTIES RESPONSIVE ================= */

@media (max-width: 768px) {

  /* ✅ STACK FORM + LIST */
  .property-layout {
    flex-direction: column !important;
  }



  /* ✅ PROPERTY LIST FULL WIDTH */
 

  /* ✅ REMOVE FIXED CARD WIDTH */
  .property-card {
    min-width: unset !important;
    width: 100% !important;
  }

  /* ✅ BUTTON FULL WIDTH */
  .actions {
    flex-direction: column;
  }

  .actions button {
    width: 100%;
  }
}

/* ================= MATERIAL PAGE FIX ================= */

@media (max-width: 768px) {

  /* ✅ STACK FORM FIELDS */
  .material-form {
    flex-direction: column !important;
    align-items: stretch;
  }

  /* ✅ FULL WIDTH INPUTS */
  .material-group {
    width: 100%;
  }

  .material-group input,
  .material-group select {
    width: 100%;
  }

  /* ✅ FIX DATE + BUTTON ROW */
  .date-row {
    flex-direction: column;
    gap: 10px;
  }

  /* ✅ SEARCH STACK */
  .search-row {
    flex-direction: column !important;
    align-items: stretch;
  }

  .search-group {
    width: 100%;
  }

  /* ✅ BUTTON GROUP STACK */
  .button-group {
    flex-direction: column;
  }

  .button-group button {
    width: 100%;
  }

  /* ✅ TABLE SCROLL */
  #materialTable {
    display: block;
    overflow-x: auto;
  }
}




.form-card button {
  width: auto !important;
  margin: 8px 5px;
}






/* ✅ MAIN LAYOUT FIX */
.property-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}


/* ✅ RIGHT PROPERTY LIST */


@media (max-width: 768px) {

  .property-layout {
    flex-direction: column;
  }




}






/* ✅ REMOVE UNWANTED CENTER GAP */
.cards::after {
  content: "";
  flex: auto;
}

/* ✅ MAIN LAYOUT */
.property-layout {
  display: flex;
  gap: 25px;
  align-items: flex-start;
}



/* ✅ RIGHT SIDE */


/* ✅ CARD SIZE */
.property-card {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
}


.page {
  padding: 30px;
  max-width: 1200px;
  margin: auto;
}


.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-content: flex-start;
  flex: 1;
}

.add-property {
  max-width: 320px;   /* ✅ control width */
  width: 100%;
  flex-shrink: 0;     /* ✅ prevent expansion */
}

.add-property input,
.add-property select {
  width: 90%;        /* ✅ smaller input */
  margin: 10px auto; /* ✅ center */
  display: block;
}



/* ✅ FIX: compact form like original */


/* ✅ FIX BUTTONS (SIDE BY SIDE) */
.form-card button {
  width: auto !important;
  display: inline-block !important;
  margin: 10px 5px;
}

/* ✅ CENTER BUTTON ROW */
.form-card .actions {
  text-align: center;
}


/* ✅ FILE INPUT FIX */
.form-card input[type="file"] {
  margin: 6px auto !important;
}





.form-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.form-row input {
  width: 70% !important;
}

.form-row select {
  width: 30% !important;
}



/* ✅ REMOVE BIG LINE SPACING */
.form-group {
  margin-bottom: 6px !important;   /* 🔥 reduced from 12px */
}



/* ✅ FIX FILE INPUT */
.form-group input[type="file"] {
  margin: 6px auto !important;
}

/* ✅ BUTTONS INLINE (LIKE OLD UI) */
.form-card button {
  width: auto !important;
  display: inline-block !important;
  margin: 8px 6px !important;
}
.price-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.price-row input {
  width: 65% !important;
}

.price-row select {
  width: 30% !important;
}




/* ✅ REMOVE EXTRA LINE SPACING */
.form-group {
  margin-bottom: 4px !important;
}

/* ✅ BUTTON BACK TO NORMAL (NOT FULL WIDTH) */
.form-card button {
  width: auto !important;
  display: inline-block !important;
  margin: 8px 5px !important;
}







/* ✅ BUTTON FIX */
.form-card button {
  width: auto !important;
  display: inline-block !important;
  margin: 6px 5px !important;
}


/* ✅ FINAL CLEAN FIX */


/* ✅ FILE INPUT */
.form-card input[type="file"] {
  margin: 6px auto;
}

/* ✅ BUTTON FIX */
.form-card button {
  width: auto;
  display: inline-block;
  margin: 8px 5px;
}

/* ✅ FINAL CLEAN FIX (ONLY THIS SHOULD EXIST) *//* ✅ FINAL CLEAN FIX (  flex-direction: column;
  gap: 4px;   /* ✅ uniform spacing */
  text-align: center;
}

/* ✅ INPUT */
.form-card input,
.form-card select {
  width: 85%;
  margin: 2px auto;
  display: block;
}

/* ✅ FILE INPUT */
.form-card input[type="file"] {
  margin: 6px auto;
}

/* ✅ BUTTONS */
.form-card button {
  width: auto;
  display: inline-block;
  margin: 6px 5px;
}

.form-card {
  width: 300px;
  display: flex;
}

.form-card {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-group input,
.form-group select {
  width: 85%;
  margin: 2px 0;
}

.form-group button {
  margin: 6px 5px;
}

.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* ✅ MAIN IMAGE */
.main-preview {
  max-width: 80%;
  max-height: 60%;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* ✅ THUMBNAILS ROW */
.thumb-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px;
}

/* ✅ THUMB STYLE */
.thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: 0.2s;
}

/* ✅ ACTIVE THUMB */
.thumb:hover,
.active-thumb {
  border: 2px solid #00ffcc;
  transform: scale(1.05);
}

/* ✅ CLOSE BUTTON */
.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}


.image-card {
  width: 320px;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;

  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);

  position: relative;
}

/* ✅ IMAGE */
.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* ✅ CENTER TEXT */
#imgPlaceholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ✅ CONTROLS (FIXED ALIGNMENT) */
#imageControls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* ✅ BUTTON STYLE */
.small-btn {
  padding: 6px 12px;
  margin: 3px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

.cancel {
  background: red;
  color: white;
}


/* ✅ STATS BOX GLOW + HOVER */
.stats-box {
  display: flex;
  gap: 40px;
  padding: 25px 40px;
  border-radius: 25px;

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);

  flex-wrap: wrap;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.2);

  /* ✅ NEW EFFECTS */
  animation: boxGlow 3s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.stats-box:hover {
  transform: scale(1.04);
}

/* ✅ GLOW ANIMATION */
@keyframes boxGlow {
  0% {
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(255,255,255,0.4);
  }
  100% {
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
  }
}


/* ✅ FLOATING EFFECT (each stat moves slightly) */
.stat {
  text-align: center;
  min-width: 120px;
  transition: 0.3s;

  animation: float 3s ease-in-out infinite;
}

/* delay for smooth wave */
.stat:nth-child(1) { animation-delay: 0s; }
.stat:nth-child(2) { animation-delay: 0.4s; }
.stat:nth-child(3) { animation-delay: 0.8s; }
.stat:nth-child(4) { animation-delay: 1.2s; }

/* ✅ FLOAT KEYFRAME */
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}


/* ✅ NUMBER GLOW EFFECT */
.stat b {
  font-size: 28px;

  animation: numGlow 2s infinite alternate;
}

@keyframes numGlow {
  from {
    text-shadow: 0 0 5px #fff;
  }
  to {
    text-shadow: 0 0 15px #fff, 0 0 25px #a64dff;
  }
}


/* ✅ HOVER ZOOM */
.stat:hover {
  transform: scale(1.15);
}