/* =========================================================
   TAREVISOS HOMEPAGE — WORLD CLASS OVERRIDES
   Load AFTER style.css (Colorlib Directing)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --tv-header-h: 92px;   /* set to the real sticky header height */
  --tv-page-gap: 18px;
  --tv-gap: 18px;
  --tv-bg: #ffffff;
  --tv-text: #f0f5ff;
  --tv-muted: #667085;
  --tv-border: rgba(16,24,40,.10);
  --tv-shadow: 0 18px 48px rgba(16,24,40,.12);
  --tv-shadow-soft: 0 10px 24px rgba(16,24,40,.10);
  --tv-radius: 18px;
  --tv-radius-sm: 12px;

  /* Brand accents (adjust if you want) */
  --tv-accent: #000000;   /* premium blue */
  --tv-accent2: #706f6f;  /* premium green */
  --tv-accentDark: #175CD3;
}

/* ---------- Base polish (no layout breaking) ---------- */
html{ scroll-behavior: smooth; }
body{
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: var(--tv-text);
  background: var(--tv-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent sticky header overlap with first section */
body > .tv-main{
  padding-top: 18px;
}

h1,h2,h3,h4,h5,h6{
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
p{ color: var(--tv-muted); }

a{ transition: all .18s ease; }
img{ max-width: 100%; height: auto; }

:focus-visible{
  outline: 3px solid rgba(31,111,235,.35);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---------- Section titles (more premium) ---------- */
.section-title h2{
  font-size: clamp(28px, 3.2vw, 42px);
  letter-spacing: -0.6px;
}
.section-title p{
  font-size: 16px;
}

/* ---------- Header: sticky glass + better spacing ---------- */
.header{
  position: sticky !important;
  top: 0;
  z-index: 1000;
  background: #000 !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(16,24,40,.06);
  min-height: var(--tv-header-h);

}


.header .container-fluid{
  padding-top: 8px;
  padding-bottom: 8px;
}

/* keep logo tidy */
.header__logo{ padding: 12px 0 !important; }


.header__logo img{
  height: 64px !important;
  width: 64px !important;
  object-fit: contain;
}

/* nav alignment */
.header__nav{ padding: 12px 0 !important; }


.header__menu ul li{ margin-right: 18px !important; }
.header__menu ul li a{
  color: var(--tv-text) !important;
  opacity: .86;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 999px;
}
.header__menu ul li a:after{ display: none !important; }
.header__menu ul li a:hover{
  opacity: 1;
  background: rgba(31,111,235,.08);
  color: var(--tv-accentDark) !important;
}

/* right area */
.header__menu__right{ display: inline-flex; align-items: center; gap: 12px; }

/* primary button upgrade */
.primary-btn{
  border-radius: 999px !important;
  padding: 12px 16px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  background: linear-gradient(135deg, var(--tv-accent), var(--tv-accent2)) !important;
  border: 0 !important;
  box-shadow: 0 14px 28px rgba(31,111,235,.20);
  text-transform: none !important;
}
.primary-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(31,111,235,.24);
}

/* login icon */
.login-btn{
  color: var(--tv-text) !important;
  border-color: var(--tv-border) !important;
  background: rgba(255,255,255,.7);
}
.login-btn:hover{
  background: rgba(31,111,235,.08);
  border-color: rgba(31,111,235,.22) !important;
}

/* ---------- Hero: overlay + better typography ---------- */
.hero{
  padding: 220px 0 120px !important;
  position: relative;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,.60) 100%
  );
}
.hero .container{ position: relative; z-index: 2; }

.hero__text .section-title h2{
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.8px;
}
.hero__text .section-title p{
  color: rgba(255,255,255,.86) !important;
  font-size: 18px;
}

/* ---------- Hero search: premium “glass card” but keep floats ---------- */
.hero__search__form{
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--tv-radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px !important;
  box-shadow: var(--tv-shadow);
}
.hero__search__form form input,
.hero__search__form form .select__option,
.hero__search__form form button{
  height: 56px !important;
}
.hero__search__form form input{
  border-radius: 14px 0 0 14px;
  background: rgba(255,255,255,.92);
  color: var(--tv-text) !important;
  font-weight: 700;
}
.hero__search__form form .select__option:before{
  opacity: .22;
}
.hero__search__form form .select__option .nice-select{
  height: 56px !important;
  line-height: 58px !important;
  background: rgba(255,255,255,.92);
  font-weight: 700;
}
.hero__search__form form button{
  border-radius: 0 14px 14px 0;
  background: linear-gradient(135deg, var(--tv-accent), var(--tv-accent2)) !important;
  font-weight: 900;
  letter-spacing: .2px;
}
.hero__search__form form button:hover{
  filter: brightness(1.03);
}

/* Fix float clearing (stable) */
.hero__search__form form::after{ content:""; display:block; clear:both; }

/* ---------- Category “chips” ---------- */
.hero__text .hero__categories__tags li a{
  border-radius: 999px;
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 800;
}
.hero__text .hero__categories__tags li a:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

/* ---------- Featured cards: modern + hover ---------- */
.listing__item{
  border-radius: var(--tv-radius) !important;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(16,24,40,.10) !important;
  border: 1px solid var(--tv-border);
  transition: transform .18s ease, box-shadow .18s ease;
}
.listing__item:hover{
  transform: translateY(-3px);
  box-shadow: var(--tv-shadow) !important;
}
.listing__item__pic{ height: 240px !important; }
.listing__item__pic img{
  width: 70px !important;
  height: 70px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.92);
  padding: 8px;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
.listing__item__pic__tag{
  background: rgba(18,183,106,.95) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

/* Listing content spacing */
.listing__item__text{ padding-top: 44px !important; }
.listing__item__text__inside h5{
  font-weight: 900 !important;
  letter-spacing: -0.2px;
}
.listing__item__text__inside ul li{ color: var(--tv-text); }
.listing__item__text__inside ul li span{ color: #98A2B3 !important; }

/* “View Details” link feels premium */
.listing__item__text__info__right{
  color: var(--tv-accentDark) !important;
  background: rgba(31,111,235,.08);
  padding: 8px 12px;
  border-radius: 12px;
}
.listing__item__text__info__right:hover{
  background: rgba(31,111,235,.12);
}

/* ---------- Tabs: modern pill tabs ---------- */
.category-tabs .nav-tabs{
  border-bottom: 1px solid var(--tv-border) !important;
  gap: 10px;
}
.category-tabs .nav-tabs .nav-link{
  border: 1px solid var(--tv-border);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  color: var(--tv-muted);
  background: #fff;
}
.category-tabs .nav-tabs .nav-link.active{
  color: #fff !important;
  border-color: transparent;
  background: linear-gradient(135deg, var(--tv-accent), var(--tv-accent2));
  box-shadow: 0 14px 28px rgba(31,111,235,.20);
}

/* ---------- Testimonial polish ---------- */
.testimonial{
  position: relative;
}
.testimonial .section-title:after{
  opacity: .12 !important;
}
.testimonial__item p{
  font-size: 18px;
  line-height: 30px;
}
.testimonial__slider.owl-carousel .owl-nav button{
  background: rgba(255,255,255,.14) !important;
}
.testimonial__slider.owl-carousel .owl-nav button:hover{
  background: rgba(31,111,235,.85) !important;
}

/* ---------- Blog cards ---------- */
.blog__item{
  border-radius: var(--tv-radius) !important;
  overflow: hidden;
  border: 1px solid var(--tv-border);
  box-shadow: 0 10px 24px rgba(16,24,40,.10) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.blog__item:hover{
  transform: translateY(-3px);
  box-shadow: var(--tv-shadow) !important;
}
.blog__item__text h5 a{
  font-weight: 900 !important;
  letter-spacing: -0.2px;
}

/* ---------- Newsletter ---------- */
.newslatter{
  background: linear-gradient(135deg, rgba(31,111,235,.10), rgba(18,183,106,.10)) !important;
}
.newslatter__form input{
  border-radius: 14px !important;
  border: 1px solid var(--tv-border) !important;
  height: 56px !important;
  font-weight: 700;
}
.newslatter__form button{
  border-radius: 14px !important;
  height: 56px !important;
  background: linear-gradient(135deg, var(--tv-accent), var(--tv-accent2)) !important;
  font-weight: 900;
}

/* ---------- Responsive fixes (critical for “world class”) ---------- */
@media (max-width: 991px){
  .header__nav{ padding: 10px 0 !important; }
  .hero{ padding: 180px 0 90px !important; }

  /* make hero search stack without fighting floats */
  .hero__search__form form input,
  .hero__search__form form .select__option,
  .hero__search__form form button{
    float: none !important;
    width: 100% !important;
    display: block;
    border-radius: 14px !important;
    margin-bottom: 10px;
  }
  .hero__search__form form button{ margin-bottom: 0; }
}

@media (max-width: 767px){
  .hero__text .hero__categories__tags li{
    display: block !important;
    margin-right: 0 !important;
  }
  .hero__text .hero__categories__tags li a{
    width: 100%;
    text-align: center;
  }
}


/* =========================================================
   CARD TEXT CONTRAST FIX (critical)
   ========================================================= */

/* Force readable text inside cards */
.listing__item__text__inside ul li{
  color: #101828 !important; /* deep neutral, premium */
}

/* Subtle secondary text (icons / labels) */
.listing__item__text__inside ul li span{
  color: #667085 !important;
}

.card{
  --card-text: #101828;
  --card-muted: #667085;
}


/* =========================================================
   GLOBAL NAVBAR TEXT — force white on all pages
   ========================================================= */

.header__menu ul li a{
  color: #ffffff !important;
  opacity: .92;
  font-weight: 600;
}

/* Hover state */
.header__menu ul li a:hover{
  color: #ffffff !important;
  opacity: 1;
}

/* Active page indicator */
.header__menu ul li.active a{
  color: #ffffff !important;
  border-bottom: 2px solid #ca0a00; /* brand accent */
}




/* ================================
   HERO DROPDOWN OVERLAP FIX
   ================================ */

.hero,
.hero__text,
.hero__search__form,
.hero__search__form form{
  overflow: visible !important;
}

.hero__search__form{
  position: relative !important;
  z-index: 9999 !important;
}

/* Your tags are likely inside .hero__text */
.hero__categories__tags{
  position: relative !important;
  z-index: 1 !important;
}

/* Nice Select stacking */
.hero__search__form .nice-select{
  position: relative !important;
  z-index: 10000 !important;
}

.hero__search__form .nice-select .list{
  z-index: 10001 !important;
}



/* ================================
   NICE SELECT TEXT + BACKGROUND FIX
   ================================ */

.hero__search__form .nice-select,
.hero__search__form .nice-select span{
  color: #111827 !important;
}

.hero__search__form .nice-select{
  background: #ffffff !important;
  border: 1px solid rgba(17,24,39,.12) !important;
}

.hero__search__form .nice-select .list{
  background: #ffffff !important;
  border: 1px solid rgba(17,24,39,.12) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
}

.hero__search__form .nice-select .option{
  color: #111827 !important;
  background: #ffffff !important;
}

.hero__search__form .nice-select .option:hover,
.hero__search__form .nice-select .option.focus,
.hero__search__form .nice-select .option.selected{
  background: #f3f4f6 !important;
  color: #111827 !important;
}


/* ================================
   MOBILE LAYOUT FIX FOR FLOATS
   ================================ */

@media (max-width: 991px){
  .hero__search__form form .select__option{
    float: none !important;
    width: 100% !important;
    margin-top: 10px;
  }

  .hero__search__form form input[type="text"]{
    width: 100% !important;
  }

  .hero__search__form form button{
    width: 100% !important;
    margin-top: 10px;
  }
}