html {
   scroll-behavior: smooth;
}

body {
   background-color: #f8f9fa;
}

/* Navbar Styling */
header.sticky-top {
   position: sticky;
   top: 0;
   z-index: 1020;
}

.navbar {
   background: rgba(255, 255, 255, 0.8) !important;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   padding: 0.5rem 1rem;
}
/* Nav items container */
.navbar-collapse {
   justify-content: flex-end;
   padding-right: 1.5rem;
}

/* Individual nav items */
.navbar-nav {
   gap: 1.5rem;
   margin-right: -0.5rem;
}

.nav-item {
   position: relative;
}

/*toggler styles */
.navbar-toggler:focus,
.navbar-toggler:active {
   box-shadow: none !important;
   outline: none !important;
}

/* Adjust dropdown menu to match the theme */
.dropdown-menu {
   background-color: rgba(255, 255, 255, 0.95) !important;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border-radius: 0.5rem;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(0, 0, 0, 0.05);
}

/* toggler icon styles */
.navbar-toggler-icon {
   filter: invert(1);
}

.navbar-toggler {
   background-color: transparent !important;
   border: none !important;
}

/* Nav link hover effect */
.navbar-nav .nav-link {
   font-family: "Poppins", sans-serif;
   font-weight: 200;
   color: var(--text) !important;
   transition: all 0.2s ease;
   padding: 0.5rem 0.75rem !important;
   position: relative;
}

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

:root {
   --primary-color: #06ad46;
   --primary-hover: #059c3d;
   --input-focus-glow: rgba(6, 173, 70, 0.3);
   --text: #1a1a1a;
   --text-light: #666;
}

.form-container {
   border: 2px solid #e0e0e0;
   border-radius: 15px;
   padding: 40px;
   margin: 20px auto;
   max-width: 1100px;
   background-color: white;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
}

.form-container:hover {
   transform: translateY(-5px);
}

.form-label {
   color: #2d3748;
   font-weight: 500;
   margin-left: 20px;
   margin-bottom: 8px;
   transition: all 0.3s ease;
}

.eco-input {
   border-radius: 12px;
   padding: 14px 25px !important;
   border: 2px solid #e2e8f0 !important;
   transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
   position: relative;
}

.eco-input:focus {
   border-color: var(--primary-color) !important;
   box-shadow: 0 0 15px var(--input-focus-glow) !important;
   animation: input-glow 1.5s infinite alternate;
}

@keyframes input-glow {
   from {
      box-shadow: 0 0 10px var(--input-focus-glow);
   }
   to {
      box-shadow: 0 0 20px var(--input-focus-glow);
   }
}

.predict-btn {
   background: var(--primary-color);
   border: none;
   padding: 18px 50px;
   font-size: 1.1rem;
   border-radius: 15px;
   transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
   position: relative;
   overflow: hidden;
   color: white;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.predict-btn::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
   );
   transition: 0.6s;
}

.predict-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 20px rgba(6, 173, 70, 0.3);
   background: var(--primary-hover);
}

.predict-btn:hover::before {
   left: 100%;
}

.predict-btn:active {
   transform: translateY(0);
   box-shadow: 0 5px 15px rgba(6, 173, 70, 0.2);
}

#predictionResult {
   display: none;
   margin-top: 40px;
}

.result-container {
   border: 2px solid #e0e0e0;
   border-radius: 15px;
   padding: 30px;
   background-color: white;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   animation: slideIn 0.6s ease;
}

@keyframes slideIn {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.data-card {
   background: #f8fff9;
   border-left: 4px solid #06ad46;
   border-radius: 8px;
   padding: 15px;
   margin: 10px 0;
   transition: transform 0.3s ease;
}

.data-card:hover {
   transform: translateX(10px);
}

.prediction-textarea {
   min-width: 300px;
   width: auto;
   height: 60px;
   border: 2px solid #06ad46 !important;
   border-radius: 12px !important;
   font-size: 2.2rem;
   font-weight: 700;
   text-align: center;
   padding: 10px 20px !important;
   color: #06ad46;
   margin: 22px auto;
   transition: all 0.3s ease;
   resize: none;
   display: inline-block;
   overflow: hidden;
   border: none;
   background: transparent;
   box-shadow: none;
   white-space: nowrap;
   text-overflow: ellipsis;
   box-sizing: border-box;
   letter-spacing: 0.5px;
}
.prediction-textarea:hover {
   background: rgba(6, 173, 70, 0.08);
   transform: scale(1.02);
}

.data-card .form-label::after {
   margin-right: 0.5rem;
}

.data-value {
   margin-left: 0.3rem;
}
/* Mobile Price Text Optimization */
@media (max-width: 767px) {
   .prediction-textarea {
     font-size: 2rem !important;
     width: 100% !important;
     max-width: 280px !important;
     height: 60px !important;
     margin: 15px auto !important;
     padding: 5px 10px !important;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: 1.5;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 }
 
 @media (max-width: 400px) {
   .prediction-textarea {
     font-size: 1.8rem !important;
     max-width: 240px !important;
     padding: 5px 8px !important;
   }
 }
 
 @media (max-width: 340px) {
   .prediction-textarea {
     font-size: 1.6rem !important;
     max-width: 220px !important;
   }
 }

/* ===== Footer Styles ===== */
footer {
   --footer-bg: var(--white, #ffffff);
   --footer-border: var(--border, #e0e0e0);
   --footer-text: var(--text-light, #666666);
   --footer-hover: var(--primary, #06ad46);

   background: var(--footer-bg);
   border-top: 1px solid var(--footer-border);
   padding: 4rem 0;
   margin-top: 4rem;
}

/* Footer Links Section */
.footer-links {
   margin-bottom: 2rem;
}

.footer-heading {
   font-size: 1rem;
   color: var(--text, #333333);
   margin-bottom: 1.25rem;
}

.footer-nav {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-item {
   margin-bottom: 0.75rem;
}

.footer-link {
   color: var(--footer-text);
   text-decoration: none;
   display: block;
   padding: 0.25rem 0;
   transition: color 0.25s ease;
}

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

@media (min-width: 768px) {
   .footer-links {
      margin-bottom: 0;
   }
}
/* Social Links Section */
.footer-social {
   margin-bottom: 2rem;
}

.footer-social-links {
   display: flex;
   gap: 1.5rem;
}

.footer-social-link {
   color: var(--footer-text, #666666);
   text-decoration: none;
   transition: all 0.25s ease;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2.5rem;
   height: 2.5rem;
}

.footer-social-link i.bi {
   font-size: 1.5rem;
   transition: transform 0.2s ease;
}

.footer-social-link:hover {
   color: var(--footer-hover, #06ad46);
}

.footer-social-link:hover i.bi {
   transform: scale(1.15);
}

@media (max-width: 767.98px) {
   .footer-social {
      margin-top: 1.5rem;
   }

   .footer-social-links {
      justify-content: flex-start;
   }
}

/* Table*/
#myGrid {
   width: 100%;
   height: 90vh;
}
.loading {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 18px;
}

.animate__animated {
   animation-duration: 0.5s;
}

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

.animate__fadeIn {
   animation-name: fadeIn;
}


/* Recommendation Cards */
.card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border: none;
   border-radius: 15px;
}

.card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.placeholder-image {
   height: 200px;
   background: #f0f0f0;
   border-radius: 15px 15px 0 0;
}

.detail-item {
   display: flex;
   align-items: center;
   margin-bottom: 0.5rem;
   gap: 0.5rem;
}

.view-details-btn {
   background-color: #06ad46;
   color: white;
   border-radius: 20px;
   padding: 0.5rem 1.5rem;
}

.view-details-btn:hover {
   background-color: #059439;
   color: white;
}

.form-select,
.form-control {
   transition: background-color 0.3s ease;
}

.form-select:focus,
.form-control:focus {
   background-color: #f8fff8;
}

.property-image {
   height: 200px;
   object-fit: cover;
   border-radius: 15px 15px 0 0;
}

#predictedPrice {
   background-color: transparent !important;
   border: none !important;
   box-shadow: none !important;
}
.property-image-container {
   width: 413px !important;
   height: 195px !important;
   overflow: hidden !important;
   display: flex;
   position: relative;
}

.property-image-fixed {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   object-position: center;
   position: absolute;
   top: 0;
   left: 0;
}

.card-img,
.card-img-top {
   max-width: none !important;
   max-height: none !important;
   flex-shrink: 0;
}

.card {
   max-width: 413px;
   width: 100%;
}
@media (max-width: 413px) {
   .property-image-container,
   .property-image-fixed {
      width: 100% !important;
      height: auto !important;
      min-height: 195px;
   }
}

.card-img-top {
   width: 100% !important;
   height: 195px !important;
   flex-shrink: 0 !important;
}

/* AG-Grid Adjustments */
.ag-theme-alpine.custom-grid {
   font-family: "Segoe UI", sans-serif;
   font-size: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   border-radius: 12px;
   overflow: auto;
   height: 90vh;
}

/* Row styling */
.ag-theme-alpine.custom-grid .ag-row,
.ag-theme-alpine.custom-grid .ag-header-row {
   height: 48x;
   display: flex;
   align-items: center;
}

.ag-theme-alpine.custom-grid .ag-cell {
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Header styling */
.ag-theme-alpine.custom-grid .ag-header-cell {
   background-color: #06ad46;
   font-weight: 600;
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Pagination panel */
.ag-theme-alpine.custom-grid .ag-paging-panel {
   padding: 12px;
   justify-content: center;
}

/* Sorting/filtering icons */
.ag-theme-alpine.custom-grid .ag-header-cell-sortable {
   cursor: pointer;
}

.ag-header-cell:hover {
   background-color: #06ad46 !important;
   cursor: pointer;
}

:root {
	--pp-primary-green: #06ad46;
	--pp-secondary-green: #60ad5e;
	--pp-light-bg: #f8f9fa;
	--pp-white: #ffffff;
	--pp-text-dark: #212529;
}

.chart-card {
	background: var(--pp-white);
	border-radius: 15px;
	box-shadow: 0 8px 24px rgba(46, 125, 50, 0.1);
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	transition: transform 0.3s ease;
	border: 1px solid rgba(46, 125, 50, 0.1);
}

.info-card {
	background: var(--pp-light-bg);
	border-radius: 8px;
	padding: 1rem;
	text-align: center;
	margin: 0.5rem;
	box-shadow: 0 4px 12px rgba(46, 125, 50, 0.1);
}

.info-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--pp-primary-green);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.custom-dropdown {
	--bs-border-width: 2px;
	--bs-border-color: var(--pp-primary-green);
	--bs-focus-ring-color: rgba(46, 125, 50, 0.25);
	font-weight: 500;
}

.custom-dropdown:focus {
	border-color: var(--pp-secondary-green);
	box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.chart-container {
	position: relative;
	height: 300px;
	min-height: min(100vw, 400px);
}

canvas#categoriesChart,
canvas#revenueChart {
	height: 330px !important;
	width: 100% !important;
}

#listingsTrendChart {
	height: 330px;
	width: 100%;
}

.chart-container {
	height: 330px !important;
	min-height: unset !important;
}