/* ================================================================
   INJECTABLES PAGE — injectables.css
   Only new CSS specific to this page.
   Global styles (hamburger, nav, animations, buttons, inputs)
   all live in style.css and are NOT repeated here.
   ================================================================ */

/* ── Bullet dot helpers ──────────────────────────────────────── */
.inj-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1a1a1a;
}
.inj-dot-white {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
}

/* ================================================================
   HERO — text left / image flush RIGHT
   ================================================================ */
.inj-hero {
  min-height: 100svh;
}

.inj-hero-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100svh - 100px);
}

.inj-hero-text {
  padding: 48px 20px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inj-hero-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .inj-hero-inner {
    flex-direction: row;
    align-items: stretch;
    min-height: calc(100vh - 160px);
  }

  /* Text occupies ~52% of viewport */
  .inj-hero-text {
    flex: 0 0 52%;
    padding: 80px 0 80px 134px;
  }

  /* Image fills remaining 48% and extends to RIGHT viewport edge — no right padding */
  .inj-hero-img {
    flex: 1;
    aspect-ratio: unset;
    min-height: 640px;
  }
}

/* ================================================================
   SHARED SPLIT-ROW LAYOUT (service sections)
   Image column flush to LEFT or RIGHT edge on desktop
   ================================================================ */
.inj-split-row {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .inj-split-row {
    flex-direction: row;
    min-height: 757px;
  }
}

/* Image column — flush to LEFT edge (no left margin/padding) */
.inj-img-col {
  position: relative;
  width: 100%;
  aspect-ratio: 313 / 374;
  flex-shrink: 0;
  overflow: visible;
}

@media (min-width: 1024px) {
  .inj-img-col {
    width: 40%;
    aspect-ratio: unset;
  }
}

/* For .img-right variant — image flush to RIGHT edge */
.inj-split-row--rev .inj-img-col {
  width: 100%;
}

@media (min-width: 1024px) {
  .inj-split-row--rev .inj-img-col {
    width: 40%;
  }
}

/* Text column */
.inj-text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 20px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .inj-text-col {
    padding: 80px 80px 80px 100px;
  }

  .inj-split-row--rev .inj-text-col {
    padding: 80px 100px 80px 134px;
  }
}

/* ================================================================
   FAQ GRID — dark section two-column layout
   ================================================================ */
.inj-faq-grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media (min-width: 1024px) {
  .inj-faq-grid {
    flex-direction: row;
    gap: 0;
  }

  .inj-faq-col {
    flex: 1;
    padding-right: 40px;
  }

  .inj-faq-col:last-child {
    padding-right: 0;
    padding-left: 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Thin gradient divider line above each FAQ column heading */
.inj-faq-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(58,58,60,0.2) 0%, #D9D9D9 50%, rgba(58,58,60,0.2) 100%);
  width: 100%;
  margin-bottom: 32px;
}

/* ================================================================
   PRICE SECTION LAYOUT
   ================================================================ */
.inj-price-layout {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media (min-width: 1024px) {
  .inj-price-layout {
    flex-direction: row;
    gap: 64px;
    align-items: flex-start;
  }

  .inj-price-left {
    flex: 0 0 46%;
  }

  .inj-price-right {
    flex: 1;
  }
}

/* Clinic photo in price section */
.inj-price-photo {
  width: 100%;
  aspect-ratio: 658 / 823;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .inj-price-photo {
    max-width: 100%;
  }
}

/* ================================================================
   PRICE TABLE — three-column: Treatment | RN/NP | MD
   ================================================================ */
.price-table {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.price-header-row,
.price-row {
  display: grid;
  grid-template-columns: 1fr 72px 72px;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(58, 58, 60, 0.2);
}
.bg-black.relative .price-header-row,
.bg-black.relative  .price-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.price-header-row {
  padding-bottom: 8px;
  margin-bottom: 2px;
}

@media (min-width: 1024px) {
  .price-header-row,
  .price-row {
    grid-template-columns: 1fr 80px 80px;
    gap: 12px;
    padding: 10px 0;
  }
}

/* Column alignment */
.price-col-treatment {
  min-width: 0;
  line-height: 1.3;
}

.price-col-rnp,
.price-col-md {
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ================================================================
   LASER PRICE TABLE — four-column: Area | 1 session | pkg 6 | pkg 10
   ================================================================ */
.laser-price-table {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.laser-price-header,
.laser-price-row {
  display: grid;
  grid-template-columns: 1fr 62px 62px 62px;
  gap: 4px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(58, 58, 60, 0.18);
  font-family: 'Gilda Display', serif;
  font-size: 14px;
  color: #1a1a1a;
}

.laser-price-header {
  padding-bottom: 6px;
  margin-bottom: 2px;
}

.laser-price-row span:not(.laser-col-area) {
  text-align: right;
  white-space: nowrap;
}

.laser-col-area {
  min-width: 0;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .laser-price-header,
  .laser-price-row {
    grid-template-columns: 1fr 80px 80px 80px;
    gap: 8px;
    font-size: 18px;
    padding: 10px 0;
  }
}

/* ================================================================
   PRICE TABLE — two-column: Treatment | Price
   ================================================================ */
.price-table-2col .price-header-row,
.price-table-2col .price-row {
  grid-template-columns: 1fr 80px;
}

@media (min-width: 1024px) {
  .price-table-2col .price-header-row,
  .price-table-2col .price-row {
    grid-template-columns: 1fr 100px;
  }
}

/* ================================================================
   NAV CLOSE BUTTON (supplement to style.css if needed)
   ================================================================ */
.nav-close-btn::before,
.nav-close-btn::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.nav-close-btn::before { transform: rotate(45deg); }
.nav-close-btn::after  { transform: rotate(-45deg); }

/* ================================================================
   SERVICE BUTTON VARIANTS (supplement to style.css)
   ================================================================ */
.service-btn-black {
  color: #1a1a1a;
  border-color: rgba(58, 58, 60, 0.35) !important;
}
.service-btn-black:hover {
  border-color: #AF9952 !important;
  color: #AF9952;
}

/* Transition for gold on hover */
.service-btn {
  transition: border-color 0.3s ease, color 0.3s ease;
}