/*
Theme Name: Houzez Child
Template: houzez
*/

/* Import Parent Theme + Font Awesome */
@import url("../houzez/style.css");
/*@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");*/

/* ===============================
   COLOR VARIABLES
================================= */
:root {
  --primary-blue: #138EFF;
  --dark-blue: #004274;
  --accent-yellow: #F4C430;

  --dark-grey: #333333;
  --light-grey: #F5F5F0;
  --white: #FFFFFF;

  --green: #28a745;
  --red: #dc3545;
  --orange: #fd7e14;
}


/* ===============================
   TEXT COLORS
================================= */
.text-primary { color: var(--primary-blue); }
.text-dark-blue { color: var(--dark-blue); }
.text-yellow { color: var(--accent-yellow); }

.text-dark { color: var(--dark-grey); }
.text-light { color: var(--light-grey); }
.text-white { color: var(--white); }

.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-orange { color: var(--orange); }


/* ===============================
   BACKGROUND COLORS
================================= */
.bg-primary { background-color: var(--primary-blue); }
.bg-dark-blue { background-color: var(--dark-blue); }
.bg-yellow { background-color: var(--accent-yellow); }

.bg-light { background-color: var(--light-grey); }
.bg-white { background-color: var(--white); }

.bg-green { background-color: var(--green); }
.bg-red { background-color: var(--red); }
.bg-orange { background-color: var(--orange); }


/* ===============================
   BORDER BASE
================================= */
.brd {
  border-style: solid;
  border-width: 1px;
}


/* ===============================
   BORDER COLOR
================================= */
.brd-primary { border-color: var(--primary-blue) !important; }
.brd-dark-blue { border-color: var(--dark-blue); }
.brd-yellow { border-color: var(--accent-yellow) !important; }

.brd-light { border-color: var(--light-grey); }
.brd-white { border-color: var(--white); }

.brd-green { border-color: var(--green) !important; }
.brd-red { border-color: var(--red) !important; }
.brd-orange { border-color: var(--orange) !important;  }


/* ===============================
   BORDER POSITION
================================= */
.brd-top {
  border-top: 1px solid;
}

.brd-bottom {
  border-bottom: 1px solid;
}

.brd-left {
  border-left: 1px solid;
}

.brd-right {
  border-right: 1px solid;
}

.brd-all {
  border: 1px solid;
}


/* ===============================
   BORDER WIDTH
================================= */
.brd-2 { border-width: 2px !important; }
.brd-3 { border-width: 3px !important; }
.brd-4 { border-width: 4px !important; }
.brd-5 { border-width: 5px !important; }
.brd-6 { border-width: 6px !important; }


/* ===============================
   BORDER RADIUS
================================= */
.brd-radius-sm { border-radius: 4px; }
.brd-radius { border-radius: 8px; }
.brd-radius-lg { border-radius: 12px; }
.brd-radius-pill { border-radius: 50px; }


/* ===============================
   SOFT BORDER (LIGHT UI)
================================= */
.brd-soft {
  border-color: rgba(0,0,0,0.08);
}

.brd-soft-light {
  border-color: rgba(255,255,255,0.2);
}


/* ===============================
   OPTIONAL HOVER EFFECTS
================================= */
.brd-hover-primary:hover {
  border-color: var(--primary-blue);
}

.brd-hover-dark:hover {
  border-color: var(--dark-grey);
}


/* ===============================
   OPTIONAL SHADOW UTILITIES
================================= */
.shadow-sm {
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.shadow {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.shadow-lg {
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* ===============================
   WHITE SHADOWS (Glow / Light UI)
================================= */

/* Subtle white shadow (for dark backgrounds) */
.shadow-white-sm {
  box-shadow: 0 2px 6px rgba(255,255,255,0.2);
}

/* Medium white glow */
.shadow-white {
  box-shadow: 0 4px 12px rgba(255,255,255,0.35);
}

/* Strong white glow (use carefully) */
.shadow-white-lg {
  box-shadow: 0 8px 25px rgba(255,255,255,0.6);
}

/* ===============================
   YELLOW SHADOWS (Highlight / CTA)
================================= */

/* Soft yellow */
.shadow-yellow-sm {
  box-shadow: 0 2px 6px rgba(244,196,48,0.25);
}

/* Medium yellow glow */
.shadow-yellow {
  box-shadow: 0 4px 12px rgba(244,196,48,0.4);
}

/* Strong highlight glow */
.shadow-yellow-lg {
  box-shadow: 0 8px 25px rgba(244,196,48,0.6);
}

/* ===============================
   BLACK TEXT SHADOW (Most useful)
================================= */

/* Light shadow (default use) */
.text-shadow-sm {
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Medium shadow (hero text) */
.text-shadow {
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Strong shadow (heavy contrast) */
.text-shadow-lg {
  text-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* ===============================
   WHITE TEXT SHADOW (Glow effect)
================================= */

.text-shadow-white-sm {
  text-shadow: 0 1px 3px rgba(255,255,255,0.4);
}

.text-shadow-white {
  text-shadow: 0 2px 6px rgba(255,255,255,0.6);
}

.text-shadow-white-lg {
  text-shadow: 0 4px 12px rgba(255,255,255,0.8);
}

/* ===============================
   WHITE TEXT SHADOW (Glow effect)
================================= */

.text-shadow-white-sm {
  text-shadow: 0 1px 3px rgba(255,255,255,0.4);
}

.text-shadow-white {
  text-shadow: 0 2px 6px rgba(255,255,255,0.6);
}

.text-shadow-white-lg {
  text-shadow: 0 4px 12px rgba(255,255,255,0.8);
}
/* ---------------------------
   Password Field Styling
---------------------------- */
.form-group-field.password-field,
.hz-pw-parent {
    position: relative !important;
}

.hz-pw-input {
    padding-right: 42px !important;
}

.hz-pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    color: #aab4be;
    font-size: 15px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.hz-pw-toggle:hover {
    color: #3d5af1;
}

.hz-pw-toggle:focus {
    outline: none;
    box-shadow: none;
}

.mobile-br {
    display: none;
}

/* ---------------------------
   Hide reCAPTCHA Badge
---------------------------- */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ---------------------------
   Header / Menu Styling
---------------------------- */

/* Logo fix */
.logo img {
    top: 0;
}

.header-main-wrap .login-register-nav .btn-icon-login-register i.houzez-icon.icon-single-neutral-circle {
    font-size: 30px;
    top: 2px;
    margin-top: 2px;
}

.header-main-wrap .login-register-nav .btn-icon-login-register {   
    margin-top: 10px;
}

 
/* Default header (after scroll) */
.header-v4 {    
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(3px);
}

/* Transparent header state */
.header-transparent-wrap .header-v4 {        
    background-color: rgba(0, 66, 116, 0.10) !important;	 
}


.btn-create-listing {
  position: relative;
}

/* FREE badge */
.btn-create-listing::after {
  content: "FREE";
  position: absolute;

  top: -6px;
  right: -10px;

  background: #F4C430; /* green (recommended) */
  color: #333;

  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;

  padding: 2px 6px;
  border-radius: 6px;

  line-height: 1;

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}


/* City listing height fix */
.elementor-10 .elementor-element.elementor-element-67af0ce > .elementor-widget-container {
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 0px;
    height: auto !important;
}



/* ---------------------------
   Navbar Center Alignment
---------------------------- */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}
 
.ac-hero .ac-hero-section-subtitle {
  text-shadow:
    0 1px 3px rgba(0,0,0,0.55),
    0 4px 10px rgba(0,0,0,0.40);
}

  

.highlight {
  background-color: rgba(40, 167, 69, 0.5); 
  border:2px solid #28a745;	
  color: #fff; /* darker green text for contrast */
  border-radius: 4px;
  border-radius: 50px;
  padding: 5px 25px;
}

@media (max-width: 767px) {
 .highlight {
        letter-spacing: 1px;
        margin-bottom: 10px;
        text-align: left;
        margin-top: -25px;
        background-color: unset;
        border: 0px;
        padding: 0px;
        display: block;
    }	
}


/* ===============================
   BADGE CONTAINER
================================= */
.badge-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===============================
   BADGE BASE
================================= */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  background: #ffffff !important;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ICON */
.badge-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}

.badge-icon i {
    position: relative;
    top: 1px;
}
/* ===============================
   VERIFIED (GREEN)
================================= */
.badge-green {
  background: rgba(40, 167, 69, 0.15);
  color: #1e7e34;
}
.badge-green .badge-icon {
  background: #28a745;
}

/* ===============================
   ADVISORS (BLUE)
================================= */
.badge-blue {
  background: rgba(19, 142, 255, 0.15);
  color: #0d4ea6;
}
.badge-blue .badge-icon {
  background: #138EFF;
}

/* ===============================
   RERA (YELLOW)
================================= */
.badge-yellow {
  background: rgba(244, 196, 48, 0.18);
  color: #8a5a00;
}
.badge-yellow .badge-icon {
  background: #F4C430;
  color: #333; /* better contrast */
}

/* ===============================
   ZERO BROKERAGE (GREY → UPGRADED)
================================= */
.badge-grey {
  background: rgba(51, 51, 51, 0.08);
  color: #333;
}
.badge-grey .badge-icon {
  background: #333;
}

.badge-orange {
  background: rgba(255, 140, 0, 0.15);
  color: #b35c00;
}
.badge-orange .badge-icon { background: #FF8C00; }

/* Grey ki jagah Purple */
.badge-purple {
  background: rgba(111, 66, 193, 0.15);
  color: #4a1d96;
}
.badge-purple .badge-icon { background: #6f42c1; }

/* ===============================
   HOVER
================================= */
.badge-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

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

  .badge-line {
    justify-content: center;
    gap: 10px 8px;
    margin-top: 15px;
  }

  .badge-pill {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);

    padding: 6px 10px;
    font-size: 12.5px;
    gap: 8px;
  }

  .badge-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

}

@media (max-width: 768px) { 
	.mobile-br {
        display: inline !important;
    }
}