/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi-3
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 5.0.0-public-alpha.20.1.1755020774
Updated: 2025-08-12 17:46:14

*/

/* ===== CSS Variables in :root ===== */
:root {
  --gpt5-gold: #D4AF37;
  --gpt5-white: #ffffff;
  --gpt5-black: #000000;
  --gpt5-muted: rgba(255,255,255,0.72);
  --gpt5-glass: rgba(255,255,255,0.06);
  --gpt5-border: rgba(255,255,255,0.12);
  --gpt5-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
/* ===== black backgroundt ===== */
html, body {
  background-color: #000000 !important;
  background: #000000 !important;
  min-height: 100vh !important;
}

/* Safari mobile specific fix */
@supports (-webkit-appearance: none) {
  html {
    background: #000000 !important;
    -webkit-background-size: cover !important;
  }
  
  body {
    background: #000000 !important;
    -webkit-background-size: cover !important;
  }
}

/* Firefox mobile fix */
@-moz-document url-prefix() {
  html, body {
    background-color: #000000 !important;
  }
}

/* Additional mobile viewport fix */
@media (max-width: 768px) {
  html, body {
    background-color: #000000 !important;
    background: #000000 !important;
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
  }
}
/* ===== black background ===== */
/* Smooth anchor scroll globally */
html { scroll-behavior: smooth; }

/* ===== Medspa Landing — Scope ===== */
.gpt5-css-landing {
  color: var(--gpt5-white);
  background: transparent;
}

/* ===== Sections & Container ===== */
.gpt5-css-section { padding: clamp(3rem, 6vw, 6rem) 1.25rem; }
.gpt5-css-container { max-width: 1200px; margin-inline: auto; }

/* Spacing utilities */
.gpt5-css-stack-2 > * + * { margin-top: .5rem; }
.gpt5-css-stack-3 > * + * { margin-top: .75rem; }
.gpt5-css-stack-4 > * + * { margin-top: 1rem; }
.gpt5-css-stack-6 > * + * { margin-top: 1.5rem; }

/* 
===== Grid helpers (CSS Grid) 
.gpt5-css-grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 640px) { .gpt5-css-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
*/
.gpt5-css-grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0,1fr)); align-items: stretch; }
@media (min-width: 640px) { .gpt5-css-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: baseline; } }

.gpt5-css-grid-3 .gpt5-css-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gpt5-css-grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .gpt5-css-grid-2 { grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: baseline; } }

/* ===== Flex fallbacks for older linters (optional) ===== */
.gpt5-css-grid-3.is-flex, .gpt5-css-grid-2.is-flex { display: flex; flex-wrap: wrap; gap: 1rem; }
.gpt5-css-grid-3.is-flex > * { flex: 1 1 100%; }
@media (min-width: 640px) { .gpt5-css-grid-3.is-flex > * { flex: 1 1 calc(33.333% - 0.67rem); } }
.gpt5-css-grid-2.is-flex > * { flex: 1 1 100%; }
@media (min-width: 992px) { .gpt5-css-grid-2.is-flex > *:first-child { flex: 1 1 55%; } .gpt5-css-grid-2.is-flex > *:last-child { flex: 1 1 45%; } }

/* ===== Typography ===== */
.gpt5-css-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(212,175,55,0.12);
  color: var(--gpt5-gold);
  border: 1px solid rgba(212,175,55,0.35);
  padding: .35rem .7rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.gpt5-css-h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; font-weight: 700; }
.gpt5-css-h1 .gpt5-css-accent { color: var(--gpt5-gold); }
.gpt5-css-h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; font-weight: 700; }
.gpt5-css-lead { color: var(--gpt5-muted); font-size: clamp(1rem, 1.4vw, 1.125rem); }

/* ===== Buttons ===== */
/*.gpt5-css-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }*/
.gpt5-css-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: baseline;
  margin-top: 1rem;
}
.gpt5-css-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.25rem; border-radius: 999px;
  font-weight: 700; text-decoration: none;
  box-shadow: var(--gpt5-shadow);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.gpt5-css-btn--gold { background: var(--gpt5-gold); color: #1b1b1b; }
.gpt5-css-btn--gold:hover { transform: translateY(-1px); }
.gpt5-css-btn--outline { background: transparent; color: var(--gpt5-white); border: 1px solid var(--gpt5-border); }
.gpt5-css-btn--outline:hover { background: rgba(255,255,255,0.06); }

/* ===== Cards ===== */
.gpt5-css-card {
  background: var(--gpt5-glass);
  border: 1px solid var(--gpt5-border);
  border-radius: 22px;
  padding: 1.1rem 1.1rem;
  box-shadow: var(--gpt5-shadow);
}
.gpt5-css-card h3 { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }

/* ===== Stats ===== */
.gpt5-css-stats { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 560px) { .gpt5-css-stats { grid-template-columns: repeat(3, 1fr); } }
.gpt5-css-stat { display: flex; flex-direction: column; gap: .25rem; }
.gpt5-css-stat .gpt5-css-value { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--gpt5-gold); }
.gpt5-css-stat .gpt5-css-label { font-size: .9rem; color: var(--gpt5-muted); }

/* ===== Media blocks ===== */
.gpt5-css-media {
  position: relative; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--gpt5-border);
  box-shadow: var(--gpt5-shadow);
}
.gpt5-css-media img { display: block; width: 100%; height: auto; object-fit: cover; }

/* ===== Feature list ===== */
/* 
.gpt5-css-list { list-style: none; margin: 0; padding: 0; }
.gpt5-css-list li { display: flex; align-items: flex-start; gap: .6rem; color: var(--gpt5-muted); }
.gpt5-css-list .gpt5-css-list-strong { color: var(--gpt5-white); font-weight: 700; }
*/

/* ===== Feature list ===== */
.gpt5-css-list { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

.gpt5-css-list li { 
    display: flex; 
    justify-content: space-between; /* Changed from align-items: flex-start */
    align-items: center; /* Added to center vertically */
    gap: .6rem; 
    color: var(--gpt5-muted);
    padding: 8px 0; /* Added some padding for better spacing */
}

.gpt5-css-list strong { /* Changed from .gpt5-css-list-strong */
    color: var(--gpt5-white); 
    font-weight: 700; 
    flex: 1; /* Allow the service name to take up available space */
}

.gpt5-css-list em { /* Style the price */
    color: var(--gpt5-accent, gold); /* Use accent color or fallback */
    font-style: normal;
    font-weight: 600;
    margin-left: auto; /* Push price to the right */
}

/* ===== Process Timeline Styles ===== */
#process .gpt5-process-list,
.gpt5-css-section .gpt5-process-list,
section.gpt5-css-section ul.gpt5-process-list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  counter-reset: step-counter;
}

/* Create the connecting line */
#process .gpt5-process-list::before,
.gpt5-css-section .gpt5-process-list::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(to bottom, gold, #DAA520);
  z-index: 1;
}

/* Override Divi list items completely */
#process .gpt5-process-list li,
.gpt5-css-section .gpt5-process-list li,
section.gpt5-css-section ul.gpt5-process-list li {
  list-style: none !important;
  list-style-type: none !important;
  position: relative;
  margin-bottom: 2rem;
  padding-left: 60px;
  color: var(--gpt5-muted);
  background: none !important;
}

/* Remove any default bullets or markers */
#process .gpt5-process-list li::marker,
.gpt5-css-section .gpt5-process-list li::marker {
  content: none !important;
  display: none !important;
}

/* Create the numbered circles - override everything */
#process .gpt5-process-list li::before,
.gpt5-css-section .gpt5-process-list li::before,
section.gpt5-css-section ul.gpt5-process-list li::before {
  content: counter(step-counter) !important;
  counter-increment: step-counter;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg, gold, #DAA520) !important;
  color: #000 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  z-index: 2 !important;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Create the connecting line */
.gpt5-process-list::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(to bottom, gold, #DAA520);
  z-index: 1;
}

.gpt5-process-list li {
  position: relative;
  margin-bottom: 2rem;
  padding-left: 60px;
  color: var(--gpt5-muted);
}

/* Create the numbered circles */
.gpt5-process-list li::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, gold, #DAA520);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

/* Initialize the counter */
.gpt5-process-list {
  counter-reset: step-counter;
}

.gpt5-process-list strong {
  color: var(--gpt5-white);
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1em;
}

.gpt5-process-list em {
  color: gold;
  font-style: italic;
  font-weight: 500;
}

/* Add some hover effects */
.gpt5-process-list li:hover::before {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.gpt5-process-list li:hover strong {
  color: gold;
  transition: color 0.2s ease;
}

/* Last item - remove the line extension */
.gpt5-process-list li:last-child::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: -2rem;
  width: 2px;
  background: var(--gpt5-bg, #1a1a1a);
  z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .gpt5-process-list li {
    padding-left: 50px;
  }
  
  .gpt5-process-list li::before {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  
  .gpt5-process-list::before {
    left: 17.5px;
  }
  
  .gpt5-process-list li:last-child::after {
    left: 17.5px;
  }
}

/* ===== Accent badge (floating) ===== */
.gpt5-css-floating {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  background: rgba(255,255,255,0.08); border: 1px solid var(--gpt5-border);
  border-radius: 999px; padding: .4rem .7rem;
  color: var(--gpt5-gold); font-weight: 700; font-size: .75rem;
}

/* ===== Subtle gold glows ===== */
.gpt5-css-glow { position: relative; }
.gpt5-css-glow::after {
  content: ""; position: absolute; inset: -60px -60px auto auto; width: 240px; height: 240px;
  background: radial-gradient(120px 120px at 70% 30%, rgba(212,175,55,0.2), transparent 60%);
  filter: blur(10px); pointer-events: none;
}

/* ===== Reveal animation (JS assisted) ===== */
.gpt5-css-reveal [data-animate] { opacity: 0; transform: translateY(16px); }
.gpt5-css-reveal [data-animate].is-visible { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }
/* Safety if JS didn't run */
#gpt5-medspa-landing:not(.gpt5-css-animated) [data-animate] { opacity: 1 !important; transform: none !important; }

/* Helpers */
.gpt5-css-icon { color: var(--gpt5-gold); }
.gpt5-css-divider { height: 1px; background: var(--gpt5-border); margin: 1rem 0; opacity: .8; }
/* Booking iframe sizing */
#inline-3bhjufYGt6SdcZw7szBJ { min-height: 700px; }
#book { scroll-margin-top: 90px; }
.gpt5-css-card .gpt5-css-btn {
  margin-top: 1.5rem;
}
/* All your existing CSS rules */

.gpt5-css-card .gpt5-css-btn--gold {
  margin-top: 1.5rem;
}

#book .gpt5-css-card {
  padding: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

#book .gpt5-css-card iframe {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-top: 2rem;
}


/* END OF GPT / CLAUDE */