/* ==========================================================================
   Find A Decorator - Pixel-Perfect Stylesheet (Bootstrap 5 Enhanced)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --background: 36 43% 97%;
  --foreground: 217 38% 14%;

  --card: 0 0% 100%;
  --card-foreground: 217 38% 14%;

  --popover: 0 0% 100%;
  --popover-foreground: 217 38% 14%;

  --primary: 219 47% 20%;
  --primary-foreground: 36 43% 97%;

  --secondary: 36 23% 94%;
  --secondary-foreground: 217 38% 14%;

  --muted: 36 20% 93%;
  --muted-foreground: 217 12% 42%;

  --accent: 43 62% 44%;
  --accent-foreground: 217 47% 14%;

  --verified: 146 42% 30%;
  --verified-foreground: 0 0% 100%;

  --destructive: 8 70% 45%;
  --destructive-foreground: 0 0% 100%;

  --border: 36 18% 88%;
  --input: 36 18% 88%;
  --ring: 219 47% 20%;

  --radius: 0.5rem;

  --font-heading:
    'Plus Jakarta Sans',
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;

  --font-body:
    'Inter',
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;

  --primary-color: #1b2a4a;
  --accent-color: #b6831c;
  --verified-color: #2c6d48;

  --bg-color: #faf7f2;
  --text-main: #162031;
  --text-muted: #5f6d7e;
  --border-color: #e6ded4;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  font-family: var(--font-body);
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  line-height: 1.5;

  -webkit-font-smoothing:
    antialiased;

  margin: 0;
  padding: 0;
}


h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family:
    var(--font-heading);

  letter-spacing:
    -0.025em;

  font-weight:
    700;

  color:
    hsl(var(--foreground));
}


a {
  color:
    hsl(var(--primary));

  text-decoration:
    none;

  transition:
    color 0.15s ease;
}


a:hover {
  color:
    hsl(var(--accent));
}


.fw-extrabold {
  font-weight:
    900;
}


.lh-50p {
  line-height:
    50px;
}


.form-label {
  font-size:
    14px;

  margin-bottom:
    3px;
}


.container-custom {
  max-width:
    1280px;

  margin-left:
    auto;

  margin-right:
    auto;

  padding-left:
    1.25rem;

  padding-right:
    1.25rem;
}


/* HEADER */

.header-custom {
  background-color:
    rgba(250, 247, 242, 0.9);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  border-bottom:
    1px solid hsl(var(--border));

  position:
    sticky;

  top:
    0;

  z-index:
    1020;
}


.header-inner {
  height:
    64px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


.brand-logo-icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

  border-radius:
    6px;

  background-color:
    hsl(var(--primary));

  color:
    hsl(var(--primary-foreground));

  font-size:
    1.1rem;
}


.brand-title {
  font-size:
    1.125rem;

  font-weight:
    800;

  letter-spacing:
    -0.025em;

  color:
    hsl(var(--primary));
}


.nav-item-link {
  font-size:
    0.875rem;

  font-weight:
    500;

  color:
    hsl(var(--muted-foreground));

  padding:
    0.5rem 0.75rem;

  border-radius:
    6px;

  text-decoration:
    none;

  transition:
    all 0.15s ease;
}


.nav-item-link:hover {
  color:
    hsl(var(--foreground));

  background-color:
    hsl(var(--muted));
}


.nav-item-link.active {
  color:
    hsl(var(--primary));

  font-weight:
    600;
}


/* BUTTONS */

.btn-primary-custom {
  background-color:
    hsl(var(--primary)) !important;

  color:
    hsl(var(--primary-foreground)) !important;

  font-size:
    0.875rem;

  font-weight:
    500;

  padding:
    0.5rem 1rem;

  border-radius:
    6px;

  border:
    1px solid hsl(var(--primary)) !important;

  box-shadow:
    0 1px 2px rgba(27, 42, 74, 0.05);

  transition:
    all 0.15s ease;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.5rem;

  text-decoration:
    none !important;
}


.btn-primary-custom:hover,
.btn-primary-custom:focus,
.btn-primary-custom:focus-visible,
.btn-primary-custom:active,
.btn-primary-custom.active {
  background-color:
    #121c32 !important;

  border-color:
    #121c32 !important;

  color:
    #ffffff !important;

  box-shadow:
    0 0 0 3px rgba(27, 42, 74, 0.25) !important;

  outline:
    none !important;
}


.btn-secondary-custom {
  background-color:
    hsl(var(--secondary)) !important;

  color:
    hsl(var(--secondary-foreground)) !important;

  font-size:
    0.875rem;

  font-weight:
    500;

  padding:
    0.5rem 1.5rem;

  border-radius:
    6px;

  border:
    1px solid transparent !important;

  box-shadow:
    0 1px 2px rgba(27, 42, 74, 0.05);

  transition:
    all 0.15s ease;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.5rem;

  text-decoration:
    none !important;
}


.btn-secondary-custom:hover,
.btn-secondary-custom:focus,
.btn-secondary-custom:focus-visible,
.btn-secondary-custom:active,
.btn-secondary-custom.active {
  background-color:
    hsl(var(--secondary) / 0.85) !important;

  color:
    hsl(var(--secondary-foreground)) !important;

  box-shadow:
    0 0 0 3px rgba(27, 42, 74, 0.15) !important;

  outline:
    none !important;
}


.btn-outline-custom {
  background-color:
    #ffffff !important;

  color:
    hsl(var(--foreground)) !important;

  font-size:
    0.875rem;

  font-weight:
    500;

  padding:
    0.5rem 1rem;

  border-radius:
    6px;

  border:
    1px solid hsl(var(--input)) !important;

  box-shadow:
    0 1px 2px rgba(27, 42, 74, 0.03);

  transition:
    all 0.15s ease;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.5rem;

  text-decoration:
    none !important;
}


.btn-outline-custom:hover,
.btn-outline-custom:focus,
.btn-outline-custom:focus-visible,
.btn-outline-custom:active,
.btn-outline-custom.active {
  background-color:
    hsl(var(--accent) / 0.1) !important;

  color:
    hsl(var(--accent)) !important;

  border-color:
    hsl(var(--accent)) !important;

  box-shadow:
    0 0 0 3px rgba(182, 131, 28, 0.2) !important;

  outline:
    none !important;
}


.btn-ghost {
  background-color:
    transparent !important;

  color:
    hsl(var(--foreground)) !important;

  font-size:
    0.875rem;

  font-weight:
    500;

  padding:
    0.5rem 0.75rem;

  border-radius:
    6px;

  border:
    none !important;

  transition:
    all 0.15s ease;

  text-decoration:
    none !important;
}


.btn-ghost:hover,
.btn-ghost:focus,
.btn-ghost:focus-visible,
.btn-ghost:active,
.btn-ghost.active {
  background-color:
    hsl(var(--muted)) !important;

  color:
    hsl(var(--foreground)) !important;

  outline:
    none !important;
}


.btn-dev-mode {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    0.375rem;

  border-radius:
    6px;

  border:
    1px solid hsl(var(--border));

  background-color:
    #ffffff;

  padding:
    0.375rem 0.75rem;

  font-size:
    0.75rem;

  font-weight:
    500;

  color:
    hsl(var(--muted-foreground));
}


.btn-dev-mode:hover {
  color:
    hsl(var(--foreground));

  border-color:
    hsl(var(--foreground) / 0.2);
}


.dev-dot {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background-color:
    hsl(var(--accent));

  display:
    inline-block;
}


/* HERO */

.hero-wrapper {
  position:
    relative;

  min-height:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-bottom:
    1px solid hsl(var(--border));

  overflow:
    hidden;

  background-color:
    #0f172a;

  padding-top:
    3rem;

  padding-bottom:
    3rem;

  box-sizing:
    border-box;
}


@media (min-width: 992px) {

  .hero-wrapper {
    min-height:
      auto;

    padding-top:
      3.5rem;

    padding-bottom:
      3.5rem;
  }
}


.hero-parallax-layer {
  position:
    absolute;

  top:
    -25%;

  left:
    0;

  width:
    100%;

  height:
    150%;

  pointer-events:
    none;

  z-index:
    0;

  will-change:
    transform;
}


.hero-parallax-img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center 25%;
}


.hero-parallax-overlay {
  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      90deg,
      rgb(15 23 42 / 60%) 0%,
      rgb(15 23 42 / 60%) 45%,
      rgba(15, 23, 42, 0.55) 100%
    );
}


.hero-title-white {
  color:
    #ffffff !important;

  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.6),
    0 1px 4px rgba(0, 0, 0, 0.5);
}


.hero-subtitle-white {
  color:
    rgba(255, 255, 255, 0.94) !important;

  text-shadow:
    0 1px 10px rgba(0, 0, 0, 0.6);
}


.hero-stats-white {
  color:
    #ffffff !important;

  text-shadow:
    0 1px 8px rgba(0, 0, 0, 0.7);
}


.hero-card-glass {
  background-color:
    rgba(255, 255, 255, 0.98);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

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

  border-radius:
    1rem;

  box-shadow:
    0 24px 50px -12px rgba(0, 0, 0, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.1);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.hero-card-glass:hover {
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, 0.45);
}


.badge-pill-soft {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    0.5rem;

  border-radius:
    9999px;

  border:
    1px solid hsl(var(--border));

  background-color:
    rgba(255, 255, 255, 0.95);

  padding:
    0.35rem 0.875rem;

  font-size:
    0.8125rem;

  font-weight:
    500;

  color:
    hsl(var(--muted-foreground));

  backdrop-filter:
    blur(8px);
}


.badge-verified-pill {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    0.25rem;

  border-radius:
    9999px;

  background-color:
    hsl(var(--verified));

  color:
    #ffffff;

  font-size:
    0.75rem;

  font-weight:
    600;

  padding:
    0.125rem 0.5rem;
}


/* SEARCH TABS */

.segment-btn-group {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    1.5rem;

  background:
    transparent;

  padding:
    0;

  border:
    none;

  border-bottom:
    2px solid #f1ede8;

  width:
    100%;
}


.segment-btn {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    0.5rem;

  padding:
    0.25rem 0.25rem 0.75rem 0.25rem;

  font-size:
    0.9375rem;

  font-weight:
    500;

  cursor:
    pointer;

  border:
    none;

  background:
    transparent !important;

  color:
    #64748b;

  position:
    relative;

  transition:
    all 0.15s ease;

  user-select:
    none;

  border-radius:
    0;

  box-shadow:
    none !important;

  margin-bottom:
    -2px;
}


.segment-btn::after {
  content:
    '';

  position:
    absolute;

  bottom:
    0;

  left:
    0;

  width:
    100%;

  height:
    2px;

  background-color:
    transparent;

  transition:
    background-color 0.15s ease;
}


.segment-btn:hover {
  color:
    #1b2a4a;

  background:
    transparent !important;
}


.segment-btn.active,
.segment-btn:has(input:checked) {
  border:
    none !important;

  background:
    transparent !important;

  color:
    #1b2a4a !important;

  font-weight:
    600;

  box-shadow:
    none !important;
}


.segment-btn.active::after,
.segment-btn:has(input:checked)::after {
  background-color:
    #1b2a4a;
}


.segment-btn.active i,
.segment-btn:has(input:checked) i {
  color:
    #1b2a4a !important;
}


/* CARDS */

.bg-card {
  background-color:
    hsl(var(--card));
}


.border-border {
  border-color:
    hsl(var(--border)) !important;
}


.shadow-soft {
  box-shadow:
    0 1px 2px rgba(27, 42, 74, 0.04),
    0 4px 16px rgba(27, 42, 74, 0.06);
}


.card-hover-lift {
  transition:
    all 0.2s ease;

  cursor:
    pointer;

  text-decoration:
    none;
}


.card-hover-lift:hover {
  border-color:
    hsl(var(--accent) / 0.4) !important;

  box-shadow:
    0 6px 24px rgba(27, 42, 74, 0.09);

  transform:
    translateY(-2px);
}


/* OPTION CARDS */

.option-tile-card {
  border-radius:
    8px;

  border:
    1px solid hsl(var(--border));

  background-color:
    #ffffff;

  padding:
    0.875rem 1.125rem;

  font-size:
    0.875rem;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    all 0.15s ease-in-out;

  user-select:
    none;

  position:
    relative;
}


.option-tile-card:hover {
  border-color:
    rgba(182, 131, 28, 0.5) !important;
}


.option-tile-card.selected,
.option-tile-card:has(input[type="radio"]:checked),
.option-tile-card:has(input[type="checkbox"]:checked) {
  border-color:
    hsl(var(--primary)) !important;

  background-color:
    rgba(27, 42, 74, 0.05) !important;

  box-shadow:
    0 0 0 1px hsl(var(--primary));
}


.option-tile-card.selected .fw-semibold,
.option-tile-card:has(input:checked) .fw-semibold {
  color:
    hsl(var(--primary));
}


.option-tile-card .form-check-input {
  cursor:
    pointer;

  border-color:
    #cbd5e1;

  width:
    1.15rem;

  height:
    1.15rem;
}


.option-tile-card .form-check-input:checked {
  background-color:
    #1b2a4a;

  border-color:
    #1b2a4a;
}


/* WIZARD */

.wizard-progress-track {
  width:
    100%;

  height:
    8px;

  border-radius:
    9999px;

  background-color:
    hsl(var(--muted)) !important;

  overflow:
    hidden;
}


.wizard-progress-bar {
  height:
    100%;

  border-radius:
    9999px;

  background-color:
    hsl(var(--primary)) !important;

  transition:
    width 0.3s ease;
}


/* FORM */

.form-control-shadcn {
  border:
    1px solid hsl(var(--input));

  border-radius:
    6px;

  background-color:
    transparent;

  padding:
    0.625rem 0.875rem;

  font-size:
    0.875rem;

  color:
    hsl(var(--foreground));

  height:
    44px;
}


.form-control-shadcn:focus {
  border-color:
    hsl(var(--ring));

  outline:
    0;

  box-shadow:
    0 0 0 1px hsl(var(--ring));
}


/* COLORS */

.bg-muted-soft {
  background-color:
    hsl(var(--muted) / 0.4);
}


.bg-primary-custom {
  background-color:
    hsl(var(--primary));

  color:
    hsl(var(--primary-foreground));
}


.text-accent-custom {
  color:
    hsl(var(--accent)) !important;
}


.text-verified-custom {
  color:
    hsl(var(--verified)) !important;
}


.text-muted-custom {
  color:
    hsl(var(--muted-foreground)) !important;
}


/* SERVICES */

.service-icon-wrapper {
  width:
    44px;

  height:
    44px;

  border-radius:
    6px;

  color:
    hsl(var(--primary));

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    1.15rem;

  transition:
    all 0.2s ease;
}


.card-hover-lift:hover
.service-icon-wrapper {
  background-color:
    hsl(var(--primary));

  color:
    hsl(var(--primary-foreground));
}


/* VERIFIED PRO */

.pro-avatar-img {
  width:
    48px;

  height:
    48px;

  border-radius:
    50%;

  object-fit:
    cover;
}


/* TRUST */

.trust-card {
  border:
    1px solid rgba(250, 247, 242, 0.15);

  background-color:
    rgba(250, 247, 242, 0.05);

  border-radius:
    8px;

  padding:
    1.5rem;
}


/* FOOTER */

.footer-custom {
  background-color:
    hsl(var(--primary));

  color:
    hsl(var(--primary-foreground));

  margin-top:
    4rem;

  padding-top:
    3rem;

  padding-bottom:
    2rem;
}


.footer-custom a {
  color:
    hsl(var(--primary-foreground) / 0.7);

  font-size:
    0.875rem;

  transition:
    color 0.15s ease;
}


.footer-custom a:hover {
  color:
    hsl(var(--primary-foreground));
}


.footer-heading {
  font-size:
    0.875rem;

  font-weight:
    600;

  margin-bottom:
    0.75rem;

  color:
    hsl(var(--primary-foreground));
}


.footer-bottom-border {
  border-top:
    1px solid rgba(250, 247, 242, 0.15);
}


@media (max-width: 768px) {

  .hero-wrapper {
    padding-top:
      2.5rem;

    padding-bottom:
      4rem;
  }

}