/* 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: 15px;
	  border-radius: 12px;
	  margin: 10px;
	  width: 250px;
	  transition: 0.3s;
	}

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

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

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

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

	button:hover {
	  background: #e6d6ff;
	}

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

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

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

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

	
	  
@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 {
	  height: 120px;        /* ✅ fixed height */
	  width: auto;          /* ✅ width adjusts */
	  max-width: 160px;     /* ✅ optional cap */
	  object-fit: cover;
	  border-radius: 8px;
	  cursor: pointer;
	}

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

	/* ✅ PROPERTY CARD IMPROVEMENT */




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

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

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

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

	.actions {
	  margin-top: 12px;
	}


	/* row of images */

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


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

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

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

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

	.nav.left {
	  left: 30px;
	}

	.nav.right {
	  right: 30px;
	}

	#previewImg {
	  transition: 0.3s ease;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	  border-radius: 18px;

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

	  text-align: center;

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

	  animation: confirmPop 0.25s ease;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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




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

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



	/* primary button */

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

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

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

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



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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	  #dateFields {
		flex-direction: column;
	  }
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

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

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



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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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


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


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


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


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

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


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


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


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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	}

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	/* ✅ CONSISTENT SEARCH BLOCKS (FIXED) */

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

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

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

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

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

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

	/* ✅ MODERN TOAST MESSAGE */

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

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

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

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

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


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

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

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



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

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

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

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

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

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

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

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

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

	/* ✅ FIX UNIT DROPDOWN HEIGHT */

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

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



	nav a {
	  font-weight: normal;
	}

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

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

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

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

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


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

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


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


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

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


	.material-group {
	  position: relative;
	}

	.custom-dropdown {
	  position: relative;
	}




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

	  width: 0;
	  height: 0;

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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


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


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



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

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



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

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

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

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


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

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

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

	  width: 100%;
	  height: 100%;

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

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

	  z-index: 9999;
	}

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



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

	  padding: 30px;

	  border-radius: 18px;

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

	  text-align: left;

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

	  animation: confirmPop 0.25s ease;
	}


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




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

	  background: white;
	  color: #6a00ff;

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

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

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

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

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

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

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

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

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


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

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

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


	}

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

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

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


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

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

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

	  padding: 0 !important;

	  border-radius: 10px !important;

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

	  flex: none !important;

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

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

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

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


	  
	gap: 25px !important;
	}


	/* ✅ FINAL 180° ALIGNMENT FIX */

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

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




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

	  gap: 12px;

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


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

	  margin: 15px 0;
	}


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

	  border-radius: 20px;

	  border: none;

	  background: #ffffff;
	  color: #6a00ff;

	  font-size: 13px;

	  cursor: pointer;
	}

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

	  border-radius: 6px;
	  border: none;

	  font-size: 13px;
	}

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


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

	  border-radius: 8px;
	  border: none;

	  background: white;
	  color: #6a00ff;

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

	  cursor: pointer;
	  font-weight: bold;
	}


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

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


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




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



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

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




	#aboutEditInput p {
	  margin: 0;
	}

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




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


	/* ✅ PREMIUM TEXTBOX */


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


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

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


	/* ✅ FINAL FIX TEXTBOX */



	#aboutEditInput {
	  min-height: 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 {
	  background:#fff;
	  padding:20px;
	  border-radius:10px;
	  width:300px;
	  text-align:center;
	}


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

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

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

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

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

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

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

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

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

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

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

	

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

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

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

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

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

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

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

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

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

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

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

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

	/* ✅ INPUT FIELDS */

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

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


	 

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

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

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

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

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

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

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

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

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

	  .container {
		padding: 10px;
	  }

	  .card {
		padding: 15px;
	  }

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

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

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

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

	  .title {
		font-size: 24px;
	  }

	 
	}

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


/* ✅ FINAL MOBILE FIX (OVERRIDE ALL ISSUES: NAVBAR + LOGIN + ALIGNMENT) */
@media (max-width: 768px) {

  /* 🔥 FORCE NAVBAR TO STAY HORIZONTAL */
  .navbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 15px;
  }

  /* ✅ NAV LINKS */
  .navbar nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    gap: 15px;
    justify-content: flex-start !important;
  }

  /* ✅ FIX NAV LINK BREAKING */
  .navbar nav a {
    display: inline-block !important;   /* 🔥 IMPORTANT FIX */
    white-space: nowrap !important;     /* 🔥 NO TEXT BREAK */
    font-size: 14px;
  }

  /* ✅ REMOVE ANY BLOCK BEHAVIOR (CRITICAL OVERRIDE) */
  nav a {
    display: inline-block !important;
  }

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

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

  /* ✅ LOGIN / SIGNUP CENTER */
  .login-card {
    width: 90% !important;
    max-width: 320px;
    margin: 50px auto !important;
    padding: 25px;
  }

  /* ✅ INPUT FIX */
  .login-card input {
    width: 100%;
    margin: 12px 0;
  }

  /* ✅ BUTTON FIX */
  .login-card button {
    width: 100%;
    margin-top: 15px;
  }

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

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

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

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

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

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

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

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

  button {
    font-size: 13px;
  }
}
	
	/* ================= MATERIAL PAGE FIX ================= */

	@media (max-width: 768px) {

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

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

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

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

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

	  .search-group {
		width: 100%;
	  }

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

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

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




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






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


	/* ✅ RIGHT PROPERTY LIST */


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


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

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

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



	/* ✅ FIX: compact form like original */


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

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


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





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

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

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



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



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

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

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

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




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

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







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


	/* ✅ FINAL CLEAN FIX */


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

	  position: relative;
	}

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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


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

	  animation: numGlow 2s infinite alternate;
	}

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


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


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



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

  /* ✅ CARDS AREA CONTROLLED WIDTH */
  .cards {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  /* ✅ CARD SIZE (same as desktop) */
  .property-card {
    width: 280px !important;
  }

}

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


  /* ✅ NAVBAR (keep style, just align) */
  .navbar {
    justify-content: space-between;
  }

  .navbar nav {
    overflow-x: auto;
    justify-content: flex-start;
  }

  /* ✅ MAIN STACK (IMPORTANT) */
  .property-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

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

  /* ✅ PROPERTY CARDS (clean stack) */
  .cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .property-card {
    width: 100%;
  }

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

  /* ✅ IMAGES */
  .property-img,
  .about-img {
    width: 100%;
    height: auto;
  }

  /* ✅ 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: 85%;
  height: 45px;

  margin: 12px auto;
  display: block;

  border-radius: 12px;
  border: none;

  padding-left: 15px;
  font-size: 15px;
}

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