/* ==========================================================================
   UC Baby Appointment Form — stylesheet
   Design tokens matched to the original React reference (Tailwind's
   rose/slate/emerald palette, rounded-2xl cards, shadow-sm, etc).
   --ucb-primary / --ucb-accent are set inline per-instance from
   Settings → Design, with Tailwind rose-500 / rose-50 as the fallback
   so the form still looks right if those settings are ever cleared.
   ========================================================================== */

.ucb-form-wrap{
    --ucb-rose-50: #fff1f2; --ucb-rose-100: #ffe4e6; --ucb-rose-200: #fecdd3;
    --ucb-rose-300: #fda4af; --ucb-rose-400: #fb7185; --ucb-rose-600: #e11d48; --ucb-rose-700: #be123c;
    --ucb-slate-50: #f8fafc; --ucb-slate-100: #f1f5f9; --ucb-slate-200: #e2e8f0;
    --ucb-slate-300: #cbd5e1; --ucb-slate-400: #94a3b8; --ucb-slate-500: #64748b;
    --ucb-slate-700: #334155; --ucb-slate-800: #1e293b; --ucb-slate-900: #0f172a;
    --ucb-emerald-50: #ecfdf5; --ucb-emerald-100: #d1fae5; --ucb-emerald-200: #a7f3d0;
    --ucb-emerald-500: #10b981; --ucb-emerald-600: #059669; --ucb-emerald-700: #047857;

    max-width: var(--ucb-max-width, 1120px); margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ucb-slate-800); font-size: 14px;
    /* A baseline, not a style: without it the form inherits whatever alignment the page around it has — placed inside a
       centered block (e.g. a centered "section header" in a custom page) every label and the whole summary sidebar went
       centered. Parts that want another alignment already set it themselves (the confirmation card is centered). */
    text-align: left;
}
.ucb-form-wrap *{ box-sizing: border-box; }

/* Cards */
.ucb-card{
    background: #fff; border: 1px solid var(--ucb-slate-200); border-radius: 16px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); padding: 24px; margin-bottom: 24px;
}
.ucb-header-card{ padding: 24px; }
.ucb-panel{ min-height: 460px; padding: 24px; }

/* Header */
.ucb-header-top{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.ucb-brand-row{ display: flex; gap: 12px; align-items: center; }
.ucb-brand-icon{
    width: 48px; height: 48px; border-radius: 16px; background: var(--ucb-accent, var(--ucb-rose-50));
    border: 1px solid var(--ucb-rose-100); color: var(--ucb-primary);
    display: grid; place-items: center; font-size: 26px; flex-shrink: 0;
}
.ucb-title{ font-size: 22px; color: var(--ucb-slate-900); margin: 0; font-weight: 700; letter-spacing: -.02em; }
.ucb-subtitle{ color: var(--ucb-slate-500); font-size: 13px; margin: 2px 0 0; }
.ucb-header-side{ text-align: right; }
.ucb-header-side p{ color: var(--ucb-slate-400); font-size: 12px; margin: 4px 0 0; }
.ucb-pill-good{
    display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
    background: var(--ucb-emerald-50); color: var(--ucb-emerald-700);
    border: 1px solid var(--ucb-emerald-200); border-radius: 999px; padding: 5px 10px;
}

/* Step breadcrumb */
.ucb-steps-row{
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
    border-top: 1px solid var(--ucb-slate-100); margin-top: 24px; padding-top: 24px;
}
.ucb-step-btn{
    border: 0; background: transparent; border-radius: 12px; padding: 10px 8px;
    color: var(--ucb-slate-400); display: flex; justify-content: center; gap: 8px; align-items: center;
    font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.ucb-step-btn:hover{ color: var(--ucb-slate-700); }
.ucb-step-num{
    width: 24px; height: 24px; border-radius: 999px; background: var(--ucb-slate-200); color: var(--ucb-slate-700);
    display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ucb-step-active{ background: var(--ucb-accent, var(--ucb-rose-50)); color: var(--ucb-rose-700); box-shadow: inset 0 0 0 1px var(--ucb-rose-200); }
.ucb-step-active .ucb-step-num{ background: var(--ucb-primary); color: #fff; }
.ucb-step-done{ background: var(--ucb-slate-50); color: var(--ucb-slate-700); }
.ucb-step-done .ucb-step-num{ background: var(--ucb-emerald-500); color: #fff; }

/* Layout */
.ucb-layout{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 340px); gap: 24px; }
.ucb-main-col, .ucb-side-col{ min-width: 0; }
.ucb-side-col{ position: relative; }

/* Step content */
.ucb-eyebrow{ font-size: 12px; font-weight: 800; color: var(--ucb-primary); text-transform: uppercase; letter-spacing: .04em; }
.ucb-step-title{ font-size: 20px; color: var(--ucb-slate-900); margin: 4px 0 4px; font-weight: 700; }
.ucb-step-desc{ font-size: 13px; color: var(--ucb-slate-500); margin: 0 0 20px; }
.ucb-price-disclaimer{ font-size: 11px; color: var(--ucb-slate-400); font-style: italic; margin: -14px 0 16px; }
.ucb-form-wrap label{ display: block; font-size: 11px; font-weight: 700; color: var(--ucb-slate-700); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; }

/* Inputs */
.ucb-input{
    width: 100%; border: 1px solid var(--ucb-slate-200); background: var(--ucb-slate-50);
    border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 14px; color: var(--ucb-slate-800);
}
.ucb-input:focus{ outline: 0; border-color: var(--ucb-rose-400); box-shadow: 0 0 0 3px rgb(251 113 133 / .15); }
.ucb-input-narrow{ max-width: 320px; }
/* Rich-text copy from the settings editor: a description with several paragraphs or a list is
   rendered as a <div> of real paragraphs (a plain one-liner keeps its original <p>). */
.ucb-step-desc p, .ucb-hint p, .ucb-price-disclaimer p{ margin: 0 0 .6em; }
.ucb-step-desc ul, .ucb-step-desc ol, .ucb-hint ul, .ucb-hint ol, .ucb-price-disclaimer ul, .ucb-price-disclaimer ol{ margin: .4em 0 .6em 1.3em; padding: 0; }
.ucb-step-desc > :last-child, .ucb-hint > :last-child, .ucb-price-disclaimer > :last-child{ margin-bottom: 0; }
.ucb-step-desc a, .ucb-hint a, .ucb-price-disclaimer a{ color: var(--ucb-primary); text-decoration: underline; }
/* A "#specials" link inside a sentence also carries .ucb-specials-link (that's what opens the popup), which styles it as a
   standalone block link — undo that so it reads as part of the text. */
.ucb-step-desc a.ucb-specials-link, .ucb-hint a.ucb-specials-link, .ucb-price-disclaimer a.ucb-specials-link{ display: inline; margin: 0; font-size: inherit !important; font-weight: 600; }
/* Where a step lands when the page scrolls to it on a phone (see scrollToStepTop() in appointment.js): clear of a fixed site
   header. Defaults to the sticky-offset setting; override with --ucb-scroll-offset if the mobile header is a different height. */
.ucb-step-pane{ scroll-margin-top: var(--ucb-scroll-offset, var(--ucb-sticky-offset, 96px)); }
.ucb-notes-block{ margin-top: 16px; }
.ucb-specials-row{ margin: 0 0 12px; }
/* .ucb-specials-link sets display itself, which beats the browser's built-in [hidden] rule — without this the link
   only stays hidden if the active theme happens to ship its own [hidden] rule. */
.ucb-specials-link[hidden], .ucb-specials-row[hidden]{ display: none; }
.ucb-hint{ font-size: 12px; color: var(--ucb-slate-400); margin: 0 0 16px; }
.ucb-field-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ucb-span-2{ grid-column: 1 / -1; }

/* Checkbox rows */
.ucb-checkbox-row{
    display: flex !important; align-items: center; gap: 8px; text-transform: none !important;
    font-size: 13px !important; font-weight: 500 !important; color: var(--ucb-slate-700); margin: 8px 0 !important;
}
.ucb-checkbox-row input{ width: 16px; height: 16px; accent-color: var(--ucb-primary); flex-shrink: 0; }

/* Week-estimate note (Step 2) */
.ucb-week-note{
    font-size: 13px; color: var(--ucb-slate-700); background: var(--ucb-slate-50);
    border: 1px solid var(--ucb-slate-200); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px;
}

/* Carousel */
.ucb-carousel-wrap{ position: relative; padding: 0 8px; }
.ucb-carousel-arrow{
    /* Centered on the media zone (150px tall, sitting right after the
       carousel's 22px top padding) rather than the whole card — the card
       got taller once the image moved to a full-bleed zone with padded
       text below it, so a plain 50%-of-card centering would land the
       arrows across the price/features text instead of the photo. */
    position: absolute; top: 97px; transform: translateY(-50%); z-index: 5;
    width: 44px; height: 44px; border-radius: 999px; border: none;
    background: var(--ucb-primary); color: #fff; cursor: pointer;
    box-shadow: 0 6px 16px rgb(244 63 94 / .35);
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.ucb-carousel-arrow svg{ width: 20px; height: 20px; }
.ucb-carousel-arrow:hover{ transform: translateY(-50%) scale(1.08); background: var(--ucb-rose-600); box-shadow: 0 8px 20px rgb(190 18 60 / .4); }
.ucb-carousel-arrow-prev{ left: -6px; }
.ucb-carousel-arrow-next{ right: -6px; }
.ucb-carousel-dots{ display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; }
.ucb-carousel-dot{ width: 8px; height: 8px; border-radius: 999px; border: none; padding: 0; background: var(--ucb-slate-200); cursor: pointer; transition: width .2s, background .2s; }
.ucb-carousel-dot:hover{ background: var(--ucb-slate-300); }
.ucb-carousel-dot.ucb-dot-active{ width: 22px; background: var(--ucb-primary); }
.ucb-carousel-dot.ucb-dot-hidden{ display: none; }
.ucb-carousel{
    display: flex; gap: 16px; overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x proximity; /* "proximity" (not "mandatory") so a short/undecided
        swipe on mobile still moves freely instead of snapping straight back */
    padding: 22px 10px 18px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
    touch-action: pan-x pan-y;         /* both directions — pan-x alone was blocking the
        page from scrolling vertically at all while a touch started inside this element,
        since it explicitly disables every other gesture. Listing both lets the browser
        pick based on the actual swipe direction: horizontal moves the carousel, vertical
        scrolls the page normally, same as any other horizontally-scrollable element. */
}
.ucb-carousel::-webkit-scrollbar{ display: none; }

/* Package cards */
.ucb-pkg-card{
    position: relative; flex: 0 0 270px; scroll-snap-align: start;
    border: 1px solid var(--ucb-slate-200); border-radius: 16px; padding: 0; overflow: hidden;
    background: #fff; min-height: 320px; transition: border-color .15s, box-shadow .15s;
    display: flex; flex-direction: column;
}
.ucb-pkg-card:hover{ border-color: var(--ucb-slate-300); box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
.ucb-pkg-card.ucb-selected{ border-color: var(--ucb-primary); box-shadow: 0 0 0 2px var(--ucb-rose-300), 0 4px 10px rgb(0 0 0 / .05); }
.ucb-pkg-card.ucb-recommended{ border-color: #f6b73c; }
.ucb-pkg-card.ucb-selected.ucb-recommended{ box-shadow: 0 0 0 2px var(--ucb-primary), 0 4px 10px rgb(0 0 0 / .05); }
.ucb-pkg-card.ucb-filtered-out{ display: none !important; }

.ucb-recommended-ribbon{
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 3;
    background: #f59e0b; color: #fff; border-radius: 999px; padding: 4px 10px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    white-space: nowrap; box-shadow: 0 2px 4px rgb(0 0 0 / .15);
}
/* "Top pick" tag: the same pill in a calm blue, so it can't be mistaken for the "Recommended" one */
.ucb-recommended-ribbon.ucb-ribbon-toppick{ background: #0252a1 !important; }

/* Full-bleed media zone (image, or an emoji-in-a-tinted-box fallback when no
   image is set) with the category badge and weeks badge overlaid on it,
   matching the reference cards. */
.ucb-pkg-media{ position: relative; width: 100%; height: 150px; flex-shrink: 0; background: var(--ucb-slate-50); }
.ucb-pkg-image{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ucb-pkg-emoji{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 44px; background: var(--ucb-accent, var(--ucb-rose-50)); }
.ucb-pkg-top{ position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; display: flex; align-items: center; justify-content: space-between; }

.ucb-badge{ font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.ucb-badge:empty{ display: none; }
.badge-blue{ background: #dbeafe; color: #1e40af; }
.badge-green{ background: #d1fae5; color: #065f46; }
.badge-purple{ background: #ede9fe; color: #5b21b6; }
.badge-amber{ background: #fef3c7; color: #92400e; }
.badge-orange{ background: #ffedd5; color: #9a3412; }
.badge-teal{ background: #ccfbf1; color: #115e59; }
.badge-indigo{ background: #e0e7ff; color: #3730a3; }
.badge-rose-solid{ background: var(--ucb-primary); color: #fff; }
.badge-amber-solid{ background: #f59e0b; color: #fff; }
.ucb-pkg-check{ width: 22px; height: 22px; border-radius: 999px; background: rgb(255 255 255 / .85); backdrop-filter: blur(2px); color: var(--ucb-slate-300); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.ucb-pkg-card.ucb-selected .ucb-pkg-check{ background: var(--ucb-primary); color: #fff; }

/* Padded content below the media zone */
.ucb-pkg-body{ padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.ucb-pkg-card h4{ margin: 0; color: var(--ucb-slate-900); font-size: 15px; font-weight: 700; line-height: 1.3; }
.ucb-pkg-gestation{ font-size: 12px; color: var(--ucb-slate-500); font-weight: 600; margin: 3px 0 0; }
.ucb-pkg-price{ font-size: 22px; font-weight: 900; color: var(--ucb-slate-900); margin: 10px 0; border-bottom: 1px solid var(--ucb-slate-100); padding-bottom: 10px; }
.ucb-pkg-card ul{ list-style: none; padding: 0; margin: 0; min-height: 98px; font-size: 12px; color: var(--ucb-slate-700); }
.ucb-pkg-card li{ margin-bottom: 6px; display: flex; gap: 6px; align-items: flex-start; }
.ucb-check-icon{ width: 14px; height: 14px; color: var(--ucb-emerald-500); flex-shrink: 0; margin-top: 2px; }

/* Buttons */
.ucb-pkg-select-btn, .ucb-submit-btn, .ucb-continue-btn{
    border: 0; border-radius: 12px; background: var(--ucb-primary); color: #fff;
    font-weight: 700; padding: 11px 16px; font-size: 13px; cursor: pointer; transition: background .15s;
}
.ucb-pkg-select-btn:hover, .ucb-submit-btn:hover, .ucb-continue-btn:hover{ background: var(--ucb-rose-600); }
.ucb-pkg-select-btn{ width: 100%; margin-top: auto; padding-top: 11px; background: var(--ucb-slate-100); color: var(--ucb-slate-700); pointer-events: none; }
.ucb-pkg-card.ucb-selected .ucb-pkg-select-btn{ background: var(--ucb-primary); color: #fff; }

/* Nav row */
.ucb-nav-row{ border-top: 1px solid var(--ucb-slate-100); margin-top: 24px; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; }
.ucb-back-btn{ border: 1px solid var(--ucb-slate-200); background: #fff; border-radius: 12px; padding: 9px 16px; color: var(--ucb-slate-500); font-size: 13px; font-weight: 700; cursor: pointer; }
.ucb-back-btn:hover{ background: var(--ucb-slate-50); }
.ucb-back-btn:disabled{ opacity: .5; cursor: default; }
.ucb-continue-btn{ min-width: 110px; }
.ucb-submit-btn{ width: 100%; margin-top: 0; padding: 14px; box-shadow: 0 2px 6px rgb(244 63 94 / .3); }

/* Summary sidebar */
.ucb-summary-card{
    padding: 20px; position: sticky;
    /* If the summary still doesn't "float" after this — scrolls away
       instead of staying in view — the near-certain cause is something
       outside this stylesheet: a parent element in the theme with
       overflow: hidden/auto/scroll on it, which silently breaks
       position:sticky for everything inside it. That's a theme-level
       fix, not something this plugin's own CSS can work around.
       Adjust --ucb-sticky-offset below to match the real height of the
       theme's own sticky nav bar if the summary sits too high and
       scrolls under it. */
    top: var(--ucb-sticky-offset, 96px);
}
.ucb-summary-card h4{ font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ucb-slate-400); margin: 0 0 16px; border-bottom: 1px solid var(--ucb-slate-100); padding-bottom: 12px; }
.ucb-summary-block{ border-bottom: 1px solid var(--ucb-slate-100); padding: 12px 0; display: grid; gap: 3px; }
.ucb-summary-block:last-of-type{ border-bottom: none; }
.ucb-summary-block small{ font-size: 13px; color: var(--ucb-slate-400); font-weight: 600; line-height:1rem;}
.ucb-summary-block strong{ font-size: 14px; color: var(--ucb-slate-900); font-weight: 700; }
.ucb-summary-block span{ font-size: 11px; color: var(--ucb-slate-500); display: block; }
.ucb-summary-block span:empty{ display: none; }
.ucb-summary-price{ display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
/* Same overflow fix as .ucb-confirm-box below — a long package name
   needs to be allowed to shrink/wrap rather than force this row (and
   the page, on a narrow screen) wider than the viewport; the price
   stays fixed-width and unwrapped on the other side. */
.ucb-summary-price strong{ min-width: 0; overflow-wrap: break-word; }
.ucb-summary-price b{ font-size: 14px; font-weight: 900; color: var(--ucb-primary); flex-shrink: 0; white-space: nowrap; }
.ucb-mini-tag{ display: inline-block; background: var(--ucb-slate-100); border-radius: 6px; padding: 2px 8px; width: max-content; font-size: 10px; font-weight: 700; color: var(--ucb-slate-700); }
.ucb-specials-link{ display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--ucb-primary); text-decoration: underline; }
.ucb-specials-link:hover{ color: var(--ucb-rose-600); }

.ucb-benefits-box{ background: var(--ucb-slate-50); border: 1px solid var(--ucb-slate-200); border-radius: 12px; padding: 12px; margin-top: 12px; font-size: 11px; }
.ucb-benefits-box strong{ color: var(--ucb-slate-700); font-weight: 700; }
.ucb-benefits-box p{ margin: 6px 0; color: var(--ucb-slate-500); }
.ucb-benefit-row{ display: flex; gap: 6px; align-items: flex-start; }

/* Form messages */
.ucb-form-msg{ color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 14px; margin-top: 12px; font-size: 12px; }

/* Confirmation */
.ucb-confirm-card{ text-align: center; max-width: 640px; margin: 20px auto; padding: 36px 28px; }
.ucb-confirm-icon{ width: 64px; height: 64px; border-radius: 999px; background: var(--ucb-emerald-100); color: var(--ucb-emerald-600); display: grid; place-items: center; font-size: 30px; margin: 0 auto 16px; }
.ucb-confirm-card h3{ font-size: 22px; font-weight: 700; color: var(--ucb-slate-900); margin: 0; }
.ucb-confirm-card p{ font-size: 13px; color: var(--ucb-slate-500); max-width: 420px; margin: 8px auto 0; }
.ucb-confirm-availability-note{ font-size: 11px !important; color: var(--ucb-slate-400) !important; max-width: 460px !important; }
.ucb-confirm-box{ text-align: left; background: var(--ucb-slate-50); border: 1px solid var(--ucb-slate-200); padding: 18px; border-radius: 16px; margin: 24px 0; }
.ucb-confirm-box > div{ display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ucb-slate-200); font-size: 13px; }
.ucb-confirm-box > div:last-child{ border-bottom: none; }
.ucb-confirm-box > div span{ color: var(--ucb-slate-500); flex-shrink: 0; white-space: nowrap; }
/* The value (clinic name, package name+price, datetime, contact info) can
   be long and unpredictable -- flex items default to min-width:auto,
   which refuses to shrink below the text's natural unbroken width,
   forcing this row (and the whole page, on a narrow screen) wider than
   the viewport instead of wrapping. min-width:0 lets it shrink to fit;
   overflow-wrap lets long text actually wrap onto a second line once
   it does. */
.ucb-confirm-box > div strong{ min-width: 0; overflow-wrap: break-word; text-align: right; }
.ucb-reset-btn{ background: var(--ucb-slate-900); color: #fff; border: 0; border-radius: 12px; padding: 12px 24px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ucb-reset-btn:hover{ background: #1e293b; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px){
    .ucb-form-wrap{ max-width: 100%; }
    .ucb-layout{ grid-template-columns: minmax(0, 1fr); }
    .ucb-field-grid{ grid-template-columns: 1fr; }
    .ucb-summary-card{ position: static; }
    .ucb-span-2{ grid-column: auto; }
    .ucb-step-label{ display: none; }
    .ucb-title{ font-size: 19px; }
    .ucb-step-title{ font-size: 18px; }
    .ucb-step-btn{ padding: 9px 5px; }
    .ucb-header-top{ align-items: flex-start; }

    /* Trim card padding on small screens to reclaim width for the
       package carousel (and everything else). */
    .ucb-card{ padding: 16px; }
    .ucb-header-card{ padding: 16px; }
    .ucb-panel{ padding: 16px; }

    /* Show exactly one package per view on mobile: full card width, no
       neighboring card peeking in, no side padding/gap eating into it. */
    .ucb-carousel-wrap{ padding: 0; }
    .ucb-carousel{ gap: 0; padding: 22px 4px 14px; }
    .ucb-pkg-card{ flex: 0 0 100%; min-height: 300px; margin:0px 5px;}

    /* Bigger arrow glyph on mobile too — circle stays a similar size,
       the ‹ › character itself is what grows. */
    .ucb-carousel-arrow{ width: 40px; height: 40px; }
    .ucb-carousel-arrow svg{ width: 17px; height: 17px; }
    .ucb-carousel-arrow-prev{ left: -36px; }
    .ucb-carousel-arrow-next{ right: -36px; }
}

/* Manual overrides added directly on the live site — kept here so future
   plugin updates don't wipe them out. */
.ucb-specials-link{
	font-size:14px!important;
}
label.ucb-checkbox-row {
    display: none !important;
}
h3.ucb-step-title {
       padding-bottom: 0px !important;
    color: #000!important;
    font-weight: 600 !important;
}
.ucb-card.ucb-summary-card h4 {
    font-weight: 600 !important;
}
/* Modal Wrapper */
#ucb-specials-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ucb-specials-modal .ucb-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
}

#ucb-specials-modal .ucb-modal-content {
  position: relative;
  background: #ffffff;
  padding: 40px 25px 25px 25px;
  max-width: 1000px;
  width: 92%;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

#ucb-specials-modal .ucb-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  color: #666;
  cursor: pointer;
  z-index: 3;
}

#ucb-specials-modal .ucb-modal-close:hover {
  color: #e74c3c;
}

/* Pricing Table Container Fixes */
#ucb-specials-modal .pricing_table {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 10px 0 !important;
  table-layout: unset !important;
}

/* Individual Columns (Pink vs Blue preserved) */
#ucb-specials-modal .pricing_table .table_wrap {
  flex: 1 1 200px !important;
  max-width: 230px !important;
  min-width: 190px !important;
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
}

#ucb-specials-modal .pricing_table ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Title Header */
#ucb-specials-modal .pricing_table .caption .title {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

#ucb-specials-modal .pricing_table .caption small {
  display: block !important;
  font-size: 11px !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
}

/* Circular Price Badge */
#ucb-specials-modal .pricing_table .price div {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  margin: 12px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#ucb-specials-modal .pricing_table .price span strong {
  font-size: 18px !important;
  color: #333333 !important;
}

/* List Content Body */
#ucb-specials-modal .pricing_table li.start_position {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #555555 !important;
  padding: 15px 10px !important;
  text-align: center !important;
  min-height: auto !important;
}

/* Action Buttons */
#ucb-specials-modal .pricing_table a.button_ {
  display:none!important;
}
 .pricing_table.service ul li:last-child {
    display: none!important;
}

.pricing_table .table_wrap ul > li:first-child, .pricing_table .table_wrap ul > li.price, .pricing_table .table_wrap ul > li.start_position {
    border-top: none !important;
}
.pricing_table li.price span{
	color:#000!important;
}
/* Location Banner Styling inside Modal */
#ucb-specials-modal .featured_text {
  text-align: center !important;
  margin-bottom: 20px !important;
	margin-top:15px!important;
  padding: 10px 15px !important;
  background: #f8f9fa !important;
  border-radius: 6px !important;
}

#ucb-specials-modal .featured_text p {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #d63384 !important; /* Theme pink header color */
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}

#ucb-specials-modal .featured_text p.icon-tag::before {
  margin-right: 8px !important;
}
 
#ucb-specials-modal .pricing_table ul li:not(#ucb-specials-modal .pricing_table ul li.caption,#ucb-specials-modal .pricing_table ul li.price,#ucb-specials-modal .pricing_table ul li.start_position) {
    display: none;
}
#ucb-specials-modal .pricing_table .price div{
	margin:0px auto!important;
	align-items:center!important;
}
pricing_table .table_wrap ul > li.price {
    border-bottom:0px!important;
}
/* ==========================================================================
   Specials popup: its own base look (v2.20.4)
   --------------------------------------------------------------------------
   The popup shows markup copied from a clinic page (.pricing_table ...). That
   markup used to get its colours, backgrounds and spacing from the THEME's
   stylesheet, so the popup only looked right on a page that loads the theme
   CSS. On any other page (a custom template, another theme) the columns came
   out white, the white price circle vanished, and its 70px height read as a
   big empty gap. Everything the popup needs is defined here, scoped to the
   popup, so it looks the same wherever it opens. The colours below are the
   ones the live clinic pages use. To re-colour, change the four variables.
   ========================================================================== */
#ucb-specials-modal {
  --ucb-sp-head: #d2edff;       /* header band of a normal column */
  --ucb-sp-head-ink: #0053a0;   /* ...its title */
  --ucb-sp-accent: #ec008b;     /* ...its "$ SAVINGS" line */
  --ucb-sp-hl: #ff76c7;         /* header band + outline of a highlighted column */
}

#ucb-specials-modal .pricing_table .table_wrap {
  --ucb-sp-col: var(--ucb-sp-head);
  --ucb-sp-ink: var(--ucb-sp-head-ink);
  --ucb-sp-sub: var(--ucb-sp-accent);
  background: #fff !important;
  border: 1px solid #e3ecf4 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
#ucb-specials-modal .pricing_table .table_wrap.highlight {
  --ucb-sp-col: var(--ucb-sp-hl);
  --ucb-sp-ink: #fff;
  --ucb-sp-sub: #fff;
  border-color: var(--ucb-sp-hl) !important;
}
#ucb-specials-modal .pricing_table .table_wrap > ul {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
#ucb-specials-modal .pricing_table li {
  margin: 0 !important;          /* a host's li margins would open gaps between the bands */
  border: 0 !important;
  list-style: none !important;
}
#ucb-specials-modal .pricing_table li.caption {
  background: var(--ucb-sp-col) !important;
  padding: 20px 12px 6px !important;
  text-align: center !important;
}
#ucb-specials-modal .pricing_table .caption .title { color: var(--ucb-sp-ink) !important; }
#ucb-specials-modal .pricing_table .caption small {
  color: var(--ucb-sp-sub) !important;
  font-weight: 700 !important;
}
/* the price circle straddles the edge of the coloured band: band behind its top
   half (6px padding + 35px = 41px), white behind its bottom half */
#ucb-specials-modal .pricing_table li.price {
  background: linear-gradient(to bottom, var(--ucb-sp-col) 41px, #fff 41px) !important;
  padding: 6px 12px 0 !important;
  text-align: center !important;
}
#ucb-specials-modal .pricing_table .price div {
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2) !important;
}
#ucb-specials-modal .pricing_table li.start_position {
  flex: 1 1 auto !important;
  background: #fff !important;
}