/* ═══════════════════════════════════════════════════════════════
   SOLiD Pricing Table — Frontend CSS
   Version: 1.0.0
   ═══════════════════════════════════════════════════════════════ */

/* ─── Root & Variables ─── */
.sp-root {
  --sp-black: #0A0A0A;
  --sp-charcoal: #1A1A1A;
  --sp-stone: #8A8578;
  --sp-sand: #C4B8A5;
  --sp-cream: #F5F0EB;
  --sp-warm: #E8E0D5;
  --sp-white: #FAFAF8;
  --sp-accent: #B8965A;
  --sp-serif: 'Cormorant Garamond', Georgia, serif;
  --sp-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sp-ease: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: var(--sp-sans);
  color: var(--sp-black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sp-root *, .sp-root *::before, .sp-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Theme: Dark ─── */
.sp-root.sp-dark {
  --sp-white: #0A0A0A;
  --sp-black: #FAFAF8;
  --sp-cream: #1A1A1A;
  --sp-warm: #2D2D2D;
  --sp-stone: #aaa;
  --sp-sand: #777;
  color: #FAFAF8;
}
.sp-root.sp-dark .sp-pkg-card { background: #141414; border-color: #2a2a2a; }
.sp-root.sp-dark .sp-pkg-card:hover { border-color: var(--sp-accent); }
.sp-root.sp-dark .sp-pkg-card.sp-featured { background: #1e1e1e; }
.sp-root.sp-dark .sp-alacarte { background: #141414; border-color: #2a2a2a; }
.sp-root.sp-dark .sp-alacarte-item { background: #1a1a1a; border-color: #2a2a2a; }
.sp-root.sp-dark .sp-compare-table th { background: #141414; border-color: #2a2a2a; }
.sp-root.sp-dark .sp-compare-table td { border-color: #222; }
.sp-root.sp-dark .sp-compare-table tr:hover td { background: rgba(255,255,255,0.03); }

/* ─── Layout ─── */
.sp-container { max-width: 1240px; margin: 0 auto; padding: 80px 24px; }
@media (min-width: 768px) { .sp-container { padding: 120px 40px; } }

/* ─── Scroll Reveal ─── */
.sp-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--sp-ease), transform 0.8s var(--sp-ease); }
.sp-reveal.sp-visible { opacity: 1; transform: translateY(0); }
.sp-stagger > .sp-reveal:nth-child(1) { transition-delay: 0.05s; }
.sp-stagger > .sp-reveal:nth-child(2) { transition-delay: 0.15s; }
.sp-stagger > .sp-reveal:nth-child(3) { transition-delay: 0.25s; }
.sp-stagger > .sp-reveal:nth-child(4) { transition-delay: 0.35s; }
.sp-stagger > .sp-reveal:nth-child(5) { transition-delay: 0.45s; }

/* ─── Header ─── */
.sp-header { text-align: center; margin-bottom: 32px; }
.sp-label { color: var(--sp-accent); font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase; font-family: var(--sp-sans); margin-bottom: 16px; }
.sp-title { font-family: var(--sp-serif); font-weight: 300; font-size: clamp(1.8rem, 5vw, 3.5rem); line-height: 1.1; color: var(--sp-black); }
.sp-title em { font-style: italic; }
.sp-intro { text-align: center; max-width: 600px; margin: 0 auto 32px; font-size: 14px; color: var(--sp-stone); line-height: 1.7; }

/* ─── Sqft Selector ─── */
.sp-sqft-bar { display: flex; justify-content: center; margin-bottom: 56px; flex-wrap: wrap; gap: 0; border: 1px solid var(--sp-warm); width: fit-content; margin-left: auto; margin-right: auto; overflow: hidden; }
.sp-sqft-btn { padding: 13px 22px; font-size: 12px; font-family: var(--sp-sans); letter-spacing: 0.05em; color: var(--sp-stone); background: transparent; border: none; border-right: 1px solid var(--sp-warm); cursor: pointer; transition: all 0.35s; white-space: nowrap; }
@media (min-width: 768px) { .sp-sqft-btn { padding: 14px 28px; font-size: 13px; } }
.sp-sqft-btn:last-child { border-right: none; }
.sp-sqft-btn.sp-active { background: var(--sp-black); color: #fff; }
.sp-root.sp-dark .sp-sqft-btn.sp-active { background: var(--sp-accent); color: #0A0A0A; }
.sp-sqft-btn:hover:not(.sp-active) { background: var(--sp-cream); color: var(--sp-black); }

/* ─── Package Grid ─── */
.sp-packages-top { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
@media (min-width: 768px) { .sp-packages-top { grid-template-columns: repeat(3, 1fr); } }
.sp-packages-bottom { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px; }
@media (min-width: 768px) { .sp-packages-bottom { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-left: auto; margin-right: auto; margin-bottom: 56px; } }

/* ─── Package Card ─── */
.sp-pkg-card { background: #fff; border: 1px solid var(--sp-warm); position: relative; overflow: hidden; transition: border-color 0.5s, transform 0.4s, box-shadow 0.5s; }
.sp-pkg-card:hover { border-color: var(--sp-accent); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.06); }
.sp-pkg-card.sp-featured { background: var(--sp-black); border-color: transparent; color: #fff; }
.sp-root.sp-light .sp-pkg-card.sp-featured { background: #0A0A0A; }
.sp-pkg-card.sp-featured:hover { border-color: var(--sp-accent); }

.sp-pkg-badge { position: absolute; top: 0; right: 0; background: var(--sp-accent); color: #0A0A0A; font-size: 8px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; padding: 5px 14px; }
.sp-pkg-head { padding: 28px 28px 18px; border-bottom: 1px solid var(--sp-warm); }
.sp-pkg-card.sp-featured .sp-pkg-head { border-bottom-color: rgba(255,255,255,0.08); }
.sp-pkg-icon { font-size: 22px; margin-bottom: 10px; }
.sp-pkg-name { font-family: var(--sp-serif); font-size: 22px; }
@media (min-width: 768px) { .sp-pkg-name { font-size: 24px; } }
.sp-pkg-desc { font-size: 12px; color: var(--sp-stone); margin-top: 4px; line-height: 1.5; }
.sp-pkg-card.sp-featured .sp-pkg-desc { color: rgba(255,255,255,0.45); }

/* Price display */
.sp-pkg-price { padding: 22px 28px; display: flex; align-items: baseline; gap: 6px; }
.sp-pkg-price-val { font-family: var(--sp-serif); font-size: 42px; font-weight: 300; transition: opacity 0.25s, transform 0.35s var(--sp-ease); }
.sp-pkg-card.sp-featured .sp-pkg-price-val { color: var(--sp-accent); }
.sp-pkg-price-sqft { font-size: 12px; color: var(--sp-sand); }
.sp-pkg-card.sp-featured .sp-pkg-price-sqft { color: rgba(255,255,255,0.35); }

/* Includes */
.sp-pkg-includes { padding: 0 28px 24px; }
.sp-pkg-inc-label { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--sp-sand); margin-bottom: 12px; }
.sp-pkg-card.sp-featured .sp-pkg-inc-label { color: rgba(255,255,255,0.3); }
.sp-pkg-inc-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sp-pkg-inc-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--sp-stone); line-height: 1.5; }
.sp-pkg-card.sp-featured .sp-pkg-inc-list li { color: rgba(255,255,255,0.65); }
.sp-pkg-chk { color: var(--sp-accent); font-size: 12px; margin-top: 2px; flex-shrink: 0; }

/* CTA Button */
.sp-pkg-footer { padding: 0 28px 28px; }
.sp-pkg-btn { display: block; width: 100%; padding: 14px; font-family: var(--sp-sans); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; text-align: center; text-decoration: none; border: 1px solid var(--sp-black); color: var(--sp-black); background: transparent; cursor: pointer; transition: all 0.5s; }
.sp-pkg-btn:hover { background: var(--sp-black); color: #fff; }
.sp-pkg-card.sp-featured .sp-pkg-btn { background: var(--sp-accent); color: #0A0A0A; border-color: var(--sp-accent); }
.sp-pkg-card.sp-featured .sp-pkg-btn:hover { background: #d4ad6a; }

/* ─── A La Carte ─── */
.sp-alacarte { background: var(--sp-cream); border: 1px solid var(--sp-warm); padding: 36px 32px; margin-bottom: 56px; }
@media (min-width: 768px) { .sp-alacarte { padding: 44px 52px; } }
.sp-alacarte-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
@media (min-width: 768px) { .sp-alacarte-head { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.sp-alacarte-head h3 { font-family: var(--sp-serif); font-size: 26px; font-weight: 400; color: var(--sp-black); }
.sp-alacarte-head p { font-size: 13px; color: var(--sp-stone); }
.sp-alacarte-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .sp-alacarte-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sp-alacarte-grid { grid-template-columns: repeat(3, 1fr); } }
.sp-alacarte-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; background: #fff; border: 1px solid var(--sp-warm); transition: all 0.4s; }
.sp-alacarte-item:hover { border-color: var(--sp-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
.sp-alacarte-name { font-size: 13px; color: var(--sp-black); }
.sp-alacarte-note { display: block; font-size: 10px; color: var(--sp-sand); margin-top: 2px; }
.sp-alacarte-price { font-family: var(--sp-serif); font-size: 20px; color: var(--sp-accent); white-space: nowrap; margin-left: 16px; }

/* ─── Compare ─── */
.sp-compare-toggle { text-align: center; margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--sp-warm); }
.sp-compare-toggle p { font-size: 13px; color: var(--sp-stone); margin-bottom: 14px; }
.sp-compare-link { font-family: var(--sp-sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sp-accent); background: none; border: none; border-bottom: 1px solid var(--sp-accent); padding-bottom: 2px; cursor: pointer; transition: all 0.3s; }
.sp-compare-link:hover { color: var(--sp-black); border-color: var(--sp-black); }

.sp-compare-wrap { display: none; margin-top: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-compare-wrap.sp-show { display: block; animation: spFadeUp 0.6s var(--sp-ease); }
@keyframes spFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.sp-compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.sp-compare-table th { font-family: var(--sp-sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sp-stone); text-align: center; padding: 14px 10px; border-bottom: 2px solid var(--sp-warm); background: var(--sp-cream); }
.sp-compare-table th:first-child { text-align: left; }
.sp-compare-table th.sp-pop { color: var(--sp-accent); }
.sp-compare-table td { font-size: 13px; color: var(--sp-stone); text-align: center; padding: 11px 10px; border-bottom: 1px solid var(--sp-warm); }
.sp-compare-table td:first-child { text-align: left; color: var(--sp-black); }
.sp-compare-table tr:hover td { background: rgba(0,0,0,0.02); }

.sp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.sp-dot-yes { background: var(--sp-accent); }
.sp-dot-no { background: var(--sp-warm); }

.sp-compare-price { display: block; font-family: var(--sp-serif); font-size: 18px; font-weight: 300; margin-top: 4px; color: var(--sp-black); transition: opacity 0.2s; }

/* ─── Note ─── */
.sp-note { text-align: center; color: var(--sp-stone); font-size: 14px; line-height: 1.7; max-width: 560px; margin: 40px auto 0; }
.sp-note a { color: var(--sp-accent); text-decoration: none; border-bottom: 1px solid var(--sp-accent); transition: all 0.3s; }
.sp-note a:hover { color: var(--sp-black); border-color: var(--sp-black); }

/* ─── Google Fonts (loaded inline if not already on page) ─── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ═══════════════════════════════════════════════════════════════
   DIVI COMPATIBILITY OVERRIDES
   Prevent Divi's global styles from leaking into the pricing table.
   ═══════════════════════════════════════════════════════════════ */
.et_pb_code_inner .sp-root,
.et_pb_text_inner .sp-root {
  all: unset;
  display: block;
  font-family: var(--sp-sans);
  color: var(--sp-black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Reset Divi's aggressive list styling */
.sp-root ul,
.sp-root ol { list-style: none; padding: 0; margin: 0; }
.sp-root li { padding: 0; margin: 0; }
.sp-root li::before { content: none !important; }

/* Reset Divi's button styling */
.sp-root button,
.sp-root a.sp-pkg-btn {
  letter-spacing: 0.25em;
  text-transform: uppercase;
  border-radius: 0;
}
.sp-root .sp-pkg-btn::after { content: none !important; }

/* Prevent Divi h2/h3 overrides */
.sp-root h2,
.sp-root h3 {
  padding-bottom: 0 !important;
  line-height: 1.1 !important;
}

/* Divi adds extra padding to sections — normalize */
.et_pb_section .sp-container { padding-left: 24px; padding-right: 24px; }
@media (min-width: 768px) { .et_pb_section .sp-container { padding-left: 40px; padding-right: 40px; } }

/* Prevent Divi table styling leak */
.sp-root table { border: none; }
.sp-root table th,
.sp-root table td { border-left: none; border-right: none; }