
/* =========================================================
   eFresh integrated Book a Demo — sleek 3-step JS experience
   ========================================================= */
body.ef-demo-lock{overflow:hidden}
.ef-demo-modal{
  position:fixed;inset:0;z-index:9999;display:none;
  background:rgba(8,27,21,.32);backdrop-filter:blur(12px);
  padding:22px;
}
.ef-demo-modal.open{display:flex;align-items:center;justify-content:center;animation:efDemoFade .22s ease both}
@keyframes efDemoFade{from{opacity:0}to{opacity:1}}
.ef-demo-dialog{
  width:min(1180px,100%);height:min(820px,calc(100vh - 44px));
  background:#fff;border:1px solid rgba(220,230,225,.95);border-radius:28px;
  box-shadow:0 32px 100px rgba(16,37,31,.20);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
}
.ef-demo-top{
  height:72px;display:flex;align-items:center;gap:18px;padding:0 28px;
  border-bottom:1px solid #edf2ef;background:rgba(255,255,255,.96);flex:0 0 auto;
}
.ef-demo-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900;letter-spacing:-.03em}
.ef-demo-brandmark{
  width:34px;height:34px;border-radius:10px;background:#10251f;color:#b7f26b;
  display:grid;place-items:center;font-size:11px;font-weight:950;
}
.ef-demo-stepmeta{margin-left:auto;font-size:11px;font-weight:850;color:#7a8b84;letter-spacing:.04em;text-transform:uppercase}
.ef-demo-close{
  width:38px;height:38px;border:1px solid #dfe7e3;border-radius:11px;background:#fff;color:#52675f;
  font-size:22px;display:grid;place-items:center;line-height:1;transition:.18s ease
}
.ef-demo-close:hover{background:#f6f9f7;color:#10251f}
.ef-demo-progress{height:4px;background:#eef2f0;flex:0 0 auto}
.ef-demo-progress i{display:block;height:100%;width:33.333%;background:#178b55;transition:width .28s ease}
.ef-demo-body{flex:1;min-height:0;overflow:auto;padding:44px 54px 34px;background:
  radial-gradient(circle at 100% 0%,rgba(183,242,107,.08),transparent 26%),#fff}
.ef-demo-stage{display:none;max-width:1020px;margin:0 auto;animation:efStageIn .24s ease both}
.ef-demo-stage.active{display:block}
@keyframes efStageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ef-demo-heading{text-align:center;margin:0 auto 38px;max-width:760px}
.ef-demo-heading h2{
  font-size:38px;line-height:1.08;letter-spacing:-.045em;margin:0 0 9px;color:#26332e
}
.ef-demo-heading p{font-size:15px;color:#91a09a;margin:0}
.ef-demo-options{display:grid;gap:18px;margin:0 auto}
.ef-demo-options.industry{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1000px}
.ef-demo-options.business{grid-template-columns:repeat(5,minmax(0,1fr));max-width:1060px}
.ef-demo-option{
  position:relative;min-height:154px;border:1.5px solid #dfe6e2;background:#fff;border-radius:20px;
  padding:24px 22px 20px;text-align:left;color:#26332e;transition:.18s ease;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
}
.ef-demo-option:hover{border-color:#b8d9c6;transform:translateY(-2px);box-shadow:0 14px 36px rgba(16,37,31,.07)}
.ef-demo-option.selected{border-color:#178b55;background:#effaf3;box-shadow:0 0 0 1px #178b55 inset}
.ef-demo-option.selected:after{
  content:"✓";position:absolute;right:14px;top:14px;width:23px;height:23px;border-radius:50%;
  background:#178b55;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900
}
.ef-demo-icon{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:24px;
}
.ef-demo-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ef-demo-icon.fresh{background:#eaf9ef;color:#168653}
.ef-demo-icon.meat{background:#fff0ec;color:#d45f50}
.ef-demo-icon.grocery{background:#eef4ff;color:#3d72d9}
.ef-demo-icon.processed{background:#fff5df;color:#b77717}
.ef-demo-icon.wholesale{background:#eaf9ef;color:#168653}
.ef-demo-icon.manufacturer{background:#f1edff;color:#7457cf}
.ef-demo-icon.retail{background:#fff4e9;color:#c57722}
.ef-demo-icon.distributor{background:#eaf7fb;color:#21869b}
.ef-demo-icon.importer{background:#eef4ff;color:#3c72d8}
.ef-demo-option span:last-child{font-size:18px;line-height:1.18;font-weight:780;letter-spacing:-.025em}
.ef-demo-actions{
  display:flex;align-items:center;justify-content:center;gap:12px;margin:42px auto 0
}
.ef-demo-btn{
  min-width:150px;height:48px;border-radius:12px;border:1px solid #d7e1dc;background:#fff;color:#26332e;
  padding:0 22px;font-size:13px;font-weight:850;transition:.18s ease
}
.ef-demo-btn.primary{background:#10251f;border-color:#10251f;color:#fff}
.ef-demo-btn:disabled{opacity:.28;cursor:not-allowed;transform:none!important}
.ef-demo-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(16,37,31,.09)}
.ef-demo-backlink{background:transparent;border-color:transparent;color:#71827b}

/* Step 3 */
.ef-demo-stage[data-step="3"]{max-width:1100px}
.ef-demo-booking-title{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px
}
.ef-demo-booking-title h2{font-size:30px;line-height:1.08;letter-spacing:-.04em;margin:0}
.ef-demo-booking-chips{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.ef-demo-booking-chips span{
  padding:7px 10px;border-radius:999px;background:#f4f8f5;border:1px solid #e3ebe7;
  color:#61756d;font-size:10px;font-weight:850
}
.ef-demo-booking-grid{
  display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:stretch
}
.ef-demo-details,.ef-demo-scheduler{
  border:1px solid #dfe7e3;border-radius:22px;background:#fff;box-shadow:0 10px 30px rgba(16,37,31,.04)
}
.ef-demo-details{padding:23px}
.ef-demo-panel-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:900;color:#178b55;margin-bottom:17px}
.ef-demo-field{display:grid;gap:6px;margin-bottom:13px}
.ef-demo-field:last-of-type{margin-bottom:0}
.ef-demo-field label{font-size:11px;font-weight:800;color:#53675f}
.ef-demo-field input{
  width:100%;height:45px;border:1px solid #dce5e0;border-radius:11px;padding:0 13px;
  outline:none;color:#10251f;background:#fff;font-size:13px
}
.ef-demo-field input:focus{border-color:#178b55;box-shadow:0 0 0 3px rgba(23,139,85,.08)}
.ef-demo-field input.invalid{border-color:#d66358;background:#fffafa}
.ef-demo-duration{
  margin-top:18px;padding-top:17px;border-top:1px solid #edf1ef;display:flex;justify-content:space-between;
  gap:12px;color:#7a8c85;font-size:11px
}
.ef-demo-duration strong{color:#10251f}
.ef-demo-scheduler{padding:20px;min-width:0}
.ef-demo-scheduler-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px
}
.ef-demo-scheduler-title strong{display:block;font-size:15px}
.ef-demo-scheduler-title span{display:block;font-size:10px;color:#84958e;margin-top:3px}
.ef-demo-tz{
  border:1px solid #e0e8e4;background:#f8faf9;color:#657970;border-radius:999px;padding:7px 10px;
  font-size:9px;font-weight:850;white-space:nowrap
}
.ef-demo-schedule-inner{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:17px}
.ef-demo-calendar{
  border:1px solid #edf1ef;border-radius:17px;padding:15px;min-width:0;background:#fbfdfc
}
.ef-demo-monthbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.ef-demo-monthbar strong{font-size:13px;letter-spacing:-.02em}
.ef-demo-monthnav{display:flex;gap:5px}
.ef-demo-monthnav button{
  width:30px;height:30px;border:1px solid #e0e8e4;border-radius:9px;background:#fff;color:#50655d;font-size:16px
}
.ef-demo-week,.ef-demo-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ef-demo-week{margin-bottom:5px}
.ef-demo-week span{text-align:center;font-size:8px;color:#94a29d;font-weight:900;text-transform:uppercase}
.ef-demo-day{
  aspect-ratio:1/1;border:0;border-radius:10px;background:transparent;color:#4c6058;font-size:10px;
  display:grid;place-items:center;transition:.14s ease
}
.ef-demo-day:not(:disabled):hover{background:#eef7f1;color:#10251f}
.ef-demo-day.today{font-weight:950;color:#178b55}
.ef-demo-day.selected{background:#178b55;color:#fff;font-weight:900}
.ef-demo-day:disabled{color:#cad2ce;cursor:not-allowed}
.ef-demo-day.blank{visibility:hidden}
.ef-demo-slots{min-width:0}
.ef-demo-slot-date{font-size:11px;font-weight:850;color:#52665e;margin-bottom:10px;min-height:16px}
.ef-demo-slot-list{display:grid;gap:7px;max-height:278px;overflow:auto;padding-right:3px}
.ef-demo-slot-list::-webkit-scrollbar{width:5px}
.ef-demo-slot-list::-webkit-scrollbar-thumb{background:#d6e1dc;border-radius:99px}
.ef-demo-slot{
  width:100%;height:39px;border:1px solid #dce6e1;background:#fff;border-radius:10px;
  color:#365047;font-size:11px;font-weight:850;transition:.14s ease
}
.ef-demo-slot:hover{border-color:#8fc7a7;background:#f7fbf8}
.ef-demo-slot.selected{background:#10251f;color:#fff;border-color:#10251f}
.ef-demo-no-slots{
  border:1px dashed #dce5e0;border-radius:11px;padding:14px 10px;text-align:center;
  color:#8a9994;font-size:10px
}
.ef-demo-error{display:none;margin-top:13px;padding:10px 12px;border-radius:10px;background:#fff1ee;color:#a1493f;font-size:10px}
.ef-demo-error.show{display:block}
.ef-demo-book-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.ef-demo-book-actions .ef-demo-btn{min-width:132px}
.ef-demo-book-actions .ef-demo-btn.primary{min-width:190px}

/* confirmation */
.ef-demo-success{display:none;max-width:650px;margin:72px auto;text-align:center}
.ef-demo-success.show{display:block;animation:efStageIn .24s ease both}
.ef-demo-success-icon{
  width:70px;height:70px;margin:0 auto 20px;border-radius:50%;background:#eaf9ef;color:#178b55;
  display:grid;place-items:center;font-size:30px;font-weight:950
}
.ef-demo-success h2{font-size:34px;letter-spacing:-.04em;margin:0 0 10px}
.ef-demo-success p{font-size:13px;line-height:1.65;color:#6d7f78;max-width:510px;margin:0 auto}
.ef-demo-success-box{
  margin:24px auto 0;max-width:520px;border:1px solid #e0e8e4;border-radius:16px;
  background:#fafcfb;padding:17px;text-align:left;display:grid;gap:8px
}
.ef-demo-success-row{display:flex;justify-content:space-between;gap:18px;font-size:11px;color:#7a8c85}
.ef-demo-success-row strong{color:#10251f;text-align:right}

@media(max-width:1020px){
  .ef-demo-body{padding:38px 30px 30px}
  .ef-demo-options.business{grid-template-columns:repeat(3,1fr)}
  .ef-demo-booking-grid{grid-template-columns:300px minmax(0,1fr)}
  .ef-demo-schedule-inner{grid-template-columns:1fr 165px}
}
@media(max-width:820px){
  .ef-demo-dialog{height:calc(100vh - 24px);border-radius:22px}
  .ef-demo-modal{padding:12px}
  .ef-demo-options.industry{grid-template-columns:1fr 1fr}
  .ef-demo-options.business{grid-template-columns:1fr 1fr}
  .ef-demo-booking-grid{grid-template-columns:1fr}
  .ef-demo-schedule-inner{grid-template-columns:1fr 190px}
}
@media(max-width:600px){
  .ef-demo-top{padding:0 17px;height:64px}
  .ef-demo-body{padding:28px 17px 24px}
  .ef-demo-stepmeta{display:none}
  .ef-demo-heading{margin-bottom:25px}
  .ef-demo-heading h2{font-size:30px}
  .ef-demo-options.industry,.ef-demo-options.business{grid-template-columns:1fr 1fr;gap:10px}
  .ef-demo-option{min-height:126px;padding:17px 15px}
  .ef-demo-icon{width:45px;height:45px;border-radius:13px;margin-bottom:16px}
  .ef-demo-icon svg{width:25px;height:25px}
  .ef-demo-option span:last-child{font-size:15px}
  .ef-demo-actions{margin-top:28px}
  .ef-demo-btn{min-width:0;flex:1}
  .ef-demo-booking-title{align-items:flex-start;flex-direction:column}
  .ef-demo-booking-title h2{font-size:27px}
  .ef-demo-booking-chips{justify-content:flex-start}
  .ef-demo-schedule-inner{grid-template-columns:1fr}
  .ef-demo-slot-list{grid-template-columns:1fr 1fr;max-height:none}
  .ef-demo-slot-date{margin-top:2px}
  .ef-demo-book-actions{flex-direction:column-reverse}
  .ef-demo-book-actions .ef-demo-btn{width:100%}
}
