/* ============================================================
   DentaVista — Homepage Design System
   Shared tokens, components, animations & Elementor full-width
   overrides. Loaded globally; widgets only add section CSS.
   ============================================================ */

:root {
    /* Brand */
    --dv-navy: #1f2a33;
    --dv-navy-700: #33424d;
    --dv-navy-900: #15202a;
    --dv-teal: #5bb6df;
    --dv-teal-600: #3fa0ce;
    --dv-teal-050: #e8f2f9;
    /* Coral accent removed — repointed to teal so any legacy ref stays on-palette */
    --dv-accent: #3fa0ce;
    --dv-accent-600: #3fa0ce;

    /* Neutrals */
    --dv-ink: #1f2933;
    --dv-muted: #5b7185;
    --dv-line: #e6eef2;
    --dv-cream: #f4f8fb;
    --dv-mint: #edf4f8;
    --dv-white: #ffffff;

    /* System */
    --dv-radius: 24px;
    --dv-radius-sm: 14px;
    --dv-radius-pill: 999px;
    --dv-shadow-sm: 0 10px 30px -16px rgba(31, 42, 51, .35);
    --dv-shadow: 0 32px 70px -30px rgba(31, 42, 51, .40);
    --dv-shadow-lg: 0 50px 100px -40px rgba(31, 42, 51, .50);
    --dv-maxw: 1240px;
    --dv-ease: cubic-bezier(.4, 0, .2, 1);
    --dv-spring: cubic-bezier(.34, 1.56, .64, 1);

    --dv-font-head: 'Poppins', 'Inter', system-ui, sans-serif;
    --dv-font-body: 'Inter', system-ui, sans-serif;
}

/* ---------- Section shell (every widget root) ---------- */
.dv-section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: clamp(64px, 8vw, 124px) 0;
    position: relative;
    overflow: clip;
    font-family: var(--dv-font-body);
    color: var(--dv-ink);
    line-height: 1.6;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.dv-section * { box-sizing: border-box; }

.dv-section--tight { padding: clamp(40px, 5vw, 72px) 0; }
.dv-section--flush { padding: 0; }

.dv-container {
    width: 100%;
    max-width: var(--dv-maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 44px);
}
.dv-container--wide { max-width: 1480px; }

/* ---------- Typography ---------- */
.dv-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--dv-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dv-teal-600);
    margin: 0 0 18px;
}
/* Animated tooth + sparkle icon — identical across hero and all widgets */
.dv-eyebrow::before {
    content: "";
    width: 22px;
    height: 22px;
    flex: none;
    background-color: var(--dv-teal-600);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%205.5c-1.5-1.6-3.6-2.4-5.3-1.4C4.6%205.4%204%208%204.7%2010.7c.4%201.6.6%202%20.8%204%20.3%202.6.6%205.3%202%205.3%201.2%200%201.2-2%201.7-3.7.3-1%20.7-1.8%201.8-1.8s1.5.8%201.8%201.8c.5%201.7.5%203.7%201.7%203.7%201.4%200%201.7-2.7%202-5.3.2-2%20.4-2.4.8-4C20%208%2019.4%205.4%2017.3%204.1c-1.7-1-3.8-.2-5.3%201.4z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%205.5c-1.5-1.6-3.6-2.4-5.3-1.4C4.6%205.4%204%208%204.7%2010.7c.4%201.6.6%202%20.8%204%20.3%202.6.6%205.3%202%205.3%201.2%200%201.2-2%201.7-3.7.3-1%20.7-1.8%201.8-1.8s1.5.8%201.8%201.8c.5%201.7.5%203.7%201.7%203.7%201.4%200%201.7-2.7%202-5.3.2-2%20.4-2.4.8-4C20%208%2019.4%205.4%2017.3%204.1c-1.7-1-3.8-.2-5.3%201.4z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    transform-origin: 50% 62%;
    animation: dvEyebrowTooth 2.8s ease-in-out infinite;
}
.dv-eyebrow::after {
    content: "";
    position: absolute; left: 16px; top: -3px;
    width: 11px; height: 11px;
    background-color: var(--dv-teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202l1.3%203.9L17%207l-3.7%201.3L12%2012l-1.3-3.7L7%207l3.7-1.1z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202l1.3%203.9L17%207l-3.7%201.3L12%2012l-1.3-3.7L7%207l3.7-1.1z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    animation: dvEyebrowSpark 2.8s ease-in-out infinite;
}
@keyframes dvEyebrowTooth { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-6deg); } }
@keyframes dvEyebrowSpark { 0%, 100% { opacity: .25; transform: scale(.5); } 45% { opacity: 1; transform: scale(1); } }
.dv-eyebrow--center { justify-content: center; }

.dv-title {
    font-family: var(--dv-font-head);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--dv-navy);
    margin: 0 0 18px;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
}
.dv-title--xl { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.dv-title .dv-grad {
    color: var(--dv-teal-600);
}
.dv-lead {
    font-size: clamp(1.02rem, 1.4vw, 1.2rem);
    color: var(--dv-muted);
    margin: 0;
    max-width: 60ch;
}
.dv-center { text-align: center; }
.dv-center .dv-lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.dv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    font-family: var(--dv-font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--dv-radius-pill);
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform .4s var(--dv-spring), box-shadow .4s var(--dv-ease), background .3s var(--dv-ease), color .3s var(--dv-ease);
    white-space: nowrap;
}
.dv-btn svg { width: 18px; height: 18px; transition: transform .3s var(--dv-ease); }
.dv-btn:hover { transform: translateY(-3px); }
.dv-btn:hover svg { transform: translateX(4px); }

.dv-btn--primary {
    background: var(--dv-teal-600);
    color: #fff;
    box-shadow: 0 16px 34px -12px rgba(63, 160, 206, .5);
}
.dv-btn--primary:hover { background: var(--dv-teal); box-shadow: 0 22px 44px -12px rgba(63, 160, 206, .6); }

.dv-btn--teal {
    background: var(--dv-teal-600);
    color: #fff;
    box-shadow: 0 16px 34px -12px rgba(63, 160, 206, .5);
}
.dv-btn--teal:hover { background: var(--dv-teal); box-shadow: 0 22px 44px -12px rgba(63, 160, 206, .6); }

.dv-btn--dark { background: var(--dv-navy); color: #fff; }
.dv-btn--dark:hover { background: var(--dv-navy-700); }

.dv-btn--ghost {
    background: transparent;
    color: var(--dv-navy);
    border-color: rgba(31, 42, 51, .16);
}
.dv-btn--ghost:hover { border-color: var(--dv-teal); color: var(--dv-teal-600); }

.dv-btn--light { background: #fff; color: var(--dv-navy); box-shadow: var(--dv-shadow-sm); }

/* ---------- Pills / chips ---------- */
.dv-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--dv-radius-pill);
    background: var(--dv-teal-050);
    color: var(--dv-teal-600);
    font-size: 13.5px;
    font-weight: 600;
}

/* ---------- Cards ---------- */
.dv-card {
    background: #fff;
    border: 1px solid var(--dv-line);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow-sm);
}

/* ---------- Scroll-reveal ---------- */
[data-dv-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s var(--dv-ease), transform .8s var(--dv-ease);
    will-change: opacity, transform;
}
[data-dv-reveal].is-in { opacity: 1; transform: none; }
[data-dv-reveal][data-dv-delay="1"] { transition-delay: .08s; }
[data-dv-reveal][data-dv-delay="2"] { transition-delay: .16s; }
[data-dv-reveal][data-dv-delay="3"] { transition-delay: .24s; }
[data-dv-reveal][data-dv-delay="4"] { transition-delay: .32s; }
[data-dv-reveal][data-dv-delay="5"] { transition-delay: .40s; }
[data-dv-reveal][data-dv-delay="6"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
    [data-dv-reveal] { opacity: 1 !important; transform: none !important; }
    .dv-section * { animation: none !important; }
}

/* ---------- Decorative blobs ---------- */
.dv-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   Elementor full-width / edge-to-edge enforcement
   Containers holding DentaVista widgets stretch 100% with no
   spacing; internal spacing lives inside the widget.
   ============================================================ */
.elementor-widget-container:has(> .dv-section),
.elementor-widget:has(.dv-section) { width: 100%; }

/* Containers that wrap a dv widget: kill default spacing */
.e-con:has(.dv-section),
.e-con > .e-con-inner:has(.dv-section) {
    max-width: 100% !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    --gap: 0px;
    --content-width: 100%;
}

/* legacy section/column fallback */
.elementor-section:has(.dv-section),
.elementor-section:has(.dv-section) > .elementor-container {
    max-width: 100% !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
.elementor-section:has(.dv-section) .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0 !important; }

/* Theme page wrapper should not box dv content on the homepage */
body.dv-home .page-wrapper,
body.dv-home .page-content-wrapper {
    max-width: 100% !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Widget wrapper rule from brief */
.dv-widget-wrap { width: 100%; max-width: 100%; margin: 0; padding: 0; }

/* ============================================================
   Global Sticky Footer CTA — only visible past the hero
   ============================================================ */
.dv-stickycta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    display: flex; justify-content: flex-end; padding: 0 14px 14px;
    transform: translateY(170%); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}
.dv-stickycta.is-shown { transform: translateY(0); }
.dv-stickycta__bar {
    pointer-events: auto; display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--dv-line); border-radius: 999px;
    box-shadow: 0 18px 50px -18px rgba(31, 42, 51, .45);
    padding: 9px 10px 9px 18px; max-width: min(900px, 100%); width: auto;
    transition: opacity .3s ease, transform .3s ease;
}
.dv-stickycta.is-collapsed .dv-stickycta__bar { opacity: 0; transform: translateY(130%); pointer-events: none; }
.dv-stickycta__logo img { height: 30px; width: auto; display: block; }
.dv-stickycta__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--dv-navy); text-decoration: none; }
.dv-stickycta__phone svg { width: 18px; height: 18px; color: var(--dv-teal-600); }
.dv-stickycta__phone:hover { color: var(--dv-teal-600); }
.dv-stickycta__spacer { flex: 1; }
.dv-stickycta__btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
    font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
    transition: transform .25s var(--dv-spring), background .25s ease;
}
.dv-stickycta__btn svg { width: 17px; height: 17px; }
.dv-stickycta__btn--primary { background: var(--dv-teal-600); color: #fff; }
.dv-stickycta__btn--primary:hover { background: var(--dv-teal); transform: translateY(-2px); }
.dv-stickycta__btn--wa { background: #25d366; color: #fff; }
.dv-stickycta__btn--wa:hover { background: #1ebe5d; transform: translateY(-2px); }
.dv-stickycta__collapse { width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: var(--dv-mint); color: var(--dv-navy); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.dv-stickycta__collapse svg { width: 18px; height: 18px; }
.dv-stickycta__collapse:hover { background: var(--dv-teal-050); }
.dv-stickycta__btn:focus-visible, .dv-stickycta__collapse:focus-visible, .dv-stickycta__fab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(63, 160, 206, .55); }
.dv-stickycta__fab {
    position: absolute; right: 16px; bottom: 14px; width: 56px; height: 56px; flex: none;
    border: 0; border-radius: 50%; background: var(--dv-teal-600); color: #fff; cursor: pointer;
    display: none; align-items: center; justify-content: center; pointer-events: auto;
    box-shadow: 0 14px 34px -10px rgba(63, 160, 206, .7);
}
.dv-stickycta__fab svg { width: 24px; height: 24px; }
.dv-stickycta.is-collapsed .dv-stickycta__fab { display: flex; animation: dvFabIn .35s var(--dv-spring); }
@keyframes dvFabIn { from { transform: scale(0); } to { transform: scale(1); } }
@media (max-width: 600px) {
    .dv-stickycta__logo, .dv-stickycta__phone span { display: none; }
    .dv-stickycta__bar { gap: 8px; padding: 8px; }
    .dv-stickycta__btn { padding: 11px 14px; }
    .dv-stickycta__btn--wa span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dv-stickycta { transition: none; } }

/* ============================================================
   404 — branded "page not found"
   ============================================================ */
.dv-404 { background: var(--dv-mint); padding-top: clamp(150px, 16vw, 210px); min-height: 72vh; display: flex; align-items: center; }
.dv-404 .dv-container { max-width: 720px; }
.dv-404__big {
    display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 22px);
    font-family: var(--dv-font-head); font-weight: 800; line-height: .9; color: var(--dv-navy);
    font-size: clamp(5rem, 17vw, 11rem); margin-bottom: 6px;
}
.dv-404__tooth { display: inline-flex; color: var(--dv-teal-600); width: clamp(66px, 13vw, 138px); }
.dv-404__tooth svg { width: 100%; height: auto; transform-origin: 50% 30%; animation: dv404Wobble 3s ease-in-out infinite; }
@keyframes dv404Wobble { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-4px); } }
.dv-404 .dv-title { margin-top: 4px; }
.dv-404__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.dv-404__links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; align-items: center; font-size: 14px; }
.dv-404__links span { color: var(--dv-muted); font-weight: 600; }
.dv-404__links a { color: var(--dv-navy); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; }
.dv-404__links a:hover { color: var(--dv-teal-600); border-color: var(--dv-teal-600); }
@media (max-width: 520px) { .dv-404__actions .dv-btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .dv-404__tooth svg { animation: none; } }