/* 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;
	  align-items: center;
	  justify-content: space-between;
	  padding: 15px 30px;

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

	/* LOGO */
	.logo {
	  font-size: 22px;
	  font-weight: bold;
	  flex-shrink: 0;
	}

	/* NAV LINKS */
	

.navbar nav {
  display: flex;
  gap: 12px;

  flex: 0 0 auto;            /* ✅ ✅ FINAL FIX */
  justify-content: flex-start;

  max-width: 100%;           /* ✅ PREVENT OVERFLOW */
  overflow-x: auto;
  white-space: nowrap;
}



	/* LINKS */
	.navbar nav a {
	  color: white;
	  text-decoration: none;
	  font-size: 15px;
	}

	/* AUTH BUTTONS */
	.auth-section {
	  display: flex;
	  gap: 10px;
	  flex-shrink: 0;
	}

	.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: 8px;
  border-radius: 12px;
  margin: 10px;

  width: 260px;          /* ✅ smaller card */
  
  display: flex;
  flex-direction: column;
  gap: 6px;              /* ✅ tight spacing */

  height: auto;          /* ✅ FIX BIG HEIGHT */
  overflow: hidden;
}


	.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: 400px;            /* ✅ better desktop width */
  max-width: 90%;

  margin: 100px auto;

  padding: 30px;
  border-radius: 15px;

  backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.1);

  text-align: center;
}


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

	
	  
@media (max-width: 768px) {
  .logo {
    font-size: 18px;
  }

  .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: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 */

	



	/* ================= 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;
  max-height: 85vh;      /* ✅ ADD THIS */
  overflow-y: auto;      /* ✅ ADD THIS */
	  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;
	}

	/* ===================================================== */

	/* ===================================================== */
	/* ✅ 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);
	}





	/* ✅ 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;
	}


#aboutCards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  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 */
	


	/* ✅ 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;
	}

	


	.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: white;
  color: #6a00ff;   /* ✅ same as Edit */
}


	/* ✅ 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);
	}

	/* ✅ 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;
	}




	
	.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;

  display: flex;
  justify-content: center;
  gap: 10px;

  padding: 12px 0;

  margin-top: 15px;

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

  z-index: 100;
}




	/* ✅ PREMIUM TEXTBOX */


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


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

	

#aboutImagePreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}




	/* ✅ FINAL FIX TEXTBOX */



	#aboutEditInput {
	  min-height: 180px;

	  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 {
	  border-color: #6a00ff;
	}


	.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 {
  padding: 20px;
  border-radius: 10px;
  width: 420px;

  max-height: 85vh;        /* ✅ ADD */
  overflow-y: auto;        /* ✅ ADD */

  display: flex;           /* ✅ ADD */
  flex-direction: column;  /* ✅ ADD */
}



	.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;
	}

	

	/* ✅ 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 {
  width: 100%;
  box-sizing: border-box;
}

/* ✅ REMOVE FOR ABOUT CARD */
.about-card {
  box-sizing: border-box;
}


	/* ✅ PROPERTY CARD SIZE */





/* ✅ HARD RESET FOR ACTIONS (FINAL FIX) */
.property-card .actions {
  display: flex !important;
  flex-direction: column !important;

  gap: 6px !important;        /* ✅ EXACT MATCH */
  margin-top: 8px !important;

  flex-wrap: nowrap !important;   /* ✅ VERY IMPORTANT */
}


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

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




	/* ✅ INPUT FIELDS */

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

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


	 

	  /* ✅ PROPERTY CARDS */
	  

	


	  /* ✅ 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;
	  }

	

	  .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;
	  }

	 
	}

	/* =====================================================
	✅ ✅ ✅ 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 */
	}



	/* ================= 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;
	}








	/* ✅ RIGHT PROPERTY LIST */


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


	

	.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;
	}

	
.form-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  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;
	}

	
/* ✅ FINAL CLEAN FIX */

.form-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  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;
	}

	





#previewThumbs.thumb-container {
  position: absolute;
  bottom: 20px;
}



	/* ✅ 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 */
.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 35px;
  color: white;
  cursor: pointer;
}

/* NAV BUTTONS */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 60px;
  color: white;
  cursor: pointer;
  padding: 10px 20px;
  user-select: none;
}

.nav-btn:hover {
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
}

/* LEFT */
.nav-btn.left {
  left: 20px;
}

/* RIGHT */
.nav-btn.right {
  right: 20px;
}



	.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;

  opacity: 1;   /* ✅ FIX → visible by default */
  transition: opacity 0.6s ease;
}


	/* ✅ 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);
	}


/* ===================================== */
/* ✅ FINAL MATCH WITH ABOUT PAGE */
/* ===================================== */



  /* ✅ KEEP FORM FIXED SIZE */
  .form-card {
    width: 300px !important;
    flex-shrink: 0;
  }


/* ===================================== */
/* ✅ FINAL SINGLE MOBILE SYSTEM (WIX STYLE) */
/* ===================================== */

@media (max-width: 768px) {

  /* ✅ FIX BODY WIDTH */
  body {
    overflow-x: hidden;
  }

  /* ✅ CENTER MOBILE VIEW LIKE WIX */
  
.page {
  width: 100%;
  padding: 15px;
}


/* ===================================== */
/* ✅ MOBILE FIRST (DEFAULT STYLES) */
/* ===================================== */

/* ✅ MAIN LAYOUT */
.property-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ✅ FORM FULL WIDTH */
.form-card {
  width: 100% !important;
  max-width: 100%;
  padding: 16px;
  border-radius: 14px;
}

/* ✅ INPUTS */
.form-card input,
.form-card select {
  width: 100%;
  height: 42px;
  margin: 6px 0;
  padding: 0 12px;
  border-radius: 12px;
}

/* ✅ BUTTONS */
.form-card button {
  width: 100%;
  height: 42px;
  border-radius: 25px;
  margin-top: 8px;
}




/* ✅ IMAGE FIT */
.property-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* ✅ GOOD LOOK */
}


/* ✅ ACTION BUTTONS */
.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.actions button {
  width: 100%;
  height: 40px;
}

/* ✅ SEARCH */
.page > div:first-of-type {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#searchInput,
#filterType {
  width: 100%;
  height: 42px;
  border-radius: 12px;
}

/* ✅ NAVBAR */
.navbar {
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.navbar nav {
  overflow-x: auto;
  white-space: nowrap;
}


  /* ✅ ABOUT PAGE */
  .about-card {
    flex-direction: column;
    width: 100%;
  }




  /* ✅ INPUTS */
  input,
  select,
  textarea {
    width: 100%;
  }

  /* ✅ BUTTONS */
  button {
    width: 100%;
  }

  /* ✅ TABLE */
  table {
    display: block;
    overflow-x: auto;
  }

}

/* ✅ FINAL MOBILE FIX ONLY FOR ABOUT PAGE */
@media (max-width: 768px) {

  /* ✅ FORCE STACK */
  .about-card,
  .about-card.has-image {
    flex-direction: column !important;
  }

  /* ✅ IMAGE FULL WIDTH */
  .about-left {
    flex: none !important;
    width: 100% !important;
  }

  /* ✅ IMAGE FIX */
  .about-img {
    width: 100% !important;
    height: auto !important;
  }

  /* ✅ TEXT */
  .about-right {
    width: 100%;
  }
}


.confirm-box {
  text-align: center;
  padding: 25px;
  border-radius: 12px;
  width: 320px;
}

.confirm-text {
  margin: 15px 0;
  color: #444;
}



/* ✅ ✅ MODAL SAME AS PROPERTIES POPUP */

#customModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);

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

/* ✅ MAIN BOX */
#customModal .modal-box {
  width: 400px;
  padding: 30px;

  border-radius: 20px;

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

  text-align: center;

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

/* ✅ TITLE */
#customModal h3 {
  font-size: 22px;
  margin-bottom: 15px;
}

/* ✅ TEXT */
#customModal #confirmText {
  font-size: 16px;
  margin-bottom: 20px;
}

/* ✅ INPUT */

#customModal input {
  width: 100%;
  margin: 0;
  height: 45px;

  border-radius: 12px;
  border: none;

  padding: 0 15px;
  box-sizing: border-box;
}


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

/* ✅ SUBMIT (LIKE YES BUTTON) */
#customModal .yes-btn {
  background: #ff4d4d;
  color: white;

  padding: 10px 25px;
  border-radius: 25px;
  border: none;

  cursor: pointer;
}

/* ✅ CANCEL (LIKE NO BUTTON) */
#customModal .no-btn {
  background: rgba(255,255,255,0.3);
  color: white;

  padding: 10px 25px;
  border-radius: 25px;
  border: none;

  cursor: pointer;
}

/* ✅ HOVER EFFECT */
#customModal .yes-btn:hover {
  background: #e60000;
  transform: scale(1.05);
}

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

#customModal label {
  display: block;
  text-align: left;
  margin-left: 30px;
  margin-top: 10px;
  font-size: 14px;
  color: #fff;
}

/* ✅ ✅ ✅ DELIVERED PAGE MOBILE FIX (FINAL) */

@media (max-width: 768px) {

  /* ✅ STACK FORM + CARDS */
  .property-layout {
    display: flex;
    flex-direction: column !important;
    gap: 20px;
  }

  /* ✅ FORM FULL WIDTH */
  .form-card {
    width: 100% !important;
    max-width: 100%;
  }

  /* ✅ CARDS FULL WIDTH */
  



  

  
  

  /* ✅ TITLE SIZE REDUCE */
  .prop-title {
    font-size: 18px;
  }

  /* ✅ TEXT IMPROVE */
  .prop-location,
  .prop-price {
    font-size: 14px;
  }

  /* ✅ BUTTONS FULL WIDTH */
  .actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .actions button {
    width: 100%;
  }

  /* ✅ FIX INNER CARD PADDING */


  /* ✅ FIX PAGE SIDE SPACE */
  .page {
    padding: 15px !important;
  }

  /* ✅ FIX NAV BUTTON OVERFLOW */
  .auth-section {
    flex-direction: column;
    gap: 6px;
  }

}


/* ✅ ✅ ✅ NAVBAR MOBILE FIX (COMPLETE REPLACEMENT) */



/* ===================================== */
/* ✅ MOBILE FIRST NAVBAR */
/* ===================================== */


/* ✅ ✅ ✅ PROPERTIES PAGE MOBILE FIRST FIX */

@media (max-width: 768px) {

  .page {
    padding: 15px !important;
  }

  h2 {
    font-size: 26px;
    margin-bottom: 10px;
  }

  /* ✅ SEARCH SECTION */
  .page > div:first-of-type {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #searchInput,
  #filterType {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 14px;
  }

  .page > div:first-of-type button {
    width: 120px;
    align-self: flex-start;
    border-radius: 25px;
  }

  /* ✅ FORM FIX */
  .form-card {
    width: 100% !important;
    padding: 18px;
    border-radius: 16px;
  }

/* ✅ ✅ ✅ APPLY ONLY TO PROPERTIES PAGE FORM */
.property-layout .form-card input,
.property-layout .form-card select {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  margin: 6px 0;
  padding: 0 12px;
  font-size: 14px;
}


  #previewContainer {
    justify-content: center;
  }

  .preview-img {
    width: 90px;
    height: 70px;
  }

.property-layout .form-card button {
    width: 100%;
    height: 42px;
    border-radius: 25px;
    margin-top: 8px;
  }





  



  .actions {
    display: flex;
    gap: 10px;
  }

  .actions button {
    flex: 1;
    height: 40px;
    border-radius: 20px;
  }

}


/* ✅ ✅ ✅ UNIFY PROPERTIES + DELIVERED MOBILE UI */
@media (max-width: 768px) {

  /* ✅ SAME PAGE SPACING */
  .page {
    padding: 15px !important;
  }

  /* ✅ REMOVE EXTRA TOP GAP DIFFERENCE */
  .page h2 {
    margin-bottom: 10px;
  }

  /* ✅ STANDARD FORM CARD */
  .form-card {
    width: 100% !important;

    padding: 16px !important;
    margin: 0 auto 15px auto !important;

    border-radius: 16px;
  }

  /* ✅ STANDARD INPUT SPACING */
  .form-card input,
  .form-card select {
    margin: 6px 0 !important;
  }

  /* ✅ STANDARD BUTTON GAP */
  .form-card button {
    margin-top: 10px !important;
  }


 

  /* ✅ SEARCH SECTION NORMALIZE */
  .page > div:first-of-type {
    margin-bottom: 12px !important;
  }

}

/* ================= SIGNUP SAFE MOBILE FIX ================= */
@media (max-width: 600px) {

  /* ✅ CENTER FORM PROPERLY */
 

  /* ✅ INPUT FULL WIDTH */
  .card input,
  .card select {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ✅ FIX PASSWORD ICON (YOUR CURRENT STRUCTURE) */
  .card div[style*="position:relative"] span {
    top: 50% !important;
    transform: translateY(-50%);
  }

  /* ✅ BUTTON FULL WIDTH */
  .card button {
    width: 100%;
    padding: 12px;
    border-radius: 20px;
  }

  /* ✅ BODY PADDING (FIX SIDE CUT) */
  body {
    padding: 0 10px;
    box-sizing: border-box;
  }

}

/* ================= SIGNUP CARD FIX ================= */

.signup-card {
  width: 300px;              /* ✅ fixed proper size */
  max-width: 90%;
  
  margin: 40px auto;         /* ✅ centered and top spacing */
  padding: 16px;             /* ✅ compact */
  
  border-radius: 12px;

  background: white;
  color: black;

  text-align: center;
}

/* ✅ INPUTS (ONLY SIGNUP) */
.signup-card input,
.signup-card select {
  width: 100%;
  padding: 10px;
  margin: 6px 0;

  border-radius: 8px;
  border: 1px solid #ccc;

  box-sizing: border-box;
}

/* ✅ PASSWORD ICON FIX (YOUR EXISTING HTML) */
.signup-card div[style*="position:relative"] span {
  top: 50% !important;
  transform: translateY(-50%);
}

/* ✅ BUTTON */
.signup-card button {
  width: 100%;
  padding: 10px;

  border-radius: 20px;
  margin-top: 8px;
}

/* ✅ MOBILE ONLY */
@media (max-width: 600px) {

  .signup-card {
    width: 100%;
    max-width: 320px;
    margin-top: 30px;
    padding: 14px;
  }
}

/* ===================================== */
/* ✅ MATERIALS PAGE MOBILE-FIRST FIX */
/* ===================================== */

@media (max-width: 768px) {

  /* ✅ PAGE SPACING */
  .page {
    padding: 15px !important;
  }

  /* ✅ TITLE */
  h2 {
    font-size: 26px;
    margin-bottom: 10px;
  }

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

  /* ✅ EACH FIELD FULL WIDTH */
  .material-group {
    width: 100%;
    align-items: stretch;
  }

  /* ✅ INPUT + SELECT */
  .material-group input,
  .material-group select {
    width: 100% !important;
    height: 42px;
    border-radius: 12px;
    padding: 0 12px;
    text-align: left;
  }

  /* ✅ LABEL */
  .material-group label {
    text-align: left;
    font-size: 14px;
  }

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

  /* ✅ BUTTON FULL WIDTH */
  .material-form button {
    width: 100%;
    height: 42px;
    border-radius: 25px;
    margin-top: 5px;
  }

  /* ✅ SEARCH SECTION */
  .search-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    align-items: stretch !important;
  }

  /* ✅ SEARCH INPUTS */
  .search-group {
    width: 100%;
    align-items: stretch;
  }

  .search-group input,
  .search-group select {
    width: 100% !important;
    height: 42px;
  }

  /* ✅ SEARCH BUTTONS */
  .button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

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

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

}

@media (max-width: 768px) {

  .material-form {
    gap: 10px !important;
  }

  .material-group input,
  .material-group select {
    border-radius: 12px;
    padding: 10px;
  }

}

/* ===================================== */
/* ✅ RESTORE SCROLLBAR (GLOBAL FIX) */
/* ===================================== */

/* ✅ enable vertical scroll always */
body {
  overflow-y: auto !important;
}

/* ✅ show scrollbar (Chrome, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* ✅ scrollbar track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* ✅ scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
}

/* ✅ Firefox support */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.5) transparent;
}


/* ===================================== */
/* ✅ COMPLETE BUTTON ALIGNMENT SYSTEM */
/* ===================================== */

/* ✅ WRAPPER (IMPORTANT) */
.action-buttons {
  display: flex;
  justify-content: flex-end;   /* ✅ desktop right align */
  align-items: center;

  gap: 12px;                   /* ✅ spacing */
  margin-top: 15px;
}

/* ✅ BUTTON BASE STYLE */
.action-buttons button {
  min-width: 120px;
  height: 42px;

  border-radius: 22px;

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

  font-size: 14px;
  font-weight: 500;

  cursor: pointer;
}

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

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

/* ===================================== */
/* ✅ MOBILE FIRST FIX */
/* ===================================== */

@media (max-width: 768px) {

  .action-buttons {
    flex-direction: column;     /* ✅ stack */
    align-items: stretch;       /* ✅ full width */
  }

  .action-buttons button {
    width: 100%;                /* ✅ full width buttons */
  }

}

/* ================= FINAL EDIT MODAL FIX ================= */


#editModal {
  display: none;   /* ✅ hidden by default */
}


/* ✅ REAL FIX */
#editModal .modal-box {
  width: 420px !important;

  max-height: 85vh !important;   /* ✅ LIMIT HEIGHT */
  overflow-y: auto !important;   /* ✅ ENABLE SCROLL */

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

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

  display: block !important;     /* ✅ REMOVE FLEX BUG */
}


#editPreview {
  display: flex;
  gap: 10px;

  margin-bottom: 15px;   /* ✅ ✅ THIS FIXES OVERLAP */
}

.confirm-actions {
  position: relative;
  z-index: 5;   /* ✅ keeps buttons above */
}


/* ✅ TEXT */
.prop-title {
  font-size: 18px;
  margin-bottom: 6px;
}

.prop-location,
.prop-price,
.prop-contact {
  font-size: 14px;
  margin-bottom: 4px;
}

/* ✅ BADGE */
.prop-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 8px;
  color: white;
}

.prop-badge.new {
  background: green;
}

.prop-badge.resale {
  background: orange;
}

/* ===================================== */
/* ✅ HARD FIX: PROPERTY CARD + IMAGE */
/* ===================================== */

/* ✅ FORCE LIST CLEAN */


#list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px;
}


.image-wrapper {
  width: 100% !important;
  height: 180px !important;
  overflow: hidden;
  border-radius: 16px;
}

.image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}


/* ✅ +4 BADGE (BOTTOM LIKE YOUR IMAGE) */

.img-count {
  position: absolute;

  bottom: 10px;
  left: 10px;

  background: rgba(0,0,0,0.6);
  color: white;

  font-size: 14px;
  font-weight: bold;

  padding: 6px 10px;
  border-radius: 8px;

  z-index: 2;   /* ✅ above image only */
}


.image-wrapper {
  position: relative !important;   /* ✅ THIS FIXES EVERYTHING */
}

/* ✅ ACTION BUTTON CLEAN */
.actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  margin-top: 10px !important;
}

.actions button {
  width: 100%;
  height: 38px;
}

/* ===================================== */
/* ✅ DESKTOP GRID */
/* ===================================== */

@media (min-width: 768px) {

  #list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;   /* ✅ center cards */

    gap: 20px;
  }

}

  .image-wrapper {
    height: 180px !important;
  }



/* ✅ LIMIT ONLY PROPERTY FORMS, NOT LOGIN */
.property-layout .card,
.form-card {
  width: auto !important;
  max-width: none !important;
}



/* ✅ FINAL HARD FIX FOR PROPERTY CARD */



.image-wrapper {
  width: 100% !important;
  height: 180px !important;
  overflow: hidden !important;
  border-radius: 16px;
}

.image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ✅ FINAL FIX (DO NOT CHANGE AGAIN) */
.property-layout {
  display: flex !important;
  align-items: flex-start;
  gap: 40px;
}


#list {
  display: flex;
  flex-wrap: wrap;

  gap: 20px;

  justify-content: flex-start; /* keep left */
  align-items: flex-start;

  max-width: 900px; /* ✅ LIMIT WIDTH LIKE HOMEPAGE */
}
.property-card .prop-title,
.property-card .prop-location,
.property-card .prop-price,
.property-card .prop-contact {
  padding: 6px 12px;
}



/* ✅ FINAL COMPACT CARD (LIKE ABOUT SECTION IMAGE) */
.property-card {

  width: 280px !important;      /* 🔥 DECREASE WIDTH */
  max-width: 280px !important;
  min-width: 280px;

  flex: 0 0 280px !important;   /* 🔥 prevents stretching */

  border-radius: 20px;
  overflow: hidden;

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

  display: flex;
  flex-direction: column;
}

#list {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 20px !important;

  justify-content: flex-start !important;
  align-items: flex-start;
}

.property-card {
  width: 240px !important;
  max-width: 240px !important;
}



/* ✅ FORCE LOGIN NAV TO MATCH PROPERTIES PAGE */
.nav-center a {
  font-size: 15px !important;
  font-weight: normal !important;
  color: white;
  text-decoration: none;
}

.nav-center {
  display: flex;
  gap: 12px;                 /* ✅ EXACT SAME AS .navbar nav */
  align-items: center;

  justify-content: center;   /* ✅ aligns like Properties page */
}

/* ✅ MATCH NAVBAR STRUCTURE */
.header {
  display: flex;
  align-items: center;

  padding: 15px 30px;

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

/* ✅ WRAPPER ALIGNMENT */
.header .logo {
  flex: 1;              /* left side */
}

/* ✅ NAV CENTER */
.nav-center {
  flex: 2;              /* center area */
  display: flex;

  justify-content: center;   /* ✅ KEY FIX */
  gap: 12px;

  align-items: center;
}

/* ✅ RIGHT SIDE (LOGIN BUTTON SPACE SAME AS OTHER PAGES) */
.header .auth-section {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}


/* ✅ LOGIN RESPONSIVE FIX (FINAL) */


/* ✅ FINAL MOBILE LOGIN FIX (FLEX BASED - CLEAN) */
@media (max-width: 768px) {

  .login-card {
    margin: 25px auto;
    padding: 18px;

    display: flex;
    flex-direction: column;
    gap: 10px;         /* ✅ controls EVERYTHING cleanly */
  }

  /* ✅ REMOVE BR EFFECT COMPLETELY */
  .login-card br {
    display: none;     /* ✅ KEY FIX */
  }

  /* ✅ INPUT SPACING */
  .login-card input {
    margin: 0;
  }

  /* ✅ CAPTCHA */
  .login-card p {
    margin: 4px 0;
  }

  /* ✅ BUTTON */
  .login-card button {
    margin-top: 6px;
    align-self: center;   /* ✅ keeps center like desktop */
    width: 120px;         /* ✅ keeps nice button shape */
  }

}

/* ✅ FORCE LOGIN BUTTON CENTER (FINAL FIX) */
@media (max-width: 768px) {

  .login-card button {
    width: auto !important;        /* ✅ remove full width stretch */
    display: block;
    margin: 12px auto 0 auto;      /* ✅ PERFECT CENTER ALIGN */
  }

}


/* ✅ FINAL SAFE MOBILE NAV FIX */

/* ✅ PREMIUM MOBILE FIRST UI (DELIVERED PAGE) */
@media (max-width: 768px) {

  /* ✅ CARD – compact + modern */
  .form-card {
    width: 92% !important;
    max-width: 300px;

    margin: 12px auto;
    padding: 14px;

    border-radius: 16px;

    display: flex;
    flex-direction: column;
    gap: 8px;                 /* ✅ tighter spacing */

    text-align: center;
  }

  /* ✅ TITLE */
  .form-card h3 {
    font-size: 18px;
    margin-bottom: 6px;
  }

  /* ✅ INPUTS – compact + clean */
  .form-card input,
  .form-card select {
    height: 34px !important;
    padding: 6px 10px;

    font-size: 14px;

    border-radius: 10px;

    margin: 4px 0;           /* ✅ reduced spacing */
  }

  /* ✅ FILE INPUT CLEAN ALIGN */
  .form-card input[type="file"] {
    font-size: 13px;
    margin: 4px auto;
  }

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

  .form-card button {
    display: inline-flex !important;

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

    width: auto !important;

    min-width: 100px;
    height: 34px;

    border-radius: 18px;

    font-size: 13px;

    margin: 6px 5px;

    padding: 0 12px;
  }

  /* ✅ REMOVE LINE BREAK IF EXISTS */
  .form-card br {
    display: none;
  }

}


/* ✅ ✅ ✅ PROPERTIES PAGE MOBILE = SAME AS DELIVERED */
@media (max-width: 768px) {

  /* ✅ BREAK GRID (MAIN ISSUE) */
  .property-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
  }

  /* ✅ FORM (SAME AS YOUR DELIVERED DESIGN) */
  .property-layout .form-card {
    width: 92% !important;
    max-width: 300px;

    margin: 12px auto;
    padding: 14px;

    border-radius: 16px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    text-align: center;
  }

  /* ✅ INPUTS */
  .property-layout .form-card input,
  .property-layout .form-card select {
    height: 34px !important;
    padding: 6px 10px;

    font-size: 14px;
    border-radius: 10px;

    margin: 4px 0;
    width: 100%;
  }

  /* ✅ BUTTONS */
  .property-layout .form-card button {
    display: inline-flex !important;

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

    width: auto !important;

    min-width: 100px;
    height: 34px;

    border-radius: 18px;

    font-size: 13px;

    margin: 6px 5px;
    padding: 0 12px;
  }

  /* ✅ REMOVE BR */
  .property-layout .form-card br {
    display: none;
  }


/* ✅ FINAL FIX (REMOVE GRID CONFLICT) */

.property-layout {
  display: flex;                 /* ✅ FIX */
  align-items: flex-start;
  gap: 40px;                     /* ✅ spacing between form and cards */
}

/* ✅ LEFT FORM FIX */
.form-card {
  width: 300px !important;
  flex-shrink: 0;
}

/* ✅ RIGHT SIDE LIST */
.property-list-container {
  flex: 1;
}

/* ✅ CLEAN CARD LAYOUT */
#list {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 20px !important;

  justify-content: flex-start;
  align-items: flex-start;

  max-width: 900px; /* ✅ keeps cards aligned */
}

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

  /* ✅ REMOVE SIDE SCROLL */
  body {
    overflow-x: hidden !important;
  }

}


#previewModal {
  display: none;
}

#previewModal.show {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.95);
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

body.modal-open {
  overflow: hidden;
}


/* ✅ FINAL IMAGE FIX */


#previewImg {
  display: block !important;

  width: 95vw !important;        /* ✅ FORCE EXPANSION */
  height: 95vh !important;       /* ✅ FORCE EXPANSION */

  object-fit: contain !important; /* ✅ NO CROPPING */

  margin: auto !important;
  border-radius: 0 !important;
}


button {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

.cta {
  display: inline-block;      /* ✅ fixes alignment */
  margin-top: 25px;
  padding: 12px 30px;
  border-radius: 30px;
  border: none;
  background: #eee;
  cursor: pointer;
  font-size: 16px;

  text-decoration: none;      /* ✅ removes underline */
  text-align: center;         /* ✅ fixes text center */
  color: #5a00ff;             /* optional: match your theme */
  font-weight: bold;
}

/* ✅ FIX ALL LINK-BASED BUTTONS */
a.cta,
a.small-btn {
  display: inline-block;
  text-decoration: none;     /* remove underline */
  text-align: center;

  padding: 12px 30px;
  border-radius: 30px;

  background: #eee;
  color: #6a00ff;            /* matches your theme */
  font-size: 16px;
  font-weight: 600;

  line-height: normal;       /* ✅ fixes vertical misalignment */
}

/* ===================================== */
/* ✅ FINAL BUTTON STANDARDIZATION */
/* ===================================== */

.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

/* ✅ FORCE SAME BUTTON LOOK EVERYWHERE */
.actions button {
  width: 100%;
  height: 42px;

  border-radius: 25px;
  border: none;

  font-size: 15px;
  font-weight: 500;

  cursor: pointer;

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

  transition: all 0.25s ease;

  background: white;        /* ✅ FIX */
  color: #6a00ff;           /* ✅ FIX */
}

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

.actions .edit-btn:hover {
  background: #f3e9ff;
  transform: scale(1.03);
}

/* ✅ DELETE */

.actions .delete-btn {
  background: white;
  color: #6a00ff;   /* ✅ SAME AS EDIT */
}


.actions .delete-btn:hover {
  background: #ffe5e5;
  color: #d00000;
  transform: scale(1.03);
}



/* ✅ HARD RESET FOR ACTIONS (FINAL FIX) */
.property-card .actions {
  display: flex !important;
  flex-direction: column !important;

  gap: 6px !important;        /* ✅ EXACT MATCH */
  margin-top: 8px !important;

  flex-wrap: nowrap !important;   /* ✅ VERY IMPORTANT */
}

.property-card {
  display: flex;
  flex-direction: column;

  gap: 6px !important;        /* ✅ SAME AS .card */
  padding: 8px !important;    /* ✅ MATCH PROPERTIES */
}

/* ✅ CONTROL IMAGE POSITION */
.property-card .image-wrapper {
  margin: 6px 0 !important;   /* ✅ SAME AS PROPERTIES */
}

.property-card .actions {
  margin-top: 6px !important;
  gap: 6px !important;
}

.property-card .actions button {
  height: 36px !important;   /* ✅ EXACT LIKE PROPERTIES */
  margin: 0 !important;      /* ✅ REMOVE hidden spacing */
}

/* ✅ FIX DELIVERED LIST LAYOUT (DESKTOP ONLY) */
#deliveredList {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(280px, 1fr));

  gap: 25px;

  width: 100%;
}

#deliveredList .property-card {
  flex: 0 0 240px;        /* ✅ prevents vertical stacking */
}

#deliveredList {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;   /* ✅ THIS IS THE KEY FIX */
}

.property-card {
  display: flex;
  flex-direction: column;

  height: 100%;   /* ✅ makes cards equal height */
}

/* ✅ FINAL LOGIN INPUT FIX (OVERRIDES EVERYTHING) */
.login-card input {
  height: 42px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: none;
  margin: 6px 0 !important;
  box-sizing: border-box;
}

/* ✅ FORCE SAME WIDTH FOR LOGIN FIELDS */

/* ✅ FIX LOGIN INPUT SPACING ONLY */
.login-card input {
  width: 70% !important;
  display: block;

  margin: 6px auto !important;   /* ✅ reduced height */
}



/* ✅ Make all inputs same width */
#modalInput1,

.password-box input {
  width: 100%;
  padding: 0 45px 0 15px;   /* ✅ space for icon */
  height: 45px;
  border-radius: 12px;
  box-sizing: border-box;
}


/* ✅ Wrapper fix */
.password-box {
  position: relative;
  width: 100%;
  margin-bottom: 5px;
}


.password-box span {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  cursor: pointer;

  font-size: 18px;

  color: #555;   /* ✅ THIS FIXES VISIBILITY */
}


/* ✅ Label spacing */
#modalForm label {
  display: block;
  margin: 10px 0 5px;
}

/* ✅ CENTER FORM CONTENT */

#modalForm {
  width: 85%;          /* ✅ bigger like before */
  margin: 0 auto;
}


/* ✅ LABEL ALIGNMENT */
#modalForm label {
  display: block;
  margin: 12px 0 6px;
  text-align: left;
  color: white;
  font-weight: 500;
}

/* ✅ LOGIN PASSWORD MATCH FIX */
.login-pass {
  width: 70%;
  margin: 10px auto;
  position: relative;
}

/* ✅ INPUT FULL WIDTH INSIDE */
.login-pass input {
  width: 100% !important;
  padding-right: 40px;
}

/* ✅ EYE PERFECT ALIGN INSIDE */
.login-pass span {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* ✅ FIX NAVBAR BUTTON SIZE (MOBILE) */
@media (max-width: 768px) {

  #authArea button {
    width: auto !important;       /* ✅ stop full width */
    padding: 6px 14px !important; /* ✅ compact size */
    font-size: 13px;

    border-radius: 18px;
  }

}

#authArea button {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ✅ FIX ADD NEW BUTTON (MOBILE) */
@media (max-width: 768px) {

  #editBtn {
    width: auto !important;          /* ✅ stop full stretch */
    padding: 8px 20px !important;    /* ✅ compact size */
    display: inline-block;

    margin: 10px 0;                  /* ✅ nice spacing */
    border-radius: 25px;
  }

}



/* ✅ FINAL MOBILE FORCE FIX (ABOUT BUTTON SPACING) */
@media (max-width: 768px) {

  #aboutCards .actions button:first-child {
    margin-bottom: 3px !important;   /* ✅ controls spacing */
  }

  #aboutCards .actions button:last-child {
    margin-top: 0 !important;
  }

  #aboutCards .actions button {
    height: 30px !important;        /* ✅ compact buttons */
  }

}


/* ✅ FORCE LAYOUT STACK */
.about-image-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ✅ IMAGE BOX */
.image-preview-box {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 12px;
}

/* ✅ IMAGE */
#aboutImagePreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


#aboutImagePreview {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 12px;
}

.image-card {
  overflow: hidden;
}


/* ✅ BUTTON AREA (BELOW IMAGE) */
.upload-actions {
  margin-top: 10px;

  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ✅ BUTTON STYLE */
.upload-actions button {
  padding: 8px 14px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}

/* ✅ COLORS */
#saveImageBtn {
  background: white;
  color: #6a00ff;
}

#cancelImageBtn {
  background: red;
  color: white;
}

#editPreview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}



.hero-actions{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:24px;

  margin-top:25px;

  flex-wrap:wrap;
}

.contract-cta{

  position:relative;

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

  background:linear-gradient(
    135deg,
    #ffb300,
    #ff6a00
  );

  color:white;
  text-decoration:none;

  padding:14px 34px;

  border-radius:40px;

  font-weight:bold;

  box-shadow:
    0 0 20px rgba(255,170,0,.4);

  transition:.3s;
}

.contract-cta:hover{

  transform:
    translateY(-3px)
    scale(1.05);

  box-shadow:
    0 10px 30px rgba(255,170,0,.55);
}

.popular-tag{

  position:absolute;

  top:-10px;
  right:-12px;

  font-size:11px;

  background:#fff;

  color:#ff6200;

  padding:4px 8px;

  border-radius:20px;

  font-weight:bold;

  animation:pulseBadge 1.8s infinite;
}

@keyframes pulseBadge{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }
}

@media(max-width:768px){

  .hero-actions{
    flex-direction:column;
  }

  .contract-cta{
    width:220px;
  }
}

.hero-actions .cta,
.hero-actions .contract-cta {

  margin-top: 0 !important;

  min-width: 280px;
  height: 56px;

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

  box-sizing: border-box;
}

/* ✅ DESKTOP DEFAULT */

.desktop-only {
  display: inline;
}

.mobile-only {
  display: none;
}

/* ✅ MOBILE SWITCH */

@media (max-width: 768px) {

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: inline !important;
  }
  .contact-row:last-child {

    align-items: flex-start !important;
  }

  .contact-row:last-child .label {

    margin-top: 6px;
  }

  .contact-row:last-child .value {

    text-align: left;

    line-height: 1.4;
  }


}


/* ✅ CONTACT PAGE ADDRESS SPACING FIX */





@media (max-width: 768px) {

  .contact-row:last-of-type {

    align-items: flex-start;

    gap: 20px;
  }

  #vAddress {

    text-align: left;

    max-width: 58%;

    line-height: 1.4;

    word-break: break-word;
  }

}

/* ===================================== */
/* DELIVERED TEXT FIX */
/* ===================================== */

@media (max-width: 768px) {

  .delivered-link {
    font-size: 0 !important;
  }

  .delivered-link::after {
    content: "Delivered";
    font-size: 15px;
  }

}

/* =====================================
   ADMIN LAYOUT
===================================== */

/* =====================================
   ADMIN PAGE MOBILE FIX
===================================== */

@media (max-width: 768px) {

  /* STACK EVERYTHING */
  .admin-mobile-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  /* MAIN WRAPPER */
  .page > .container > div:first-of-type {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* LEFT COLUMN */
  .page > .container > div:first-of-type > div:first-child {
    width: 100% !important;
  }

  /* CONTACT ENQUIRIES */
  #contactList {
    max-height: 500px;
    overflow-y: auto;
  }

  .page > .container > div:first-of-type > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* USERS CARD */
  #usersList {
    word-break: break-word;
  }

  /* ANALYTICS CARD */
  #mongoUsage,
  #cloudUsage {
    font-size: 15px;
  }

  /* TITLE */
  .title {
    font-size: 24px !important;
    margin-bottom: 15px;
  }

  .page {
    padding: 12px !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .card {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ✅ ABOUT MODAL MOBILE FIX ONLY */
@media (max-width: 768px) {

  #aboutModal {
    align-items: flex-start !important;
    padding: 10px !important;
    overflow-y: auto !important;
  }

  .about-box {

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding: 15px !important;

    max-height: calc(100vh - 20px) !important;

    overflow-y: auto !important;

    border-radius: 16px !important;
  }

  /* ✅ toolbar horizontal */
  .editor-toolbar {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    justify-content: center !important;

    gap: 6px !important;
  }

  .editor-toolbar button {

    min-width: 42px !important;

    width: 42px !important;

    height: 42px !important;

    margin: 0 !important;
  }

  .editor-toolbar select {

    width: auto !important;

    min-width: 80px !important;
  }

  /* ✅ editor */
  #aboutEditInput {

    min-height: 180px !important;

    max-height: 35vh !important;

    overflow-y: auto !important;

    font-size: 16px !important;
  }

  /* ✅ image */
  #aboutImagePreview {

    height: auto !important;
  }

  #aboutImagePreview img {

    width: 100% !important;

    height: 180px !important;

    object-fit: cover !important;
  }

  /* ✅ save + cancel */
  .modal-actions {

    display: flex !important;

    flex-direction: row !important;

    gap: 10px !important;
  }

  .modal-actions button {

    flex: 1 !important;

    width: auto !important;
  }
}

/* Ongoing Modal */

#ongoingModal {
  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;
}

#ongoingModal.show {
  display: flex;
}

/* Ongoing editor textbox */

#ongoingEditInput {
  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);
}

#ongoingEditInput * {
  color: #000000 !important;
}

#ongoingEditInput:hover {
  border-color: #6a00ff;
}

#ongoingEditInput:focus {
  outline: none;

  border-color: #6a00ff;

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

#ongoingEditInput:empty::before {
  content: "Click here to edit content...";
  color: #999;
}

#ongoingModal {
  display: none;
}

#ongoingModal.show {
  display: flex;
}

#ongoingImagePreview {
  width: 100%;
  height: 180px;
  margin-bottom: 15px;

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

  overflow: hidden;
  border-radius: 12px;

  background: rgba(255,255,255,0.1);
}

#ongoingImagePreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.image-card {
  width: 320px;
  height: auto;
}

#aboutImagePreview {
  height: 220px;
  width: 100%;
}

#aboutImagePreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===================================== */
/* ✅ PROPERTIES SEARCH - MOBILE FIRST */
/* ===================================== */

@media (max-width: 768px) {

  /* Search container */
  .search-row,
  .search-section {

    display: flex;
    flex-direction: column;

    gap: 12px;

    width: 100%;
  }

  /* Labels */
  .search-group label {

    display: block;

    text-align: center;

    margin-bottom: 6px;

    font-size: 15px;

    font-weight: 600;
  }

  /* Match Add Property inputs */
  .search-group input,
  .search-group select {

    width: % !important;

    height: 42px !important;

    padding: 0 12px !important;

    border-radius: 12px !important;

    font-size: 14px;

    box-sizing: border-box;
  }

  /* Search / Clear buttons */
  .search-actions {

    display: flex;

    gap: 10px;

    width: 100%;
  }

  .search-actions button {

    flex: 1;

    height: 42px;

    border-radius: 25px;
  }

}




@media (max-width:768px){

.hero h1{
   font-size:48px;
   line-height:1.05;
}

.hero p{
   font-size:18px;
}
}
/* ✅ DATE LABEL PERFECT ALIGNMENT */

.date-group {
  min-width: 390px;
}

.date-group label {
  display: block;
  width: 100%;
  text-align: center !important;
}

.date-group .date-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =====================================
   MOBILE NAVBAR - LEFT ALIGNED
   DESKTOP UNCHANGED
===================================== */

@media (max-width: 768px) {

  .navbar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
  }

  .logo {
    text-align: center;
    margin-bottom: 10px;
  }

  .navbar nav {

    width: 100%;

    display: flex;
    flex-wrap: wrap;

    justify-content: flex-start !important;

    gap: 6px 14px;

    overflow: visible;
    white-space: normal;
  }

  .navbar nav a {

    margin: 0;
    padding: 0;

    font-size: 15px;

    white-space: nowrap;

    flex: 0 0 auto;
  }

  /* Your Contact + Ongoing wrapper */
  .mobile-nav-row {

    display: flex;

    gap: 14px;

    margin: 0;

    padding: 0;
  }

  /* Login row */
  #authArea {

    width: 100%;

    margin-top: 8px;

    display: flex !important;

    justify-content: flex-start !important;
  }

  #authArea button {

    width: auto !important;

    min-width: 80px;
  }
}
@media (max-width:768px){

  .navbar{
    flex-direction:column;
    align-items:stretch;
    padding:12px 14px;
  }

  .logo{
    text-align:center;
    margin-bottom:10px;
  }

  .navbar nav{
    display:flex !important;
    flex-wrap:wrap !important;

    justify-content:flex-start !important;

    gap:6px 14px;

    width:100%;
  }

  .navbar nav a{
    margin:0;
    padding:0;
    white-space:nowrap;
  }

  /* remove special wrapper behavior */
  .mobile-nav-row{
    display:contents;
  }

  /* force Ongoing to new line */
  .mobile-nav-row a:last-child{
    flex-basis:100%;
  }

  @media (max-width:768px){

  #authArea{

    width:100%;

    display:flex !important;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    margin-top:8px;
  }

  /* username on separate row */
  #authArea span,
  #authArea div:first-child{

    flex-basis:100%;

    font-size:14px;

    font-weight:600;
  }

  #authArea button{

    width:auto !important;

    min-width:90px;

    margin:0;
  }
}

  #authArea button{
    width:auto !important;
  }
}
@media (max-width:768px){

  /* keep Contact + Ongoing together */
  .mobile-nav-row{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:14px;
  }

  /* username row */
  #authArea{

    display:flex !important;
    flex-wrap:wrap !important;

    gap:8px;

    width:100%;
    margin-top:8px;
  }

  /* push username to its own line */
  #authArea > *:first-child{
    width:100%;
  }

}
.logo {
  text-decoration: none !important;

  font-size: 42px;
  font-weight: 800;

  letter-spacing: -1px;

  background: linear-gradient(
    135deg,
    #ffffff,
    #f7d7ff
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 15px rgba(255,255,255,.35);

  transition: .3s ease;

  display: inline-block;
}
.navbar nav{
  display:flex;
  align-items:center;
  gap:24px;
}
.mobile-nav-row{
  display:flex;
  gap:24px;
}
@media (max-width:768px){

  #vEmail{
    font-size:14px;
    letter-spacing:-0.3px;
  }

}
/* =====================================
   MATERIALS TABLE MOBILE FIX
===================================== */

@media (max-width:768px){

  #materialTable button{

    width:auto !important;

    min-width:70px;

    padding:8px 12px !important;

    margin:2px !important;

    white-space:nowrap;

    opacity:1 !important;

    flex:none !important;
  }

  #materialTable td{

    white-space:nowrap;
  }

}
/* =====================================
   HOMEPAGE IMAGE CARD FIX
===================================== */

.image-card{

  width:320px !important;

  min-height:220px !important;

  height:220px !important;

  position:relative;
}

#imgPlaceholder{

  display:flex !important;

  align-items:center;

  justify-content:center;

  width:100%;

  height:100%;
}

#imageControls{

  position:absolute;

  bottom:10px;

  left:50%;

  transform:translateX(-50%);

  z-index:5;
}
@media (max-width: 480px) {

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

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

@media (max-width: 360px) {

  .hero h1 {
    font-size: 28px;
    line-height: 1.1;
  }

  .hero h2 {
    font-size: 18px;
  }

  .hero p {
    font-size: 14px;
  }
}
/* Samsung Galaxy Z Fold 5 Cover Screen */
@media screen and (min-width: 340px) and (max-width: 350px) {

    .hero h1{
        font-size: 24px !important;
        line-height: 1.1 !important;
        padding: 0 8px;
        word-break: break-word;
    }

    .hero h2{
        font-size: 16px !important;
    }

    .hero p{
        font-size: 13px !important;
    }
}
/* Galaxy Fold Cover Screen */

@media screen and (min-width:340px) and (max-width:350px){

    .image-card{
        width:100% !important;
        max-width:320px;
        height:220px !important;
        overflow:hidden;
    }

    #aboutImagePreview{
        width:100% !important;
        height:220px !important;
        object-fit:cover !important;
        display:block;
    }
}
.image-card{
    width:320px;
    height:220px;
    overflow:hidden;
    border-radius:20px;
}

#aboutImagePreview{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center;
}
.about-title{
  position:relative;

  display:inline-block;

  font-size:38px;
  font-weight:800;

  color:#fff;

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

@keyframes aboutGlow{

  0%,100%{
    text-shadow:
      0 0 10px rgba(255,209,102,.2);
  }

  50%{
    text-shadow:
      0 0 12px #ffd166,
      0 0 24px #ffd166,
      0 0 36px rgba(255,209,102,.6);
  }
}
.hero-title{
  position: relative;
  display: inline-block;

  color: #fff;
  z-index: 1;

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

/* Floating Gold Orb */
.hero-title::before{

  content:"";

  position:absolute;

  width:180px;
  height:180px;

  border-radius:50%;

  background:#ffd166;

  filter:blur(90px);

  opacity:.18;

  top:-40px;
  left:-60px;

  z-index:-1;

  animation: heroOrb 6s ease-in-out infinite;
}

/* Gold Pulse */
@keyframes heroGlow{

  0%,100%{
    text-shadow:
      0 0 8px rgba(255,209,102,.15);
  }

  50%{
    text-shadow:
      0 0 12px #ffd166,
      0 0 24px rgba(255,209,102,.6);
  }
}

/* Floating motion */
@keyframes heroOrb{

  50%{
    transform:
      translateY(-10px)
      translateX(10px);
  }
}
.page-title{

  position: relative;

  display: inline-block;

  font-size: 38px;
  font-weight: 800;

  color: #fff;

  z-index: 1;

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

/* Floating Glow Orb */
.page-title::before{

  content: "";

  position: absolute;

  width: 120px;
  height: 120px;

  border-radius: 50%;

  background: #ffd166;

  filter: blur(60px);

  opacity: .22;

  top: -30px;
  left: -30px;

  z-index: -1;

  animation: pageOrb 6s ease-in-out infinite;
}

/* Gold Pulse */
@keyframes pageGlow{

  0%,100%{
    text-shadow:
      0 0 8px rgba(255,209,102,.2);
  }

  50%{
    text-shadow:
      0 0 12px #ffd166,
      0 0 24px rgba(255,209,102,.6);
  }
}

/* Floating Motion */
@keyframes pageOrb{

  50%{
    transform:
      translateY(-10px)
      translateX(8px);
  }
}
.section-title{

  position: relative;
  display: inline-block;

  font-size: 38px;
  font-weight: 800;

  color: #fff;

  z-index: 1;

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

/* Floating Gold Orb */
.section-title::before{

  content:"";

  position:absolute;

  width:120px;
  height:120px;

  border-radius:50%;

  background:#ffd166;

  filter:blur(60px);

  opacity:.22;

  top:-25px;
  left:-25px;

  z-index:-1;

  animation: sectionOrb 6s ease-in-out infinite;
}

/* Gold Pulse */
@keyframes sectionGlow{

  0%,100%{
    text-shadow:
      0 0 8px rgba(255,209,102,.2);
  }

  50%{
    text-shadow:
      0 0 12px #ffd166,
      0 0 24px rgba(255,209,102,.6);
  }
}

/* Floating Orb */
@keyframes sectionOrb{

  50%{
    transform:
      translateY(-10px)
      translateX(8px);
  }
}

/* ✅ ONGOING CARD FIX */


/* ✅ MOBILE */



@media (max-width:768px){

  #ongoingCards .about-img{
      width:100%;
      height:260px;
      object-fit:cover;
      border-radius:12px;
      display:block;
  }

}
/* ===================================== */
/* ONGOING MOBILE THUMBNAIL FIX */
/* ===================================== */

@media (max-width:768px){

  #ongoingCards .about-left{
      width:100% !important;
      height:260px !important;
      overflow:hidden !important;
      flex:none !important;
  }

  #ongoingCards .about-left .about-img{
      width:100% !important;
      height:260px !important;
      min-height:260px !important;
      max-height:260px !important;
      object-fit:cover !important;
      object-position:center center !important;
      display:block !important;
  }

}
.preview-zoom-controls{
    position:absolute;
    top:20px;
    left:20px;
    z-index:1000;
    
}

.preview-zoom-controls button{
    min-width:70px;
    height:42px;
    padding:0 12px;
    font-size:14px;
    font-weight:bold;
}

#previewImg{
    transition:transform .2s ease;
}
.close-btn{
    position: fixed !important;
    top: 15px !important;
    right: 15px !important;

    z-index: 99999999 !important;

    width: 50px;
    height: 50px;

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

    cursor: pointer;
}
/* ===== MOBILE FIRST PREVIEW ===== */

.preview-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    z-index:99999;
}

.close-btn{
    position:fixed;
    top:14px;
    right:14px;

    width:44px;
    height:44px;

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

    font-size:34px;
    color:#fff;

    z-index:999999;
    cursor:pointer;
}

.preview-zoom-controls{
    position:fixed;

    top:14px;
    left:14px;

    display:flex;
    gap:8px;

    z-index:999998;
}

.preview-zoom-controls button{
    height:44px;
    min-width:44px;

    border:none;
    border-radius:12px;

    font-size:18px;
    font-weight:700;

    padding:0 14px;

    background:#fff;
    color:#6b2cff;
}

.preview-zoom-controls button:nth-child(2){
    min-width:80px;
}

/* image */
#previewImg{
    width:92vw !important;
    height:72vh !important;
    object-fit:contain !important;

    margin-top:70px !important;
}

/* arrows */
.nav-btn{
    position:fixed;
    top:50%;
    transform:translateY(-50%);

    width:42px;
    height:42px;

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

    font-size:38px;
    color:white;

    z-index:999998;
}

.nav-btn.left{
    left:8px;
}

.nav-btn.right{
    right:8px;
}

/* thumbnails */
.thumb-container{
    position:fixed;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);

    width:90vw;
    overflow-x:auto;

    z-index:999998;
}
#previewImg{
    touch-action:none;
    cursor:grab;
}
.import-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.75);

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

    z-index:999999;
}

.import-box{
    width:350px;
    background:white;
    border-radius:12px;
    padding:20px;
    text-align:center;
    color:#333;
}

/* MATERIALS TABLE: consistent action alignment in full and filtered views */
#materialTable th:last-child,
#materialTable td:last-child {
  width: 270px;
  min-width: 270px;
}

#materialTable .material-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
}

#materialTable .material-actions button {
  width: 78px !important;
  min-width: 78px !important;
  margin: 0 !important;
  flex: 0 0 78px !important;
}

/* Compact desktop materials table so every action remains visible */
@media (min-width: 769px) {
  #materialTable {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 15px;
  }

  #materialTable th,
  #materialTable td {
    padding: 9px 5px;
    overflow-wrap: anywhere;
  }

  #materialTable th:last-child,
  #materialTable td:last-child {
    width: 220px;
    min-width: 220px;
  }

  #materialTable .material-actions {
    gap: 5px;
  }

  #materialTable .material-actions button {
    width: 66px !important;
    min-width: 66px !important;
    flex-basis: 66px !important;
    padding: 8px 5px !important;
    font-size: 14px;
  }

  #materialTable .material-bill-cell {
    width: 145px;
  }

  #materialTable .material-bill-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  #materialTable .material-bill-actions button {
    width: auto !important;
    min-width: 62px;
    margin: 0 !important;
    padding: 8px 6px !important;
    font-size: 14px;
  }
}

/* DATA PAGINATION: spaced, touch-friendly and responsive */
#materialPagination,
.data-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 10px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 28px;
  padding: 22px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}

#materialPagination button,
.data-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px !important;
  min-width: 46px !important;
  height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid transparent;
  border-radius: 14px;
  background: #fff;
  color: #6515ff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.18s ease, background 0.18s ease,
    color 0.18s ease, border-color 0.18s ease;
}

#materialPagination button:hover,
.data-pagination button:hover {
  transform: translateY(-2px);
  border-color: rgba(101, 21, 255, 0.45);
}

#materialPagination button.active-page,
#materialPagination button[aria-current="page"],
.data-pagination button.active-page,
.data-pagination button[aria-current="page"] {
  background: #161616;
  color: #fff;
  border-color: #fff;
  font-weight: 700;
}

#materialPagination button:focus-visible,
.data-pagination button:focus-visible {
  outline: 3px solid #ffd43b;
  outline-offset: 3px;
}

/* ADMIN ENQUIRIES: labelled and readable contact details */
.admin-enquiry-card {
  position: relative;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
}

.admin-enquiry-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-enquiry-fields {
  flex: 1;
  min-width: 0;
}

.admin-enquiry-field,
.admin-enquiry-description {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 8px;
  line-height: 1.45;
}

.admin-enquiry-field span,
.admin-enquiry-description span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-enquiry-description {
  margin-top: 18px;
  margin-bottom: 10px;
}

.admin-enquiry-delete {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: #d71920 !important;
  background-image: none !important;
  color: #fff !important;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}

.admin-enquiry-delete:hover {
  background: #b10f15 !important;
  background-image: none !important;
}

.admin-enquiry-delete:focus-visible {
  outline: 3px solid #ffd43b;
  outline-offset: 3px;
}

.admin-enquiry-date {
  display: block;
  opacity: 0.85;
}

.property-list-container {
  scroll-margin-top: 20px;
}

.delivered-list-container {
  flex: 1;
  min-width: 0;
  width: 100%;
  scroll-margin-top: 20px;
}

#list:focus,
#deliveredList:focus {
  outline: none;
}

@media (max-width: 600px) {
  .admin-enquiry-card {
    padding: 14px;
  }

  .admin-enquiry-header {
    flex-direction: column;
    gap: 12px;
  }

  .admin-enquiry-field,
  .admin-enquiry-description {
    display: block;
  }

  .admin-enquiry-field strong,
  .admin-enquiry-field span,
  .admin-enquiry-description strong,
  .admin-enquiry-description span {
    display: block;
  }

  .admin-enquiry-field span,
  .admin-enquiry-description span {
    margin-top: 2px;
  }

  .admin-enquiry-delete {
    align-self: flex-start;
    width: auto !important;
  }
}

@media (max-width: 768px) {
  #materialPagination,
  .data-pagination {
    display: grid;
    grid-template-columns: repeat(5, 44px);
    justify-content: center;
    column-gap: 10px;
    row-gap: 14px;
    margin-top: 24px;
    padding: 20px 10px 12px;
  }

  #materialPagination button,
  .data-pagination button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 15px;
    border-radius: 12px;
  }
}

@media (max-width: 360px) {
  #materialPagination,
  .data-pagination {
    grid-template-columns: repeat(4, 44px);
    column-gap: 12px;
  }
}

.toast-message.loading::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: -3px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: materialToastSpin .75s linear infinite;
}

@keyframes materialToastSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Discussed materials/admin UX fixes */
.material-table-region {
  width: 100%;
  margin-top: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.material-empty-row td {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.material-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 30px 20px;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
}

.material-empty-state strong {
  font-size: 22px;
}

.material-empty-state span {
  max-width: 520px;
  opacity: 0.9;
}

.material-empty-state--actionable {
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.material-empty-state--actionable:hover,
.material-empty-state--actionable:focus-visible {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.16);
  outline: 3px solid rgba(255, 213, 74, 0.9);
  outline-offset: 3px;
}

.material-empty-state-action {
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: #6d00ff;
  font-weight: 700;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .material-table-region {
    margin-top: 14px;
    border-radius: 16px;
  }

  #materialTable {
    min-width: 1120px;
  }

  #materialTable th,
  #materialTable td {
    padding: 12px 10px;
  }

  #materialTable .material-actions {
    gap: 6px;
  }

  .search-history .search-row,
  .search-history .button-group {
    width: 100%;
  }

  .search-history .search-group {
    width: 100%;
    min-width: 0;
  }

  .search-history .search-group input,
  .search-history .search-group select {
    width: 100%;
    box-sizing: border-box;
  }

  .search-history .button-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .search-history .button-group button {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .admin-container .card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .confirm-box {
    width: min(88vw, 430px) !important;
    max-height: 88vh;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .search-history .button-group {
    grid-template-columns: 1fr;
  }

  .toast-message {
    left: 50%;
    right: auto;
    width: calc(100vw - 24px);
    max-width: 376px;
    padding: 14px 16px;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

.delete-all-undo-toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: max-content;
  max-width: min(560px, calc(100vw - 24px));
  box-sizing: border-box;
  white-space: normal;
}

.delete-all-undo-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.delete-all-undo-toast .delete-all-undo-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 76px;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 420px) {
  .delete-all-undo-toast {
    flex-direction: column;
    gap: 10px;
    width: calc(100vw - 24px);
  }

  .delete-all-undo-toast .delete-all-undo-button {
    width: 100% !important;
    max-width: 180px;
  }
}

#importTitle{
    margin-bottom:10px;
}

#importMessage{
    margin-bottom:15px;
    font-size:14px;
}

#importStats{
    margin-top:10px;
    font-weight:bold;
}

.material-entry-just-saved {
  outline: 3px solid #ffd54a;
  outline-offset: -3px;
  background: rgba(255, 213, 74, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  transition: background-color 250ms ease, outline-color 250ms ease;
}

.material-save-confirmation-row td {
  padding: 0 0 10px !important;
  border: 0 !important;
}

.material-save-confirmation {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(45deg, #00c853, #00e676);
  color: #fff;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.material-save-confirmation-row {
  opacity: 1;
  transition: opacity 250ms ease;
}

.material-save-confirmation-row--hide {
  opacity: 0;
}

@media (max-width: 768px) {
  .material-save-confirmation {
    padding: 12px 14px;
    text-align: left;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .material-entry-just-saved,
  .material-save-confirmation-row,
  .material-empty-state--actionable {
    transition: none;
  }
}

/* Homepage-only contact prompts. */
.homepage-contact-prompt {
  display: flex;
}

.homepage-contact-prompt--final {
  justify-content: center;
}

.homepage-contact-prompt--floating {
  position: fixed;
  z-index: 900;
  bottom: 18px;
  right: 18px;
}

.homepage-contact-prompt--section {
  justify-content: flex-start;
  margin-top: 24px;
}

.homepage-contact-prompt--final {
  margin-top: 18px;
}

.homepage-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(46, 0, 95, 0.2);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.homepage-contact-button--quote {
  background: linear-gradient(135deg, #ffb000, #ff6500);
  border-color: transparent;
}

.homepage-contact-button--expert {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
}

.homepage-contact-button--project {
  background: #fff;
  color: #6500d8;
}

.homepage-contact-button:hover,
.homepage-contact-button:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(46, 0, 95, 0.3);
}

.homepage-contact-button span {
  display: inline-block;
  transition: transform 180ms ease;
}

.homepage-contact-button:hover span,
.homepage-contact-button:focus-visible span {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .homepage-contact-prompt--floating {
    top: auto;
    right: 12px;
    bottom: 14px;
    left: auto;
    transform: none;
  }

  .homepage-contact-prompt--floating .homepage-contact-button {
    width: auto;
    max-width: calc(100vw - 24px);
    min-height: 44px;
    padding: 10px 18px;
    box-shadow: 0 8px 24px rgba(46, 0, 95, 0.34);
  }

  .homepage-contact-prompt--section {
    justify-content: center;
  }

  .homepage-contact-button {
    width: min(100%, 330px);
    min-height: 48px;
    padding: 11px 18px;
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-contact-button,
  .homepage-contact-button span {
    transition: none;
  }

  .homepage-contact-button:hover,
  .homepage-contact-button:focus-visible,
  .homepage-contact-button:hover span,
  .homepage-contact-button:focus-visible span {
    transform: none;
  }
}
.login-recovery-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(0.45rem, 1.2vw, 0.9rem);
  width: 100%;
  white-space: nowrap;
}

.login-recovery-links a {
  flex: 0 1 auto;
  font-size: clamp(0.75rem, 2.4vw, 1rem);
}

/* Compact login layout: keep the whole card visible on common laptop screens. */
.login-page .page {
  min-height: auto;
  padding: clamp(22px, 4vh, 46px) 20px clamp(32px, 6vh, 64px);
}

.login-page .login-card {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  margin: 0 auto;
  padding: clamp(22px, 3vh, 30px);
  box-sizing: border-box;
}

.login-page .login-card .section-title {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 2.65rem);
}

.login-page .login-card input {
  width: min(100%, 356px) !important;
  height: 48px !important;
  margin: 5px auto !important;
  box-sizing: border-box;
}

.login-page .login-pass {
  width: min(100%, 356px);
  margin: 5px auto;
}

.login-page .login-pass input {
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
}

.login-page .login-card > p:not(.login-recovery-links) {
  margin: 7px 0 3px;
}

.login-page .login-card #error {
  margin: 2px 0 4px !important;
  min-height: 16px !important;
}

.login-page .login-card #loginBtn {
  margin: 4px auto 0 !important;
  padding: 10px 22px;
}

.login-page .login-recovery-links {
  flex-wrap: nowrap;
  gap: 0;
  margin: 12px 0 0;
  white-space: nowrap;
}

.login-page .login-recovery-links a {
  flex: 0 0 auto;
  position: relative;
  padding: 2px clamp(7px, 1.2vw, 11px);
  font-size: clamp(0.72rem, 2.2vw, 0.94rem);
}

.login-page .login-recovery-links a + a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1em;
  background: currentColor;
  opacity: 0.42;
  transform: translateY(-50%);
}

@media (max-width: 420px) {
  .login-page .page {
    padding-inline: 10px;
  }

  .login-page .login-card {
    width: calc(100vw - 20px);
    padding-inline: 14px;
  }

  .login-page .login-recovery-links {
    gap: 0;
  }

  .login-page .login-recovery-links a {
    padding-inline: clamp(5px, 1.7vw, 7px);
    font-size: clamp(0.67rem, 2.75vw, 0.78rem);
  }
}