/**
 * One Day Cataract Institute — homepage (page 44) styles.
 *
 * Consolidated 2026-09-29 from:
 *   - the homepage rules in odc-pricing.css (now retired),
 *   - page 44's Elementor page-settings custom CSS (Freedom card layout),
 *   - container 15159ded's Elementor custom CSS (pricing section),
 *   - <style> blocks inlined in HTML widgets odcsteps1, togwz77ka,
 *     ef1ed1f3 and 63f1d6e2 (the toggle CSS was printed three times).
 * Selectors that matched nothing on the page were dropped.
 *
 * Enqueued on the front page only (functions.php, ODC_HOME_VERSION).
 * Element ids are Elementor ids on page 44; rebuilding a widget or
 * container in Elementor changes its id and breaks the matching rule.
 */

/* =====================================================================
 * Trust strip — "How a One Day package works" (HTML widget odcsteps1)
 * ================================================================== */
.odc-steps{max-width:1180px;margin:0 auto;color:#fff;font-family:inherit}
.odc-steps .odc-steps__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.odc-steps .odc-steps__item{position:relative;display:flex;align-items:center;gap:14px;margin:0;padding:2px 20px 2px 40px}
.odc-steps .odc-steps__item:first-child{padding-left:0}
.odc-steps .odc-steps__item + .odc-steps__item::before{content:"";position:absolute;left:4px;top:50%;width:10px;height:10px;border-top:2px solid #55b9ea;border-right:2px solid #55b9ea;transform:translateY(-50%) rotate(45deg)}
.odc-steps .odc-steps__num{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:2px solid #55b9ea;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;line-height:1;color:#fff}
.odc-steps .odc-steps__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.odc-steps .odc-steps__title{font-size:16px;font-weight:700;line-height:1.25;color:#fff}
.odc-steps .odc-steps__text{font-size:14px;line-height:1.4;color:rgba(255,255,255,.8)}
.odc-steps .odc-steps__foot{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.odc-steps .odc-steps__note{display:flex;align-items:flex-start;gap:10px;margin:0;max-width:680px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.odc-steps .odc-steps__note svg{flex:0 0 18px;margin-top:2px;color:#55b9ea}
.odc-steps .odc-steps__badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0}
.odc-steps .odc-steps__badges li{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:600;line-height:1.3;color:#fff;white-space:nowrap}
.odc-steps .odc-steps__badges svg{flex:0 0 16px;color:#55b9ea}
@media (max-width:1024px){
  .odc-steps .odc-steps__item{padding:2px 12px 2px 30px}
  .odc-steps .odc-steps__item + .odc-steps__item::before{left:0}
  .odc-steps .odc-steps__foot{flex-direction:column;align-items:flex-start}
  .odc-steps .odc-steps__note{max-width:none}
}
@media (max-width:767px){
  .odc-steps .odc-steps__list{grid-template-columns:1fr;gap:18px}
  .odc-steps .odc-steps__item,.odc-steps .odc-steps__item:first-child{padding:0}
  .odc-steps .odc-steps__item + .odc-steps__item::before{left:21px;top:-18px;width:2px;height:18px;border:0;background:rgba(85,185,234,.55);transform:none}
  .odc-steps .odc-steps__num{flex-basis:44px}
  .odc-steps .odc-steps__badges{flex-direction:column;gap:8px}
  .odc-steps .odc-steps__badges li{white-space:normal}
}

/* =====================================================================
 * How It Works — keep step rows horizontal on tablets and phones
 * ================================================================== */
@media (max-width:1024px){
  .elementor-element-5fd2bb7b, .elementor-element-114f1249, .elementor-element-5dc23c6a{flex-direction:row !important;align-items:flex-start !important;gap:14px !important}
}

/* =====================================================================
 * Pricing section (container 15159ded)
 * ================================================================== */

/* Single-row grid behaviour, so no phantom empty row is added */
.elementor-44 .elementor-element.elementor-element-15159ded .e-con.e-grid{grid-template-rows:auto !important;grid-auto-rows:auto !important}

.elementor-44 .elementor-element.elementor-element-15159ded .odc-view{display:none}
.elementor-44 .elementor-element.elementor-element-15159ded .odc-view.odc-view-active{display:block}

/* Price display */
.elementor-44 .elementor-element.elementor-element-15159ded .odc-price-row{display:flex;align-items:flex-start;gap:12px;justify-content:center;margin-bottom:4px}
.elementor-44 .elementor-element.elementor-element-15159ded .odc-price-amount{font-size:64px;font-weight:800;line-height:1}
.elementor-44 .elementor-element.elementor-element-15159ded .odc-price-labels{display:flex;flex-direction:column;padding-top:8px;line-height:1.2}
.elementor-44 .elementor-element.elementor-element-15159ded .odc-price-per{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
@media (max-width:767px){
  .elementor-44 .elementor-element.elementor-element-15159ded .odc-price-amount{font-size:48px}
}

/* Per-card Insurance / Self-Pay toggle (HTML widgets togwz77ka, ef1ed1f3, 63f1d6e2) */
.odc-per-card-toggle{text-align:center;margin:0 auto 18px;display:flex;justify-content:center}
.odc-per-card-toggle .odc-tog-track{display:inline-flex;background:rgba(30,51,112,0.06);border-radius:999px;padding:3px;gap:2px}
.odc-per-card-toggle button.odc-tog-btn{background:transparent;color:#4a5568;border:none;padding:7px 16px;border-radius:999px;font-weight:700;font-size:11px;cursor:pointer;letter-spacing:0.5px;text-transform:uppercase;transition:all .18s ease;font-family:inherit}
.odc-per-card-toggle button.odc-tog-btn.is-active{background:#2878be;color:#ffffff;box-shadow:0 2px 6px rgba(40,120,190,0.35)}
.odc-per-card-toggle.odc-freedom .odc-tog-track{background:rgba(201,136,30,0.08)}
.odc-per-card-toggle.odc-freedom button.odc-tog-btn.is-active{background:#C9881E;box-shadow:0 2px 6px rgba(201,136,30,0.35)}

/* Cards: 4dab969 (card 1), def4744 (card 2), 2f05f5c1 (Freedom) in grid 6688a56c */
.elementor-element-4350984a{align-items:stretch !important}
.elementor-element-4dab969, .elementor-element-def4744, .elementor-element-2f05f5c1{display:flex !important;flex-direction:column !important;justify-content:flex-start !important}
.elementor-element-4dab969 .elementor-widget-heading, .elementor-element-def4744 .elementor-widget-heading, .elementor-element-2f05f5c1 .elementor-widget-heading{text-align:center !important}
.elementor-element-4dab969 .elementor-heading-title, .elementor-element-def4744 .elementor-heading-title, .elementor-element-2f05f5c1 .elementor-heading-title{text-align:center !important}

/* Centre the price rows */
.elementor-element-4dab969 .odc-price-row, .elementor-element-def4744 .odc-price-row, .elementor-element-2f05f5c1 .odc-price-row{display:inline-flex !important;justify-content:center !important;align-items:baseline !important;gap:6px !important}
.elementor-element-81e1b55 .elementor-heading-title, .elementor-element-0764bb1 .elementor-heading-title, .elementor-element-246add35 .elementor-heading-title{display:flex !important;justify-content:center !important;align-items:center !important;width:100% !important}
.elementor-element-81e1b55 .odc-price-row, .elementor-element-0764bb1 .odc-price-row, .elementor-element-246add35 .odc-price-row{margin:0 auto !important;display:inline-flex !important;justify-content:center !important;align-items:baseline !important}

/* Card 1 price container: no padding (matches cards 2/3) and full width so the row truly centres */
.elementor-element-f4f2dc9{padding:0 !important;margin:0 !important;align-items:stretch !important;justify-content:center !important;width:100% !important}
.elementor-element-f4f2dc9 > *{width:100% !important;align-self:stretch !important}
.elementor-element-81e1b55{width:100% !important;align-self:stretch !important}

/* Equalize cash panel heights */
.elementor-element-cpeqimvi, .elementor-element-a4e90bb, .elementor-element-7af72c26{min-height:138px !important}

/* Card 1 cash panel heading */
.elementor-element-chhzwjzy .elementor-heading-title{line-height:16px !important;font-size:16px !important;font-weight:500 !important}
.elementor-element-chhzwjzy .elementor-heading-title b, .elementor-element-chhzwjzy .elementor-heading-title strong{font-weight:700 !important}

/* Card 1 insurance panel: fixed height on desktop only. Below 1025px the cards stack, and on phones
   the heading wraps and would overflow 138px; nowrap keeps it a single column at every width. */
.elementor-element-473c364{flex-wrap:nowrap !important}
@media (min-width:1025px){
  .elementor-element-473c364{height:138px !important;min-height:138px !important;max-height:138px !important;overflow:hidden}
}

/* Desktop (>=1025px): Freedom card in the middle with extra emphasis. DOM order is unchanged,
   so tablets and phones still list it third. It extends 40px above and below the others; the
   extra padding (40px minus 1px for the thicker border) keeps its rows level with theirs.
   The 9 rows of each card (header, divider, list, divider, toggle, price, terms, panel, button)
   share subgrid tracks, so content stays level when titles wrap. Each card must keep exactly
   9 visible children. */
@media (min-width:1025px){
  .elementor-element.elementor-element-4dab969{order:1}
  .elementor-element.elementor-element-2f05f5c1{order:2;position:relative;z-index:1;margin-top:-40px !important;margin-bottom:-40px !important;padding-top:75px !important;padding-bottom:75px !important;border:2px solid #C9881E !important;box-shadow:0 24px 48px rgba(30,51,112,.06) !important}
  .elementor-element.elementor-element-def4744{order:3}
  .elementor-element.elementor-element-6688a56c{margin-bottom:72px !important;row-gap:0 !important}
  .elementor-element.elementor-element-6688a56c > .e-con{display:grid !important;grid-template-rows:subgrid !important;grid-row:span 9 !important;row-gap:0 !important;align-content:start}
}

/* =====================================================================
 * Moved 2026-10-01 from the Elementor kit's Custom CSS (Site Settings),
 * where it loaded on every page. Rules that matched nothing, or that
 * repeated rules above, were dropped.
 * ================================================================== */

/* Doctor headshots (container 5fbad795): 130px circles */
.elementor-element-5fbad795 .elementor-widget-image img{width:130px !important;height:130px !important;object-fit:cover !important;object-position:center top !important;border-radius:50% !important;border:3px solid #f0f2f8 !important;display:block;max-width:130px}

/* Card 1 price row centering */
.elementor-element-4dab969 .elementor-element-f4f2dc9, .elementor-element-4dab969 .elementor-element-3965c2e{text-align:center !important}
.elementor-element-4dab969 .elementor-element-81e1b55 .elementor-heading-title, .elementor-element-4dab969 .elementor-element-3965c2e .elementor-heading-title{text-align:center !important;justify-content:center !important;display:block !important;width:100%}

/* Pre-op exam note: own line above the financing disclaimer, larger than the fine print */
.elementor-element-422d4b32 .odc-preop-note{font-size:16px;line-height:1.6;color:#1e3370;font-weight:600;margin:0 0 10px}
