
.rfo-wizard{
  --rfo-bg:#f3f6fb;
  --rfo-card:#ffffff;
  --rfo-card-soft:#f8fbff;
  --rfo-border:#dce7f3;
  --rfo-text:#0f172a;
  --rfo-muted:#64748b;
  --rfo-primary:#0f766e;
  --rfo-primary-strong:#115e59;
  --rfo-primary-soft:#ecfeff;
  --rfo-accent:#f59e0b;
  --rfo-danger:#b42318;
  --rfo-danger-soft:#fef3f2;
  --rfo-shadow:0 24px 56px rgba(15,23,42,.10);
  color:var(--rfo-text);
}
.rfo-wizard *{box-sizing:border-box}
.rfo-shell{display:grid;gap:16px}
.rfo-hero-card,.rfo-panel,.rfo-setup-notice,.rfo-summary-card{
  background:var(--rfo-card);
  border:1px solid var(--rfo-border);
  border-radius:28px;
  box-shadow:var(--rfo-shadow);
}
.rfo-hero-card{padding:22px 24px}
.rfo-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;
  background:var(--rfo-primary-soft);color:var(--rfo-primary);
  font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase
}
.rfo-hero-title{margin:10px 0 0;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.3;font-weight:700;max-width:42rem}
.rfo-hero-text{margin:0;color:var(--rfo-muted);font-size:1.03rem;max-width:76ch;line-height:1.6}
.rfo-layout{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.rfo-main{display:grid;gap:16px;min-width:0}
.rfo-sidebar{order:-1;position:static}
.rfo-stepper{
  display:flex;
  gap:10px;
  overflow-x:hidden;
  overflow-y:hidden;
  padding:2px 2px 6px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  touch-action:pan-y;
}
.rfo-stepper::-webkit-scrollbar{display:none;width:0;height:0}
.rfo-step{
  display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;
  background:#fff;border:1px solid var(--rfo-border);font-size:.9rem;min-width:124px;flex:0 0 auto
}
.rfo-step.is-current{border-color:rgba(15,118,110,.34);background:var(--rfo-primary-soft)}
.rfo-step.is-done{border-color:rgba(15,118,110,.25)}
.rfo-step__index{
  width:30px;height:30px;border-radius:999px;background:#e2e8f0;color:var(--rfo-text);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto
}
.rfo-step.is-current .rfo-step__index,.rfo-step.is-done .rfo-step__index{background:var(--rfo-primary);color:#fff}
.rfo-step__label{font-weight:700;min-width:0}
.rfo-panel{padding:20px}
.rfo-summary-card{padding:16px 18px}
.rfo-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.rfo-section-head h3{margin:0;font-size:1.45rem}
.rfo-pill{
  min-width:38px;height:38px;border-radius:999px;background:var(--rfo-primary-soft);color:var(--rfo-primary);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto
}
.rfo-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.rfo-choice-card{
  appearance:none;border:1px solid var(--rfo-border);background:#fff;border-radius:24px;padding:24px;
  text-align:left;display:grid;gap:10px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.rfo-choice-card:hover,.rfo-card:hover{transform:translateY(-2px)}
.rfo-choice-card.is-active{background:var(--rfo-primary-soft);border-color:rgba(15,118,110,.38);box-shadow:0 12px 28px rgba(15,118,110,.12)}
.rfo-choice-card__title{font-size:1.18rem;font-weight:800}
.rfo-choice-card__desc{color:var(--rfo-muted);line-height:1.55}
.rfo-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.rfo-card{
  overflow:hidden;background:#fff;border:1px solid var(--rfo-border);border-radius:24px;
  box-shadow:0 12px 28px rgba(15,23,42,.06);transition:transform .18s ease, box-shadow .18s ease
}
.rfo-card__media{aspect-ratio:16/10;background:#f8fafc}
.rfo-card__media--button{appearance:none;border:0;padding:0;cursor:pointer;display:block;width:100%;text-align:left;border-bottom:1px solid var(--rfo-border)}
.rfo-card__media--button:focus-visible{outline:3px solid rgba(15,118,110,.25);outline-offset:-3px}
.rfo-card__media img,.rfo-line-card__media img,.rfo-summary-line__media img,.rfo-added-modal__media img{width:100%;height:100%;object-fit:cover;display:block}
.rfo-card__body{display:grid;gap:14px;padding:18px}
.rfo-card__top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.rfo-card h4,.rfo-line-card h4,.rfo-summary-line h4,.rfo-added-modal h4{margin:0;font-size:1.15rem;line-height:1.25}
.rfo-card__desc{margin:0;color:var(--rfo-muted);line-height:1.55;min-height:48px}
.rfo-price{font-weight:900;white-space:nowrap}
.rfo-button,.rfo-link-btn{
  appearance:none;border:0;cursor:pointer;text-decoration:none;
  border-radius:18px;padding:14px 18px;font-weight:800;transition:all .18s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:8px
}
.rfo-button{background:linear-gradient(135deg,var(--rfo-primary) 0%, var(--rfo-primary-strong) 100%);color:#fff}
.rfo-button:hover,.rfo-link-btn:hover{transform:translateY(-1px)}
.rfo-button--full{width:100%}
.rfo-button--ghost,.rfo-link-btn{
  background:#fff;color:var(--rfo-primary);border:1px solid rgba(15,118,110,.22)
}
.rfo-button--danger{
  background:var(--rfo-danger-soft);color:var(--rfo-danger);border:1px solid rgba(180,35,24,.18)
}
.rfo-link-btn--small{padding:10px 14px;border-radius:14px;font-size:.92rem}
.rfo-link-btn--danger{color:var(--rfo-danger);border-color:rgba(180,35,24,.18)}
.rfo-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.rfo-stack{display:grid;gap:16px}
.rfo-line-card{
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;
  padding:16px;border:1px solid var(--rfo-border);background:#fff;border-radius:24px
}
.rfo-line-card__media{overflow:hidden;border-radius:18px;background:#f8fafc;min-height:100%}
.rfo-line-card__body{display:grid;gap:12px}
.rfo-line-card__top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.rfo-line-card__meta{color:var(--rfo-muted);font-size:.93rem;line-height:1.45}
.rfo-line-card__question{margin:0;font-weight:700}
.rfo-toggle{display:inline-flex;gap:8px;flex-wrap:wrap}
.rfo-toggle__btn{
  appearance:none;border:1px solid var(--rfo-border);background:#fff;color:var(--rfo-text);
  border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer
}
.rfo-toggle__btn.is-active{background:var(--rfo-primary-soft);border-color:rgba(15,118,110,.34);color:var(--rfo-primary)}
.rfo-textarea{
  width:100%;min-height:104px;border-radius:18px;border:1px solid var(--rfo-border);
  padding:14px;font:inherit;resize:vertical;background:#fff
}
.is-hidden{display:none !important}
.rfo-qty-control{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border:1px solid var(--rfo-border);border-radius:18px;padding:8px 10px;background:var(--rfo-card-soft);width:max-content
}
.rfo-qty-control--inline{background:#fff}
.rfo-qty-btn{
  appearance:none;border:0;background:#fff;color:var(--rfo-primary);
  width:40px;height:40px;border-radius:14px;font-size:1.35rem;font-weight:800;
  cursor:pointer;box-shadow:0 6px 12px rgba(15,23,42,.08)
}
.rfo-qty-value{min-width:20px;text-align:center;font-weight:800}
.rfo-summary-card{padding:20px}
.rfo-summary-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.rfo-summary-head h3{margin:4px 0 0;font-size:1.25rem}
.rfo-summary-eyebrow{margin:0;color:var(--rfo-muted);font-size:.84rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.rfo-summary-total{font-size:1.05rem;font-weight:900;background:var(--rfo-primary-soft);padding:10px 14px;border-radius:999px;color:var(--rfo-primary)}
.rfo-summary-empty{
  border:1px dashed var(--rfo-border);border-radius:22px;padding:18px;color:var(--rfo-muted);background:#f8fafc
}
.rfo-summary-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rfo-summary-line{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;
  padding:12px;border:1px solid var(--rfo-border);border-radius:20px;background:#fff
}
.rfo-summary-line__media{border-radius:16px;overflow:hidden;background:#f8fafc}
.rfo-summary-line__body{display:grid;gap:8px}
.rfo-summary-line__top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.rfo-summary-line__meta{color:var(--rfo-muted);font-size:.92rem}
.rfo-summary-line__note{font-size:.9rem;color:var(--rfo-text);background:#f8fafc;padding:8px 10px;border-radius:14px}
.rfo-summary-qty{display:inline-flex;align-items:center;gap:8px}
.rfo-summary-qty .rfo-qty-btn{width:34px;height:34px;border-radius:12px}
.rfo-mini-remove{
  appearance:none;border:0;background:transparent;color:var(--rfo-danger);cursor:pointer;font-weight:800;padding:0
}
.rfo-summary-footer,.rfo-summary-final{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--rfo-border);
  display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:1.05rem
}
.rfo-summary-final strong,.rfo-summary-footer strong{font-size:1.18rem}
.rfo-summary-edit-row{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.rfo-customer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rfo-field{display:grid;gap:8px}
.rfo-field--full{grid-column:1/-1}
.rfo-field span{font-weight:800}
.rfo-field small{color:var(--rfo-muted);line-height:1.45}
.rfo-field input{
  width:100%;height:54px;border-radius:18px;border:1px solid var(--rfo-border);
  padding:0 16px;background:#fff;font:inherit
}
.rfo-pickup-card{
  grid-column:1/-1;padding:18px;border:1px solid var(--rfo-border);border-radius:22px;background:#f8fafc;display:grid;gap:10px
}
.rfo-pickup-card p{margin:0;color:var(--rfo-muted)}
.rfo-map-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.rfo-empty{
  padding:24px;border:1px dashed var(--rfo-border);border-radius:24px;background:#f8fafc;color:var(--rfo-muted)
}
.rfo-modal[hidden]{display:none}
.rfo-modal{
  position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:18px
}
.rfo-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.56);backdrop-filter:blur(2px)}
.rfo-modal__dialog{
  position:relative;z-index:1;width:min(860px,calc(100vw - 24px));max-height:min(92vh,820px);
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:28px;box-shadow:0 32px 80px rgba(15,23,42,.26);padding:20px
}
.rfo-modal__close{
  appearance:none;border:0;background:#fff;color:var(--rfo-muted);width:42px;height:42px;border-radius:999px;
  position:absolute;right:18px;top:18px;cursor:pointer;font-size:1.5rem;line-height:1;box-shadow:0 8px 20px rgba(15,23,42,.12)
}
.rfo-modal__title{margin:0 46px 10px 0;font-size:1.5rem}
.rfo-modal__text{margin:0;color:var(--rfo-muted);line-height:1.6}
.rfo-modal__hint{margin:0;color:var(--rfo-muted);font-size:.92rem}
.rfo-modal__content{display:grid;gap:12px;overflow:auto;padding-right:4px}
.rfo-modal__actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--rfo-border);background:#fff;position:sticky;bottom:0}
.rfo-added-modal{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px}
.rfo-added-modal__media{border-radius:20px;overflow:hidden;background:#f8fafc}
.rfo-added-modal__body{display:grid;gap:12px;align-content:start}
.rfo-map-modal{display:grid;gap:12px}
.rfo-map-frame-wrap{
  overflow:hidden;border-radius:22px;border:1px solid var(--rfo-border);background:#f8fafc;
  min-height:0
}
.rfo-map-frame{width:100%;height:clamp(220px,34vh,290px);border:0;display:block}
.rfo-setup-notice{padding:26px}
.rfo-setup-notice h3{margin-top:0}
.rfo-checkout-summary{
  margin:24px 0;padding:18px;border:1px solid #e5e7eb;border-radius:18px;background:#fafafa
}
.rfo-checkout-summary h3{margin-top:0}
@media (max-width: 1180px){
  .rfo-layout{grid-template-columns:1fr}
  .rfo-sidebar{position:static;order:-1}
}
@media (max-width: 900px){
  .rfo-choice-grid,.rfo-customer-grid{grid-template-columns:1fr}
  .rfo-line-card,.rfo-added-modal{grid-template-columns:1fr}
  .rfo-step{min-width:104px;padding:9px 11px}
  .rfo-step__label{font-size:.82rem}
}
@media (max-width: 760px){
  .rfo-modal{padding:10px}
  .rfo-modal__dialog{width:min(100%,calc(100vw - 12px));max-height:94vh;padding:16px;border-radius:22px}
  .rfo-modal__title{font-size:1.3rem;margin-right:42px}
  .rfo-map-frame{height:clamp(180px,28vh,230px)}
  .rfo-modal__actions{justify-content:stretch}
  .rfo-modal__actions .rfo-button{flex:1 1 100%}
}
@media (max-width: 640px){
  .rfo-hero-card,.rfo-panel,.rfo-summary-card{border-radius:24px}
  .rfo-panel,.rfo-hero-card,.rfo-summary-card,.rfo-modal__dialog{padding:18px}
  .rfo-step{min-width:86px;padding:8px 10px}
  .rfo-step__label{display:none}
  .rfo-summary-list{grid-template-columns:1fr}
  .rfo-summary-line{grid-template-columns:56px minmax(0,1fr)}
  .rfo-summary-total{padding:8px 12px}
  .rfo-actions{flex-direction:column}
  .rfo-actions .rfo-button,.rfo-actions .rfo-link-btn{width:100%}
}
