/*
 * =========================================================
 *  Urban Company Style - Black & White Theme Override
 *  Inspired by Urban Company (UrbanClap) Design Language
 * =========================================================
 */

/* -------------------------------------------------------
   1. CSS VARIABLES - Complete Black & White Override
------------------------------------------------------- */
:root {
  /* Primary = Deep Charcoal Black (like Urban Company's primary action color) */
  --color-primary: #1A1A1A;
  --color-secondary: #333333;

  /* RGB versions for rgba() usage */
  --color-primary-rgb: 26, 26, 26;
  --color-secondary-rgb: 51, 51, 51;

  /* Background tones */
  --bg-1: #F5F5F5;
  --bg-2: #FAFAFA;
  --bg-white: #FFFFFF;
  --bg-dark: #1A1A1A;

  /* Gradient - subtle dark gradient like Urban Company */
  --gradient-1: linear-gradient(145deg, #1A1A1A 0%, #333333 100%);

  /* Borders */
  --border-color: #E8E8E8;
  --border-color-2: #CCCCCC;

  /* Shadows */
  --shadow-md: 0 4px 24px -4px rgba(0, 0, 0, 0.12);
  --shadow-round: 0 10px 30px -10px rgba(0, 0, 0, 0.25);

  /* Text */
  --text-dark: #1A1A1A;
  --text-medium: #666666;
  --text-white: #FFFFFF;
  --text-light: #999999;
}

/* -------------------------------------------------------
   2. BODY & GENERAL - Clean white background
------------------------------------------------------- */
body {
  background-color: #FFFFFF;
  color: #1A1A1A;
}

/* -------------------------------------------------------
   3. BUTTONS - Urban Company sharp, bold buttons
------------------------------------------------------- */
.btn-primary,
.btn,
[class*="btn-primary"] {
  background-color: #1A1A1A !important;
  border-color: #1A1A1A !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
[class*="btn-primary"]:hover {
  background-color: #333333 !important;
  border-color: #333333 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
  transform: translateY(-1px);
}

/* Outline buttons - Urban Company style */
.btn-outline,
.btn-outline-1,
.btn-outline-2 {
  background-color: transparent !important;
  border: 2px solid #1A1A1A !important;
  color: #1A1A1A !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.btn-outline:hover,
.btn-outline-1:hover,
.btn-outline-2:hover {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
}

/* -------------------------------------------------------
   4. HEADER - Crisp white header like Urban Company
------------------------------------------------------- */
.header-area {
  background-color: #FFFFFF;
  border-bottom: 1px solid #F0F0F0;
}

.header-area.is-sticky {
  background: rgba(255, 255, 255, 0.97) !important;
  -webkit-backdrop-filter: saturate(180%) blur(10px) !important;
          backdrop-filter: saturate(180%) blur(10px) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
}

.header-area .nav-link {
  color: #1A1A1A !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.2px;
}

.header-area .nav-link:hover,
.header-area .nav-link.active {
  color: #1A1A1A !important;
  font-weight: 700 !important;
}

.header-area .nav-link:hover::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: #1A1A1A;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Header dropdown */
.header-area .main-navbar .menu-dropdown {
  background-color: #FFFFFF !important;
  border: 1px solid #EEEEEE;
  border-radius: 6px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

.header-area .main-navbar .menu-dropdown .nav-link:hover {
  color: #1A1A1A !important;
  background-color: #F5F5F5 !important;
  font-weight: 600;
}

.header-area .main-navbar .menu-dropdown .nav-link.active {
  border-inline-start-color: #1A1A1A !important;
}

/* Hamburger/toggler */
.header-area .menu-toggler {
  background: #1A1A1A !important;
}

/* Header 2 - transparent on scroll */
.header-area.header-2:not(.is-sticky, .header-static) :is(.nav-link:not(:is(.active, .menu-dropdown .nav-link)), .btn-icon, .btn-icon-text, .nice-select .current, .nice-select::after) {
  color: #FFFFFF !important;
}

/* -------------------------------------------------------
   5. HERO BANNER - Bold, minimal Urban Company style
------------------------------------------------------- */
.hero-banner .banner-content .title span {
  color: #1A1A1A !important;
  position: relative;
}

.hero-banner .banner-filter-form label {
  color: #1A1A1A !important;
}

.hero-banner .banner-filter-form .nice-select,
.hero-banner .banner-filter-form .form-control {
  background: #FAFAFA !important;
}

/* -------------------------------------------------------
   6. CATEGORY CARDS
------------------------------------------------------- */
.category-area .card-icon {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 20px -8px rgba(26, 26, 26, 0.35) !important;
}

.category-area .card:hover .card-title {
  color: #1A1A1A !important;
}

.category-area.category-2 .swiper-slide .bg-shape {
  background-color: #1A1A1A !important;
}

.category-area.category-2 .swiper-slide-prev .bg-shape {
  background-color: #555555 !important;
}

.category-area.category-2 .swiper-slide-next .bg-shape {
  background-color: #333333 !important;
}

/* -------------------------------------------------------
   7. SERVICE CARDS - Clean card design
------------------------------------------------------- */
.service-default,
.service-card {
  border-radius: 8px !important;
  overflow: hidden;
  border: 1px solid #F0F0F0 !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  background: #FFFFFF;
}

.service-default:hover,
.service-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important;
  transform: translateY(-3px);
  border-color: transparent !important;
}

/* Service price, rating */
.service-default .service-title:hover,
.service-card .title:hover {
  color: #1A1A1A !important;
}

/* -------------------------------------------------------
   8. WORKS / HOW IT WORKS SECTION
------------------------------------------------------- */
.works-area.works-1 .card {
  background-color: #1A1A1A !important;
  background-image: linear-gradient(145deg, #1A1A1A 0%, #333333 100%) !important;
}

.works-area.works-3 .card-icon {
  background-color: #1A1A1A !important;
  box-shadow: 0 10px 20px -8px rgba(26, 26, 26, 0.35) !important;
}

/* -------------------------------------------------------
   9. SECTION TITLE & HEADINGS
------------------------------------------------------- */
.section-title .title span,
.content-title .title span {
  color: #1A1A1A !important;
}

/* Underline accent on section titles */
.section-title .title::after {
  background-color: #1A1A1A !important;
}

/* -------------------------------------------------------
   10. TESTIMONIAL SECTION
------------------------------------------------------- */
.testimonial-area .slider-item .text {
  border-inline-start-color: #1A1A1A !important;
}

.testimonial-area .quote-icon {
  color: #1A1A1A !important;
}

.testimonial-area .slider-item {
  background-color: #FFFFFF !important;
  border: 1px solid #F0F0F0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

/* -------------------------------------------------------
   11. BLOG SECTION
------------------------------------------------------- */
.blog-area .card .card-btn {
  color: #1A1A1A !important;
}

.blog-area .card .card-list i {
  color: #1A1A1A !important;
}

/* -------------------------------------------------------
   12. STAFF SECTION
------------------------------------------------------- */
.staff-area .card:hover {
  border-bottom-color: #1A1A1A !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.10) !important;
}

/* -------------------------------------------------------
   13. FOOTER - Dark urban footer like Urban Company
------------------------------------------------------- */
.footer-area {
  background-color: #1A1A1A !important;
}

.footer-area,
.footer-area p,
.footer-area h1,
.footer-area h2,
.footer-area h3,
.footer-area h4,
.footer-area h5,
.footer-area h6,
.footer-area span,
.footer-area li,
.footer-area a {
  color: #E0E0E0 !important;
}

.footer-area a:hover,
.footer-area .footer-links a:hover,
.footer-area .info-list a:hover {
  color: #FFFFFF !important;
}

.footer-area .border-top {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.footer-area .social-link a {
  color: #1A1A1A !important;
  background-color: #FFFFFF !important;
  border-radius: 4px !important;
}

.footer-area .social-link a:hover {
  background-color: #E0E0E0 !important;
  color: #1A1A1A !important;
}

.footer-area .newsletter-form input {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #FFFFFF !important;
}

.footer-area .newsletter-form input::placeholder {
  color: #AAAAAA !important;
}

.footer-area .go-top {
  background-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

.footer-area .go-top::before {
  background-color: #1A1A1A !important;
}

/* -------------------------------------------------------
   14. FORM ELEMENTS - Urban Company clean inputs
------------------------------------------------------- */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: #1A1A1A !important;
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.08) !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea {
  border-radius: 6px !important;
  border-color: #DDDDDD !important;
  transition: border-color 0.2s ease !important;
}

/* -------------------------------------------------------
   15. RATINGS - Keep ratings visible
------------------------------------------------------- */
.rating i,
.star-rating i,
.ratings i {
  color: #F5A623 !important;
}

/* -------------------------------------------------------
   16. BADGES & TAGS
------------------------------------------------------- */
.badge-primary,
.tag-primary,
.badge {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  border-radius: 3px !important;
}

/* -------------------------------------------------------
   17. PAGINATION
------------------------------------------------------- */
.pagination .page-item.active .page-link {
  background-color: #1A1A1A !important;
  border-color: #1A1A1A !important;
  color: #FFFFFF !important;
}

.pagination .page-link {
  color: #1A1A1A !important;
  border-color: #DDDDDD !important;
}

.pagination .page-link:hover {
  background-color: #F5F5F5 !important;
  color: #1A1A1A !important;
}

/* -------------------------------------------------------
   18. TABS & PILLS
------------------------------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
}

.nav-tabs .nav-link.active {
  border-bottom-color: #1A1A1A !important;
  color: #1A1A1A !important;
}

/* -------------------------------------------------------
   19. PRICE - Highlight price in charcoal
------------------------------------------------------- */
.price-value,
.new-price,
.product-price .new-price {
  color: #1A1A1A !important;
  font-weight: 700 !important;
}

/* -------------------------------------------------------
   20. SVG SHAPES - Use dark fill instead of primary color
------------------------------------------------------- */
.shape-1 path,
.shape-2 path,
.shape-3 path,
.shape-4 path {
  fill: #1A1A1A !important;
}

/* -------------------------------------------------------
   21. PRODUCT CARDS - Urban Company style
------------------------------------------------------- */
.product-default .btn-icon:is(:hover, .wishlist-active) {
  background-color: #1A1A1A !important;
  border-color: #1A1A1A !important;
  color: #FFFFFF !important;
}

.product-default .hover-show {
  background-color: #1A1A1A !important;
}

.product-default:hover .btn-outline-2 {
  background-color: #1A1A1A !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

/* -------------------------------------------------------
   22. BREADCRUMB
------------------------------------------------------- */
.page-title-area {
  background-color: #1A1A1A !important;
}

/* -------------------------------------------------------
   23. NICE SELECT
------------------------------------------------------- */
.nice-select:focus,
.nice-select.open {
  border-color: #1A1A1A !important;
}

.nice-select .option:hover,
.nice-select .option.selected {
  color: #1A1A1A !important;
  font-weight: 600;
}

/* -------------------------------------------------------
   24. SORT BTN ACTIVE
------------------------------------------------------- */
.sort-area .btn-icon.active,
.sort-area .btn-icon:hover {
  color: #1A1A1A !important;
}

/* -------------------------------------------------------
   25. COOKIE CONSENT BAR
------------------------------------------------------- */
button.cookie-consent__agree {
  background-color: #1A1A1A !important;
}

/* -------------------------------------------------------
   26. PRELOADER & FLOATING
------------------------------------------------------- */
a#cartIcon .cart-length {
  background: #1A1A1A !important;
}

/* -------------------------------------------------------
   27. MOBILE MENU
------------------------------------------------------- */
.mobile-menu {
  background: #FFFFFF !important;
}

.mobile-menu .navbar-nav li a:hover {
  color: #1A1A1A !important;
}

/* -------------------------------------------------------
   28. SECTION BACKGROUNDS - alternating sections
------------------------------------------------------- */
.bg-dark,
[class*="bg-dark"] {
  background-color: #1A1A1A !important;
}

/* -------------------------------------------------------
   29. LINK HOVER COLOR
------------------------------------------------------- */
a:hover {
  color: #1A1A1A !important;
}

.color-primary,
.text-primary {
  color: #1A1A1A !important;
}

/* -------------------------------------------------------
   30. Urban Company HIGHLIGHT LINE on Hover (nav)
------------------------------------------------------- */
.header-area .main-navbar .menu-dropdown .nav-link.active {
  border-inline-start: 2px solid #1A1A1A !important;
  color: #1A1A1A !important;
}

/* -------------------------------------------------------
   31. ACCORDION & FAQ
------------------------------------------------------- */
.accordion-button:not(.collapsed) {
  color: #1A1A1A !important;
  background-color: #F5F5F5 !important;
  box-shadow: none !important;
}

.accordion-button:focus {
  border-color: #1A1A1A !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------
   32. SWIPER NAVIGATION DOTS / ARROWS
------------------------------------------------------- */
.swiper-pagination-bullet-active {
  background-color: #1A1A1A !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: #1A1A1A !important;
}

/* -------------------------------------------------------
   33. CARD HOVER BORDER BOTTOM ACCENT
------------------------------------------------------- */
.staff-area .card:hover {
  border-bottom-color: #1A1A1A !important;
}

/* -------------------------------------------------------
   34. INPUT RANGE SLIDER (noUiSlider)
------------------------------------------------------- */
.noUi-connect {
  background-color: #1A1A1A !important;
}

.noUi-handle {
  border-color: #1A1A1A !important;
}

/* -------------------------------------------------------
   35. USER DASHBOARD SIDEBAR ACTIVE
------------------------------------------------------- */
.user-sidebar .nav-link.active,
.profile-nav .nav-link.active {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
}

/* -------------------------------------------------------
   36. OVERALL PAGE SECTION ACCENT LINES
   Urban Company uses thin black lines as accents
------------------------------------------------------- */
.section-divider,
hr {
  border-color: #EEEEEE !important;
}

/* -------------------------------------------------------
   37. TOASTR SUCCESS uses green, keep it but style others
------------------------------------------------------- */
.toast-error {
  background-color: #1A1A1A !important;
}

/* -------------------------------------------------------
   38. TABLE HEADER
------------------------------------------------------- */
table thead th {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

/* -------------------------------------------------------
   39. CHECKBOX & RADIO CUSTOM
------------------------------------------------------- */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: #1A1A1A;
}

/* -------------------------------------------------------
   40. Urban Company HERO - White text on dark bg sections
------------------------------------------------------- */
.hero-banner.hero-banner-2 .banner-content h1,
.hero-banner.hero-banner-2 .banner-content p,
.hero-banner.hero-banner-3 .banner-content h1,
.hero-banner.hero-banner-3 .banner-content p {
  color: #FFFFFF;
}

/* -------------------------------------------------------
   41. CTA / ACTION BANNER
------------------------------------------------------- */
.action-banner {
  background-color: #1A1A1A !important;
}

.action-banner .content-title .title,
.action-banner .content-title p {
  color: #FFFFFF !important;
}

/* -------------------------------------------------------
   42. CLEAN CARD STYLE (Urban Company card UI)
------------------------------------------------------- */
.card {
  border-radius: 8px !important;
  border: 1px solid #F0F0F0 !important;
}

.card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
}

/* -------------------------------------------------------
   43. BOOKING LOADER
------------------------------------------------------- */
.request-loader-time {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* -------------------------------------------------------
   44. DROPDOWN ACTIVE STATE
------------------------------------------------------- */
.dropdown-item:active,
.dropdown-item:focus {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
}

/* -------------------------------------------------------
   45. SMOOTH SCROLLBAR TRACK
------------------------------------------------------- */
::-webkit-scrollbar-thumb {
  background: rgba(26, 26, 26, 0.25) !important;
}