/* ==========================================================================
   Derma Prime — combined design system (colors, typography, spacing, base)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Great+Vibes:wght@400&display=swap');

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

.dp-root {
  --color-bg-primary:        #181D25;
  --color-bg-secondary:      #101319;
  --color-bg-tertiary:       #202731;

  --color-accent:            #C3A769;
  --color-accent-light:      #D4B573;
  --color-accent-dark:       #A88E55;

  --color-text-heading:      #FFFFFF;
  --color-text-primary:      rgba(255, 255, 255, 0.75);
  --color-text-secondary:    rgba(255, 255, 255, 0.56);
  --color-text-tertiary:     rgba(255, 255, 255, 0.40);

  --color-border-subtle:     rgba(255, 255, 255, 0.10);
  --color-border-visible:    rgba(255, 255, 255, 0.20);

  --font-heading:            'Cormorant Garamond', Georgia, serif;
  --font-script:             'Great Vibes', cursive;
  --font-ui:                 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:                'Manrope', system-ui, -apple-system, sans-serif;

  --text-xs:  0.6875rem;
  --text-sm:  0.75rem;
  --text-base: 1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.5rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 3.75rem;

  --tracking-ui:     0.075rem;
  --tracking-wide:   0.1125rem;
  --tracking-wider:  0.1875rem;

  --leading-tight:   1;
  --leading-snug:    1.1;
  --leading-normal:  1.5;
  --leading-relaxed: 1.55;
  --leading-loose:   1.6;

  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 5rem; --space-5xl: 6rem;

  --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-pill: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);

  --container-max-width: 72rem;
  --nav-height: 64px;

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 400ms ease;

  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.dp-root img, .dp-root video { max-width:100%; height:auto; display:block; }
.dp-root a { color:inherit; text-decoration:none; }
.dp-root ul, .dp-root ol { list-style:none; margin:0; padding:0; }

.dp-root h1, .dp-root h2, .dp-root h3, .dp-root h4, .dp-root h5, .dp-root h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-text-heading);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  margin: 0;
}
.dp-root h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-wider); }
.dp-root h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); }
.dp-root h3 { font-size: var(--text-xl); letter-spacing: var(--tracking-ui); line-height: 1.33; }
.dp-root h4, .dp-root h5, .dp-root h6 { font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: var(--tracking-ui); text-transform: uppercase; color: rgba(255,255,255,0.70); }
.dp-root p { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin:0; }

@media (max-width:1024px){ .dp-root h1{ font-size: var(--text-3xl); } }
@media (max-width:640px){ .dp-root h1{ font-size:1.875rem; } .dp-root h2{ font-size:1.75rem; } .dp-root h3{ font-size:1.25rem; } }

/* Interaction / motion helpers (from the design's inline <style>) */
.dp-root { scroll-behavior: smooth; }
.dp-root ::selection { background: rgba(195,167,105,0.3); color:#fff; }
.dp-nav-link { position:relative; }
.dp-nav-link::after { content:''; position:absolute; left:0; bottom:-4px; height:1px; width:0; background:var(--color-accent); transition:width .3s ease; }
.dp-nav-link:hover::after, .dp-nav-link[data-active="true"]::after { width:100%; }
.dp-nav-dropdown { position:relative; }
.dp-nav-dropdown-menu { position:absolute; top:100%; left:0; padding-top:14px; min-width:260px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s; }
.dp-nav-dropdown:hover .dp-nav-dropdown-menu, .dp-nav-dropdown:focus-within .dp-nav-dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dp-nav-dropdown-menu-inner { background:var(--color-bg-secondary); border:1px solid var(--color-border-subtle); border-radius:8px; padding:8px; box-shadow:0 18px 46px rgba(0,0,0,0.45); }
.dp-nav-dropdown-link { display:block; padding:11px 14px; font-family:var(--font-ui); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#fff; border-radius:6px; white-space:nowrap; }
.dp-nav-dropdown-link:hover { background:rgba(195,167,105,0.12); color:var(--color-accent); }
.dp-nav-caret { display:inline-block; font-size:9px; margin-left:5px; transition:transform .2s ease; }
.dp-nav-dropdown:hover .dp-nav-caret { transform:rotate(180deg); }
.dp-fade { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.dp-fade.dp-in { opacity:1; transform:none; }
@keyframes dpFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
@keyframes dpPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(195,167,105,0.5);} 50%{ box-shadow:0 0 0 10px rgba(195,167,105,0);} }
.dp-root input::placeholder, .dp-root textarea::placeholder { color: rgba(255,255,255,0.35); }
.dp-root select option { background:#101319; color:#fff; }
.dp-root ::-webkit-scrollbar { width:10px; }
.dp-root ::-webkit-scrollbar-track { background:#101319; }
.dp-root ::-webkit-scrollbar-thumb { background:#2a3140; border-radius:8px; }
.dp-hover-lift { transition: transform .4s ease, box-shadow .4s ease, border-color .3s ease; }
.dp-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 46px rgba(0,0,0,0.55); }

.dp-btn-gold { transition: background .25s ease; }
.dp-btn-gold:hover { background: var(--color-accent-light) !important; }
.dp-btn-outline { transition: border-color .25s ease, color .25s ease; }
.dp-btn-outline:hover { border-color: var(--color-accent) !important; color: var(--color-accent) !important; }
.dp-link-accent { transition: color .2s ease; }
.dp-link-accent:hover { color: var(--color-accent) !important; }
.dp-social:hover { border-color: var(--color-accent) !important; color: var(--color-accent) !important; }

.dp-faq-btn[aria-expanded="true"] + .dp-faq-body { max-height: 500px !important; padding-bottom: 20px !important; }
.dp-faq-body { max-height:0; overflow:hidden; transition: max-height .35s ease, padding .35s ease; }
.dp-cal-day { transition: background .2s ease, color .2s ease; }

.dp-desktop-nav { display:flex; }
.dp-burger { display:none; }
@media (max-width:1024px){ .dp-desktop-nav{ display:none !important; } .dp-burger{ display:flex !important; } .dp-hide-mobile{ display:none !important; } }
@media (min-width:1025px){ .dp-mobile-cta{ display:none !important; } }

.dp-nav-fixed { position:fixed; top:0; left:0; right:0; z-index:120; height:72px; background:rgba(16,19,25,0.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--color-border-subtle); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,4vw,44px); transition:background .4s ease; }
.dp-nav-fixed.dp-scrolled { background: rgba(16,19,25,0.94); }
body.dp-page { padding-top:0; }

/* WPForms reskin to match dark/gold theme */
.dp-root .wpforms-container { margin:0; }
.dp-root .wpforms-container .wpforms-form { display:flex; flex-direction:column; gap:22px; }
.dp-root .wpforms-field { margin:0 !important; padding:0 !important; }
.dp-root .wpforms-field-label { font-family:var(--font-ui); font-size:11px !important; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent) !important; margin-bottom:8px !important; font-weight:400 !important; }
.dp-root .wpforms-field input:not([type=radio]):not([type=checkbox]), .dp-root .wpforms-field select, .dp-root .wpforms-field textarea { background:transparent !important; border:none !important; border-bottom:1px solid var(--color-border-visible) !important; border-radius:0 !important; color:#fff !important; font-family:var(--font-body) !important; font-size:15px !important; padding:8px 0 !important; box-shadow:none !important; width:100% !important; }
.dp-root .wpforms-field select { background-color:var(--color-bg-secondary) !important; border-bottom:1px solid var(--color-border-visible) !important; padding:10px 8px !important; }
.dp-root .wpforms-field select option { background-color:var(--color-bg-secondary) !important; color:#fff !important; }
.dp-root .wpforms-field select option { background:#101319; color:#fff; }
.dp-root .wpforms-field textarea { resize:vertical; }
.dp-root .wpforms-field input::placeholder, .dp-root .wpforms-field textarea::placeholder { color:rgba(255,255,255,0.35) !important; }
.dp-root .wpforms-submit-container { margin-top:8px !important; }
.dp-root button.wpforms-submit, .dp-root input.wpforms-submit { height:56px !important; background:var(--color-accent) !important; color:#fff !important; border:none !important; border-radius:9999px !important; font-family:var(--font-ui) !important; font-size:12px !important; letter-spacing:.14em !important; text-transform:uppercase !important; cursor:pointer !important; width:100% !important; transition:background .3s ease !important; }
.dp-root button.wpforms-submit:hover, .dp-root input.wpforms-submit:hover { background:var(--color-accent-light) !important; }
.dp-root .wpforms-field-required-label,.dp-root .wpforms-required-label { color:var(--color-accent) !important; }
.dp-root .wpforms-error, .dp-root .wpforms-field-description { color:var(--color-text-tertiary) !important; font-size:12px !important; }
.dp-root .wpforms-confirmation-container-full { background:var(--color-bg-secondary) !important; border:1px solid var(--color-accent) !important; border-radius:12px !important; color:var(--color-text-primary) !important; padding:40px !important; }