/* ============================================================ Tokens lifted from edinaplasticsurgery.com computed styles. Headings Playfair Display 400/500, uppercase at display sizes Body Source Sans Pro 400, 18px, ls .54px, #555D63 Primary #253746 (Book Now button, h1) Labels Source Sans Pro 600, uppercase, ls 2.7px, #768692 Rule #C8C8C8 · Panel #F2F2F2 · Radius 12px ============================================================ */ #eps-scheduler-wrap{ --ink:#253746; /* h1, buttons, primary */ --ink-2:#3A4147; /* secondary headings */ --body:#555D63; /* running text */ --muted:#768692; /* eyebrows, meta, addresses */ --rule:#C8C8C8; --rule-soft:#E6E6E6; --panel:#F2F2F2; --panel-2:#F6F8FB; --ground:#FFFFFF; --sage:#BFCEC2; /* soft accent border on site */ --dark:#2C3338; --radius:12px; --proto:#2C3338; --sans:'Source Sans Pro','Source Sans 3',system-ui,-apple-system,sans-serif; --serif:'Playfair Display',Georgia,'Times New Roman',serif; } #eps-scheduler-wrap, #eps-scheduler-wrap *, #eps-scheduler-wrap *::before, #eps-scheduler-wrap *::after{box-sizing:border-box} #eps-scheduler-wrap code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:0} #eps-scheduler-wrap{max-width:1180px;margin:0 auto;padding:0 22px 90px} #eps-scheduler-wrap .hero{text-align:center;padding:66px 0 42px;display:flex;flex-direction:column;align-items:center} #eps-scheduler-wrap h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.4vw,58px); letter-spacing:.54px;text-transform:uppercase;color:var(--ink);margin:0; line-height:1.23;text-wrap:balance} #eps-scheduler-wrap .hero-rule{width:64px;height:1px;background:var(--sage);margin:26px 0 26px} #eps-scheduler-wrap .hero p{margin:0;max-width:62ch;font-size:18px;color:var(--body);text-wrap:balance} #eps-scheduler-wrap .hero p a{color:var(--ink);text-underline-offset:3px} #eps-scheduler-wrap .deposit{margin-top:20px;font-size:15px;color:var(--muted);letter-spacing:.54px} #eps-scheduler-wrap .loading{padding:60px 0;text-align:center;color:var(--muted);font-size:16px} /* ============================================================ RESTYLE OF NEXTPATIENT'S provider-search.js ============================================================ */ /* --- layout reset --------------------------------------------- provider-search.js lays out with CSS tables (.nextpatient-provider-table / -image-cell / -provider-cell). Overriding only the outer container to grid leaves the descendants as table-cell, so the browser rebuilds anonymous table boxes and the whole block shrink-wraps — narrow columns, one-word-per-line names. Everything in the chain is flattened to block here; the specific display rules below then re-apply cleanly. Must stay ABOVE those rules — equal specificity, last one wins. */ #eps-scheduler .nextpatient-box, #eps-scheduler [id^="nextpatient-schedule"], #eps-scheduler [id^="nextpatient-reason"], #eps-scheduler .nextpatient-criteria-container, #eps-scheduler .nextpatient-criteria-box, #eps-scheduler .nextpatient-criteria-label, #eps-scheduler .nextpatient-criteria-input, #eps-scheduler .nextpatient-provider-table, #eps-scheduler .nextpatient-provider, #eps-scheduler .nextpatient-provider-provider-cell, #eps-scheduler .nextpatient-provider-name-block, #eps-scheduler .nextpatient-provider-name-block-left, #eps-scheduler .nextpatient-provider-name-block-right, #eps-scheduler .nextpatient-provider-name, #eps-scheduler .nextpatient-provider-location, #eps-scheduler .nextpatient-location-name, #eps-scheduler .nextpatient-location-address, #eps-scheduler .next-appt-block, #eps-scheduler .next-appt-block .time-line, #eps-scheduler .next-appt-block .explanation{ display:block!important;float:none!important;width:auto!important; max-width:none!important;min-width:0!important; border-collapse:separate!important;border-spacing:0!important; table-layout:auto!important;box-sizing:border-box; } #eps-scheduler .nextpatient-provider, #eps-scheduler .nextpatient-provider *{min-width:0} #eps-scheduler{width:100%} /* --- criteria bar --- */ #eps-scheduler .nextpatient-criteria-container{ background:var(--panel);border:1px solid var(--rule); padding:28px 30px;display:flex!important;flex-wrap:wrap;gap:22px; justify-content:center;align-items:flex-end;font-family:var(--sans)!important;margin:0; } #eps-scheduler .nextpatient-criteria-box{display:flex!important;flex-direction:column;gap:7px;min-width:0} #eps-scheduler .nextpatient-criteria-label label{ font-family:var(--sans)!important;font-size:12px!important;font-weight:600!important; letter-spacing:2.7px;text-transform:uppercase;color:var(--muted)!important; } #eps-scheduler .nextpatient-criteria-input select{ font-family:var(--sans)!important;font-size:17px!important;font-weight:400!important; letter-spacing:.54px;padding:13px 42px 13px 16px!important; border:1px solid var(--rule)!important;border-radius:0!important; background-color:var(--ground)!important;color:var(--ink)!important; /* the widget ships a fixed height on these; with our padding that squeezes the content box and clips descenders ("Surgery", "g") */ height:auto!important;min-height:0!important;line-height:1.45!important; min-width:280px;max-width:100%;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 21px) calc(50% + 1px),calc(100% - 16px) calc(50% + 1px); background-size:6px 6px,6px 6px;background-repeat:no-repeat; } #eps-scheduler select:focus-visible,#eps-scheduler button:focus-visible{ outline:2px solid var(--ink);outline-offset:2px} /* --- provider grid --- */ #eps-scheduler .nextpatient-provider-table{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px; margin-top:22px;font-family:var(--sans)!important; /* Tiles size to their own content. A multi-location tile is legitimately taller than a single-location one, and stretching its row-mate to match just leaves a tall card with a hole in the middle of it. */ align-items:start; } #eps-scheduler .nextpatient-provider{ display:flex!important;flex-direction:column; border:1px solid var(--rule)!important; background:var(--ground)!important;padding:24px!important;margin:0!important; min-height:268px; /* reserve space so tiles don't jump in on load */ transition:border-color .18s,box-shadow .18s; } #eps-scheduler .nextpatient-provider:hover{ border-color:var(--muted)!important;box-shadow:0 2px 20px rgba(37,55,70,.07)} #eps-scheduler .nextpatient-provider-image-cell, #eps-scheduler .nextpatient-provider-small-photo{display:none!important} #eps-scheduler .nextpatient-provider-provider-cell{display:flex!important;flex-direction:column;flex:1} #eps-scheduler .nextpatient-provider-name-block{display:flex!important;gap:20px;align-items:flex-start;margin:0!important} #eps-scheduler .nextpatient-provider-name-block-left{flex:0 0 auto} #eps-scheduler .nextpatient-provider-name-block-right{display:flex!important;flex-direction:column;gap:6px;min-width:0;flex:1} #eps-scheduler .nextpatient-provider-name, #eps-scheduler .nextpatient-provider-name b{ font-family:var(--serif)!important;font-weight:500!important;font-size:25px!important; letter-spacing:.54px;text-transform:none;color:var(--ink)!important;line-height:1.24!important; } /* The native blurb is operational text (insurance rules, "call the office"), repeated on every card. Hidden here and replaced with a focus line we control; the disclaimer runs once under the grid instead. Flip .show-native-blurb on #eps-scheduler to compare. */ #eps-scheduler .nextpatient-provider-blurb{display:none!important} #eps-scheduler.show-native-blurb .nextpatient-provider-blurb{display:block!important} #eps-scheduler .nextpatient-provider-blurb, #eps-scheduler .nextpatient-provider-blurb b{ font-family:var(--sans)!important;font-weight:400!important;font-size:15px!important; color:var(--muted)!important;line-height:1.55!important; } /* Reserve two lines. Some focus strings wrap and some don't, which left the chips and the rule below them sitting at different heights from one card to the next. 3.1em = 2 x the 1.55 line-height. */ #eps-scheduler .eps-focus{font-family:var(--sans);font-weight:400;font-size:17px; color:var(--body);line-height:1.55;letter-spacing:.54px;min-height:3.1em} #eps-scheduler .next-appt-block{margin-top:auto!important;padding-top:16px; border-top:1px solid var(--rule-soft)} #eps-scheduler .next-appt-block .time-line{ font-family:var(--sans)!important;font-size:16px!important;color:var(--body)!important; letter-spacing:.54px;font-variant-numeric:tabular-nums} #eps-scheduler .next-appt-block .time-line b{font-weight:600!important;color:var(--ink)!important} #eps-scheduler .next-appt-block .explanation{ font-family:var(--sans)!important;font-size:14px!important;color:var(--muted)!important;margin-top:3px} /* --- our injected enhancements --- */ #eps-scheduler .eps-shot{width:96px;height:122px;background:var(--panel);color:var(--muted); display:flex;align-items:center;justify-content:center;font-family:var(--serif); font-size:28px;letter-spacing:.5px;overflow:hidden} #eps-scheduler .eps-shot img{width:100%;height:100%;object-fit:cover;display:block} #eps-scheduler .eps-eyebrow{font-size:12px;font-weight:600;letter-spacing:2.7px; text-transform:uppercase;color:var(--muted);margin-bottom:2px} /* ---------- location controls ---------- One look for every surgeon. A single-office surgeon gets a chip that is identical to a location button but isn't interactive; the multi-office tile gets the same shape as real buttons. Square, so the only rounded things on a tile are the bookable time slots. */ #eps-scheduler .eps-locs, #eps-scheduler .eps-locbtns{display:flex;flex-wrap:wrap;gap:8px} #eps-scheduler .eps-chip, #eps-scheduler .eps-locbtn{ font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:1.4px; text-transform:uppercase;color:var(--muted); border:1px solid var(--rule);background:transparent; padding:7px 14px;border-radius:0;line-height:1.2} #eps-scheduler .eps-chip{cursor:default} #eps-scheduler .eps-locbtn{cursor:pointer; transition:background .16s,color .16s,border-color .16s} /* ---------- ITEM 5: multi-location tile ---------- */ /* Hide the Edina-only times provider-search puts on a multi-location tile; the projected blocks below replace them. If the projection fails, .eps-multi is removed and these come back. */ #eps-scheduler .nextpatient-provider.eps-multi .next-appt-block, #eps-scheduler .nextpatient-provider.eps-multi > .nextpatient-provider-provider-cell > .nextpatient-provider-times{display:none!important} #eps-scheduler .eps-locwrap, #eps-scheduler .eps-locrow{margin-top:auto;padding-top:16px; border-top:1px solid var(--rule-soft)} #eps-scheduler .eps-locrow{margin-bottom:16px} /* the rule now sits above the location row, so the times below it shouldn't draw a second one */ #eps-scheduler .eps-locrow + .next-appt-block, #eps-scheduler .eps-locrow + .nextpatient-provider-times{ margin-top:0!important;padding-top:0!important;border-top:0!important} #eps-scheduler .eps-locbtns{margin-bottom:16px} #eps-scheduler .eps-locbtn:hover{border-color:var(--muted);color:var(--ink)} #eps-scheduler .eps-locbtn[aria-pressed="true"]{ background:var(--ink);border-color:var(--ink);color:#fff} /* Only the time slots are lifted into the tile — NextPatient's location headings and addresses stay in the hidden host, so a multi-location tile is visually identical to a single-location one. */ #eps-scheduler .eps-times{min-height:62px} #eps-scheduler .eps-chiprow{display:flex;flex-wrap:wrap;gap:8px} #eps-scheduler .eps-next{font-family:var(--sans);font-size:16px;color:var(--body)} #eps-scheduler .eps-next-label{font-size:12px;font-weight:600;letter-spacing:2.7px; text-transform:uppercase;color:var(--muted)} #eps-scheduler .eps-next b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} #eps-scheduler .eps-next-note{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:3px} /* Belt and braces: once a procedure is chosen, this text is stale wherever NextPatient still renders it. */ #eps-scheduler.eps-has-reason .time-line-instructions, #eps-scheduler.eps-has-reason .eps-next-note{display:none!important} /* provider-search renders its own chips into .nextpatient-provider-times on the single-office tiles; without this they stack full-width. */ #eps-scheduler .nextpatient-provider-times{display:flex!important;flex-wrap:wrap;gap:8px} #eps-scheduler .nextpatient-provider-times > div{display:block!important;width:auto!important} /* the slot chips (ours and theirs) */ #eps-scheduler a.nextpatient-slot-time{display:block;text-decoration:none;text-align:center; border:1px solid var(--rule);border-radius:var(--radius);padding:8px 13px; background:var(--ground);transition:background .16s,border-color .16s} #eps-scheduler a.nextpatient-slot-time:hover{background:var(--ink);border-color:var(--ink)} #eps-scheduler a.nextpatient-slot-time:hover .nextpatient-slot-time-day, #eps-scheduler a.nextpatient-slot-time:hover .nextpatient-slot-time-time{color:#fff!important} #eps-scheduler .nextpatient-slot-time-day{font-family:var(--sans)!important; font-size:13px!important;color:var(--muted)!important;letter-spacing:.3px} #eps-scheduler .nextpatient-slot-time-time{font-family:var(--sans)!important; font-size:15px!important;font-weight:600!important;color:var(--ink)!important; font-variant-numeric:tabular-nums} #eps-scheduler a.nextpatient-more-times, #eps-scheduler a.nextpatient-slot-time-more{display:flex!important;align-items:center; font-size:13px!important;font-weight:600;letter-spacing:1.2px;text-transform:uppercase; color:var(--muted)!important} /* ITEM 4: the in-tile procedure selector is NextPatient's, not ours */ #eps-scheduler .nextpatient-reason-select{display:none!important} /* ---------- offline fallback ---------- */ #eps-scheduler .eps-fallback{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} #eps-scheduler .eps-fb-card{display:flex;gap:20px;align-items:flex-start; border:1px solid var(--rule);padding:24px;text-decoration:none;background:var(--ground); transition:border-color .16s} #eps-scheduler .eps-fb-card:hover{border-color:var(--ink)} #eps-scheduler .eps-fb-body{display:flex;flex-direction:column;gap:6px;min-width:0} #eps-scheduler .eps-fb-name{font-family:var(--serif);font-weight:500;font-size:25px; color:var(--ink);letter-spacing:.54px;line-height:1.24} #eps-scheduler .eps-fb-cta{margin-top:6px;font-size:13px;font-weight:600;letter-spacing:1.4px; text-transform:uppercase;color:var(--ink)} #eps-scheduler .eps-note{font-size:16px;color:var(--muted)} #eps-scheduler .eps-disclaimer{margin-top:30px;padding-top:20px;border-top:1px solid var(--rule); font-size:15px;color:var(--muted);text-align:center;line-height:1.6;letter-spacing:.54px} #eps-scheduler .eps-disclaimer a{color:var(--ink);text-underline-offset:3px} @media(max-width:860px){ #eps-scheduler .nextpatient-provider-table{grid-template-columns:minmax(0,1fr)!important} #eps-scheduler .nextpatient-criteria-container{flex-direction:column;align-items:stretch} #eps-scheduler .nextpatient-criteria-input select{min-width:0;width:100%} #eps-scheduler .eps-fallback{grid-template-columns:minmax(0,1fr)} #eps-scheduler .nextpatient-provider{min-height:0} #eps-scheduler-wrap .hero{padding:44px 0 32px} } @media (prefers-reduced-motion:reduce){#eps-scheduler-wrap *{transition:none!important}}