/* ============================================================
   FASHION HAIR BRAIDING — sections.css
   Ticker · Testimonials · Stats · Booking
   ============================================================ */
/* ── 1. MODERATE SCROLLING TICKER ────────────────────────── */
.ticker {
  background:var(--clr-gold);
  overflow: hidden;
  /* Reduced height padding */
  padding-block: 20px; 
  position: relative;
  user-select: none;
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 150px; 
  z-index: 2;
  pointer-events: none;
}
.ticker::before {
  left: 0;
}
.ticker::after {
  right: 0;
}

.ticker__track {
  display: flex;
  width: max-content;
  /* Increased from 60s to 90s to significantly slow down the speed */
  animation: ticker-scroll 90s linear infinite;
}

.ticker__track:hover { animation-play-state: paused; }

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker__item {
  display: flex;
  align-items: center;
  gap: 20px; /* Reduced gap */
  padding-inline: 20px; /* Reduced padding */
  white-space: nowrap;
  font-family: var(--font-display);
  /* Reduced from 180px to a more balanced 80px */
  font-size: 50px; 
  font-weight: 600;
  letter-spacing: 0.05em; 
  text-transform: uppercase;
  color:#11141a;;
}

.ticker__dot {
  /* Scaled down to match the new 80px font size */
  width: 12px; 
  height: 12px;
  background: #11141a;;
  border-radius: 50%;
  opacity: 0.5;
  flex-shrink: 0;
}

/* ── 2. TESTIMONIALS ──────────────────────────────────────── */
.testimonials {
  padding-block: clamp(5rem, 8vw, 9rem);
  background: var(--clr-bg);
  overflow: hidden;
}

.testimonials__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.testimonials__header h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Slider container */
.testimonials__slider {
  position: relative;
  max-width: 1200px; /* Increased from 780px */
  margin-inline: auto;
  padding-inline: 70px;
}
/* Nav arrows */
.testimonials__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-base) var(--ease);
  z-index: 2;
  flex-shrink: 0;
}
.testimonials__arrow:hover {
  border-color: var(--clr-gold-dim);
  color: var(--clr-gold);
}
.testimonials__arrow--prev { left: 0; }
.testimonials__arrow--next { right: 0; }

/* Slides wrapper */
.testimonials__track {
  overflow: hidden;
}

.testimonials__slides {
  display: flex;
  transition: transform 0.55s var(--ease);
}
.testimonial-card {
  flex: 0 0 100%;
  background: #11141a;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: clamp(2rem, 5vw, 4rem); /* Increased padding for a "bigger" feel */
  text-align: center;
  position: relative;
}

/* Big decorative quote mark */
.testimonial-card__quote-icon {
  position: absolute;
  top: 2rem;
  left: 2.5rem;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--clr-gold-dim);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

/* Stars */
.testimonial-card__stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 1.5rem;
}
.testimonial-card__star {
  color: var(--clr-gold);
  font-size: 18px;
  line-height: 1;
}

/* Quote text */
.testimonial-card__text {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 300;
  color: var(--clr-text-muted);
  line-height: 1.85;
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

/* Avatar + name */
.testimonial-card__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.testimonial-card__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--clr-gold-dim);
  object-fit: cover;
  background: var(--clr-surface-2);
  overflow: hidden;
  margin-bottom: 4px;
}
/* Placeholder avatar when no image */
.testimonial-card__avatar-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--clr-gold-dim);
  background: var(--clr-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--clr-gold-dim);
  margin-bottom: 4px;
}
.testimonial-card__name {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-text);
}
.testimonial-card__role {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-gold);
}

/* Dot indicators */
.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
}
.testimonials__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-border);
  border: none;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease);
  padding: 0;
}
.testimonials__dot.is-active {
  background: var(--clr-gold);
  width: 24px;
  border-radius: 3px;
}
@media (max-width: 768px) {
  .testimonials__slider {
    max-width: 100%;
    padding-inline: 20px; /* Reduced further to maximize card width */
  }

  /* Force the card to be a perfect square on mobile */
  .testimonial-card {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically inside the square */
    padding: 1.5rem; /* Reduces padding to give text more room */
  }

  /* Shrink the giant quote icon so it doesn't overlap text */
  .testimonial-card__quote-icon {
    font-size: 3.5rem;
    top: 1rem;
    left: 1rem;
  }

  /* Reduce gaps to save vertical space */
  .testimonial-card__stars {
    margin-bottom: 1rem;
  }

  /* Shrink text size and line height so it fits in the square */
  .testimonial-card__text {
    font-size: 16px; /* Scaled down from 24px */
    line-height: 1.5;
    margin-bottom: 1.5rem;
    
    /* Prevents extra-long reviews from breaking out of the square */
    display: -webkit-box;
    -webkit-line-clamp: 5; /* Limits quote to 5 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Slightly scale down the avatar area */
  .testimonial-card__avatar,
  .testimonial-card__avatar-placeholder {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
}
/* ── 3. STATS BAR ─────────────────────────────────────────── */
.stats {
  padding-block: clamp(4rem, 7vw, 7rem);
  background: var(--clr-bg);
  margin-top: -120px;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, auto); /* Changed from 1fr to auto to hug content */
  justify-content: center; /* Centers the whole grid block */
  gap: clamp(2rem, 5vw, 6rem); /* Increased gap for better spacing */
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers items inside the column */
  text-align: center;
  border-left: none; /* Removed the border-left as it looks cleaner centered */
  padding-left: 0;
}

.stat-item__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.stat-item__label::before {
  content: '';
  width: 15px;
  height: 15px;
  background: var(--clr-gold);
  border-radius: 50%;
  flex-shrink: 0;
}

.stat-item__number {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 300;
  line-height: 1;
  color: var(--clr-text);
}

/* "+" suffix rendered via JS counter keeps it in same span */
.stat-item__number-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.stat-item__suffix {
  font-family: var(--font-display);
  font-size:70px;
  font-weight: 300;
  color: var(--clr-text);
}
@media (max-width: 900px) {
  .stats__grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 3rem; 
  }
}

@media (max-width: 480px) {
  .stats__grid { 
    grid-template-columns: 1fr; 
    gap: 2rem; 
  }
}
/*/* =====================================================
   BOOKING SECTION
===================================================== */

.booking-section {
    display: grid;
    grid-template-columns: 48% 52%;
    min-height: 380px;
    background: var(--clr-bg);
    overflow: hidden;
}

/* IMAGE SIDE */

.booking-section__image {
    position: relative;
    min-height: 380px;
}

.booking-section__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* FORM SIDE */

.booking-section__form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 3rem);
    background: var(--clr-bg);
}

/* DECORATION */

.booking-section__deco {
    color: var(--clr-gold);
    margin-bottom: 1rem;
}

.booking-section__eyebrow {
    margin-bottom: 0.75rem;
}

.booking-section__title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2rem;
    max-width: 12ch;
}

/* FORM */

.booking-form {
    width: 100%;
}

.booking-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.booking-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.booking-form__label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.booking-form__required {
    color: var(--clr-gold);
}

/* INPUTS */

.booking-form__select,
.booking-form__input {
    width: 100%;
    height: 56px;
    padding: 0 1rem;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--clr-text);
    font-size: 0.95rem;
    transition: all .25s ease;
}

.booking-form__select:focus,
.booking-form__input:focus {
    outline: none;
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 3px rgba(184,149,58,.15);
}

/* BUTTON */

.booking-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: transparent;
    border: 1px solid var(--clr-border-gold);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    width: fit-content;
    transition: all .3s ease;
}

.booking-form__submit:hover {
    border-color: var(--clr-gold);
}

.booking-form__submit-label {
    padding: 1rem 1.75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .8rem;
    color: var(--clr-text);
}

.booking-form__submit-icon {
    width: 56px;
    height: 56px;
    background: var(--clr-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-bg);
}

/* LARGE DESKTOP */

@media (min-width: 1600px) {

    .booking-section {
        min-height: 520px;
    }

    .booking-section__image {
        min-height: 520px;
    }

    .booking-section__form-panel {
        padding: 3.5rem 4rem;
    }
}

/* TABLET */

@media (max-width: 1024px) {

    .booking-section {
        grid-template-columns: 45% 55%;
    }

    .booking-section__form-panel {
        padding: 3rem;
    }
}

/* MOBILE */

@media (max-width: 768px) {

    .booking-section {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .booking-section__image {
        height: 320px;
        min-height: 320px;
    }

    .booking-section__form-panel {
        padding: 2rem;
    }

    .booking-form__grid {
        grid-template-columns: 1fr;
    }

    .booking-section__title {
        max-width: none;
    }
}

/* SMALL MOBILE */

@media (max-width: 480px) {

    .booking-section__form-panel {
        padding: 1.5rem;
    }

    .booking-section__title {
        font-size: 1.9rem;
    }

    .booking-form__select,
    .booking-form__input {
        height: 52px;
    }
}


/* Wrapper: Edge-to-Edge Full-Width */
.appt-split-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  background-color:  #11141a;
  font-family: system-ui, -apple-system, sans-serif;
  width: 100%;
  margin: 0; 
  border-radius: 0; 
  /* Ensures both the image side and form side stretch to the exact same height */
  align-items: stretch; 
}

/* Tablet/Desktop layout */
@media (min-width: 768px) {
  .appt-split-wrapper {
    grid-template-columns: 1fr 1fr;
    height: clamp(500px, 80vh, 700px); /* Slightly taller max to give laptop screens breathing room */
  }
}

/* FIX: Absolute positioning forces the image to perfectly cover the grid cell without aspect ratio issues */
.appt-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px; /* Safety fallback for mobile so the image isn't crushed */
  overflow: hidden;
}

.appt-visual img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* FIX: Removed auto-margins and flex-centering to prevent top gaps and clipping */
.appt-form-container {
  /* Uses clamp() for padding: at least 2rem, ideally 5vh, max 4rem. 
     This centers it nicely without breaking the scroll! */
  padding: clamp(2rem, 5vh, 4rem) 10%; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Always starts from the top safely */
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto; 
}

/* Typography & Aesthetics */
.appt-deco { 
  color: #c48c71; 
  margin-bottom: 0.75rem; 
  flex-shrink: 0; /* Prevents svg from squishing */
}

.appt-eyebrow { 
  text-transform: uppercase; 
  letter-spacing: 0.1em; 
  font-size: 0.85rem; 
  color: var(--clr-text); 
  margin: 0 0 0.25rem 0; 
  font-weight: 600; 
}

.appt-title { 
  font-size: 2.5rem; 
  color: var(--clr-text); 
  margin: 0 0 1.5rem 0; 
  font-weight: 500; 
  text-transform: upppercase;
}

/* Form Grid */
.appt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; 
  margin-bottom: 1.5rem; 
}

@media (min-width: 1024px) {
  .appt-grid {
    grid-template-columns: 1fr 1fr; /* 2-column form on wide screens */
  }
}

.appt-field { 
  display: flex; 
  flex-direction: column; 
  gap: 0.3rem; 
}

.appt-label { 
  font-size: 0.9rem; 
  color:var(--clr-text); 
  font-weight: 500; 
    font-family: inherit;

}

.appt-input { 
  width: 100%; 
  padding: 0.65rem 1.5rem; /* Increased side padding for the pill shape */
  border: 1px solid rgb(255 255 255 / 15%)  ; /* Darker border to contrast the transparent background */
  border-radius: 50px; /* FORCED PILL SHAPE */
  font-size: 0.95rem; 
  background-color: transparent; /* TRANSPARENT BACKGROUND */
  color: var(--clr-text) ; /* NEW INPUT TEXT COLOR (Stylish accent color) */
  transition: all 0.2s ease; 
  box-sizing: border-box; 
  margin-bottom: 5px;
  font-family: inherit;
}


.appt-input:focus { 
  outline: none; 
  box-shadow: 0 0 0 3px rgba(196, 140, 113, 0.15); 
}

/* FIX: Forces the dropdown option list to have a solid background and readable text when expanded */
.appt-input option {
  background-color: #fcfaf8; /* Matches the form panel background */
  color: #222; /* Dark, readable text inside the dropdown list */
}


/* Submit Button */
.appt-btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 0.5rem; 
  padding: 0.75rem 2rem; 
  background-color: #222; 
  color: #fff; 
  border: none; 
  border-radius: 50px; 
  font-size: 1rem; 
  font-weight: 500; 
  cursor: pointer; 
  transition: background-color 0.2s ease, transform 0.1s ease; 
  width: max-content; 
}

.appt-btn:hover { background-color: #c48c71; }
.appt-btn:active { transform: translateY(1px); }

/* Custom Dropdown Arrow with Right Spacing */
select.appt-input {
  /* Hides the default browser arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* Injects a clean custom chevron arrow (matches your #c48c71 text color) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c48c71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-size: 16px;
  
  /* ADJUST THIS: 'right 1.5rem' controls exactly how much space is on the right of the arrow */
  background-position: right 1.5rem center;
  
  /* Extra padding on the right so long text options don't overlap the arrow */
  padding-right: 3.5rem; 
  
  cursor: pointer;
}

/* IE11 fallback to hide native arrow */
select.appt-input::-ms-expand {
  display: none;
}