/* Zhaket Academy — single course page CSS (from pages.css). Loaded only on is_product(). */

/* ---------- 7. صفحه تکی دوره ---------- */
.course-page{display:grid;grid-template-columns:1fr 340px;grid-template-rows:auto auto;
  gap:26px;align-items:start;padding:30px 0 0}
.cp-main{min-width:0;display:grid;gap:20px}
/* cp-main is split into --top/--bottom around .buy-box (see single-product.php) so
   that on mobile (single column, below) reviews land after the buy-box in source
   order instead of after all main content -- desktop keeps the original look by
   explicitly placing both halves in column 1 and letting buy-box span both rows. */
.cp-main--top{grid-column:1;grid-row:1}
.cp-main--bottom{grid-column:1;grid-row:2}
.buy-box{grid-column:2;grid-row:1/3}
.card-box{background:#fff;border:1px solid var(--g3);border-radius:var(--r);
  box-shadow:var(--sh-xs);padding:22px}
.card-box>h2{font-size:19px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.card-box>h2 .ic{width:36px;height:36px;border-radius:var(--r-sm);background:var(--orange1);
  color:var(--orange5);display:grid;place-items:center;flex:none}

/* Legacy widget areas (course_page_1/2 sidebar ad banners) */
.widget-area{display:flex;flex-direction:column;gap:16px}
.widget-area .widget{background:#fff;border:1px solid var(--g3);border-radius:var(--r);
  box-shadow:var(--sh-xs);padding:16px}
.widget-area .widget .widget-title{font-size:15px;font-weight:700;color:var(--g10);margin:0 0 12px}
.widget-area .widget img{display:block;width:100%;height:auto;border-radius:var(--r-sm)}
.widget-area .widget .wp-block-image,
.widget-area .widget .wp-block-gallery{margin:0}
.widget-area .widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.widget-area .widget li{font-size:13.5px}
.widget-area .widget li a{color:var(--g8);text-decoration:none}
.widget-area .widget li a:hover{color:var(--orange5)}

.cp-player{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  display:grid;place-items:center;color:#fff;text-align:center;padding:20px}
.cp-player .play{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.94);
  color:var(--orange5);display:grid;place-items:center;box-shadow:var(--sh-m);
  position:absolute;transition:.2s;cursor:pointer}
.cp-player .play:hover{transform:scale(1.07)}
.cp-player .ttl{position:absolute;bottom:18px;inset-inline-end:20px;text-align:start}
.cp-player .ttl b{font-size:20px;display:block;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.cp-player .ttl span{font-size:12.5px;opacity:.85}

/* باکس خرید sticky */
.buy-box{position:sticky;top:96px;display:grid;gap:16px}
.buy-card{background:#fff;border:1px solid var(--g3);border-radius:var(--r);
  box-shadow:var(--sh-s);overflow:hidden}
.buy-price{padding:20px;text-align:center;border-bottom:1px dashed var(--g4)}
.buy-price .old{font-size:13px;color:var(--price-old);text-decoration:line-through;display:block}
.buy-price .now{font-size:26px;font-weight:800;color:var(--g9);display:block;margin-top:4px}
.buy-price .now small{font-size:13px;font-weight:600;color:var(--g7)}
.buy-price .now.free{color:var(--green-d)}
.buy-price .save{display:inline-block;margin-top:9px;background:var(--redL);color:var(--red);
  font-size:12px;font-weight:700;padding:5px 12px;border-radius:var(--r-pill)}
.buy-actions{padding:16px;display:grid;gap:10px}
.btn-buy{background:#5CB531;color:#fff;box-shadow:0 8px 20px rgba(92,181,49,.28)}
.btn-buy:hover{background:#4E9E28}
.enrolled{background:linear-gradient(120deg,#2FBFA0,#37CFAE);color:#fff;
  height:52px;border-radius:var(--r-btn);display:flex;align-items:center;justify-content:center;
  gap:9px;font-weight:700;font-size:15px;box-shadow:0 8px 20px rgba(47,191,160,.28)}
.snapp-row{display:flex;align-items:center;gap:11px;padding:12px 14px;background:var(--blueL);
  border-radius:var(--r-sm);margin:0 16px 16px}
.snapp-row .lg{width:36px;height:36px;flex:none}
.snapp-row b{font-size:13px;display:block}
.snapp-row span{font-size:11.5px;color:var(--g7)}
.guarantee{display:flex;align-items:center;gap:11px;padding:14px 16px;border-top:1px solid var(--g3)}
.guarantee .ic{width:38px;height:38px;border-radius:var(--r-sm);background:var(--greenL);
  color:var(--green-d);display:grid;place-items:center;flex:none}
.guarantee b{font-size:13px;display:block}
.guarantee span{font-size:11.5px;color:var(--g6)}

.specs{display:grid;gap:1px;background:var(--g3);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--g3)}
.specs .row{background:#fff;display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13px}
.specs .row .k{color:var(--g7);display:flex;align-items:center;gap:8px}
.specs .row .k svg{color:var(--g5);flex:none}
.specs .row .v{margin-inline-start:auto;font-weight:600;color:var(--g9);text-align:end}
.progress-row{background:#fff;padding:14px 16px}
.progress-row .t{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:9px}
.progress-row .t b{color:var(--orange5)}

.tutor-mini{display:flex;align-items:center;gap:12px;padding:13px 0}
.tutor-mini+.tutor-mini{border-top:1px solid var(--g3)}
.tutor-mini .av{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--orange1),var(--orange2));color:var(--orange5)}
.tutor-mini b{font-size:14px;display:block}
.tutor-mini span{font-size:12px;color:var(--g6);display:block;margin-top:3px}
.tutor-mini .so{margin-inline-start:auto;display:flex;gap:6px}
.tutor-mini .so a{width:30px;height:30px;border-radius:var(--r-xs);background:var(--g2);
  color:var(--g6);display:grid;place-items:center;transition:.15s}
.tutor-mini .so a:hover{background:var(--orange1);color:var(--orange5)}

/* ---------- 8. آکاردئون (سرفصل و سوالات) ---------- */
.acc{border:1px solid var(--g3);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.acc+.acc{margin-top:10px}
.acc-top{width:100%;display:flex;align-items:center;gap:12px;padding:15px 16px;
  text-align:start;font-size:14.5px;font-weight:600;color:var(--g9);transition:.15s}
.acc-top:hover{background:var(--g1)}
.acc-top .num{width:28px;height:28px;border-radius:var(--r-xs);background:var(--orange1);
  color:var(--orange6);font-size:12.5px;font-weight:700;display:grid;place-items:center;flex:none}
.acc-top .meta{margin-inline-start:auto;font-size:12px;color:var(--g6);font-weight:500;
  display:flex;align-items:center;gap:12px;flex:none}
.acc-top .ch{transition:.22s;color:var(--g5)}
.acc.open .acc-top{background:var(--orange1);color:var(--orange6)}
.acc.open .acc-top .ch{transform:rotate(180deg);color:var(--orange5)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc.open .acc-body{max-height:900px}
.acc-in{padding:6px 16px 16px}
.acc-in p{font-size:13.5px;color:var(--g7);line-height:2}
.lesson{display:flex;align-items:center;gap:11px;padding:11px 4px;font-size:13.5px;color:var(--g8)}
.lesson+.lesson{border-top:1px dashed var(--g4)}
.lesson .ic{color:var(--g5);flex:none;display:grid}
.lesson .tm{margin-inline-start:auto;font-size:12px;color:var(--g6);flex:none}
.lesson .free-b{background:var(--greenL);color:var(--green-d);font-size:10.5px;font-weight:700;
  padding:3px 9px;border-radius:var(--r-pill);flex:none}
.lesson .dl-b{background:var(--blueL);color:var(--blue);font-size:10.5px;font-weight:700;
  padding:3px 9px;border-radius:var(--r-pill);flex:none;display:inline-flex;align-items:center;gap:4px}
.lesson a.dl-b:hover{background:var(--blue);color:#fff}
.lesson.locked{color:var(--g6)}

/* ---------- 9. نمونه جلسات رایگان ---------- */
.free-preview{background:linear-gradient(135deg,var(--greenL),#fff);border:1px solid #DCEFC8}
.free-preview>h2 .ic{background:#E6F6D8;color:var(--green-d)}

/* ---------- 10. خلاصه امتیاز و دیدگاه ---------- */
.rate-sum{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  padding-bottom:20px;border-bottom:1px solid var(--g3);margin-bottom:20px}
.rate-big{text-align:center;flex:none}
.rate-big b{font-size:42px;font-weight:800;line-height:1;color:var(--g9)}
.rate-big .st{color:var(--orange3);font-size:15px;margin-top:7px;direction:ltr}
.rate-big span{font-size:12px;color:var(--g6);display:block;margin-top:5px}
.rate-bars{display:grid;gap:7px}
.rate-bars .rb{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--g6)}
.rate-bars .rb .bar{flex:1;height:7px;background:var(--g3);border-radius:99px;overflow:hidden}
.rate-bars .rb .bar i{display:block;height:100%;background:var(--orange3);border-radius:99px}
.rate-bars .rb .n{width:26px;text-align:end;flex:none}

.cmt{padding:18px 0}
.cmt+.cmt{border-top:1px solid var(--g3)}
.cmt-head{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.cmt-head .av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--orange1),var(--orange2));color:var(--orange5)}
.cmt-head b{font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cmt-head .dt{font-size:11.5px;color:var(--g6);display:block;margin-top:3px}
.cmt-head .st{margin-inline-start:auto;color:var(--orange3);font-size:12px;direction:ltr;flex:none}
.cmt p{font-size:13.5px;line-height:2.1;color:var(--g8)}
.cmt .rec{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--green-d);background:var(--greenL);padding:4px 10px;border-radius:var(--r-pill);margin-bottom:9px}
.cmt-reply-btn{margin-top:8px;padding:5px 14px;border:1px solid var(--g3);border-radius:var(--r-btn);
  background:#fff;color:var(--g7);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.cmt-reply-btn:hover{border-color:var(--orange3);color:var(--orange6);background:var(--orange1)}
.cmt-replying{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;border-radius:var(--r-sm);background:var(--orange1);color:var(--orange6);font-size:13px;font-weight:600}
.cmt-replying[hidden],.review-rating-row[hidden]{display:none!important}
.cmt-replying button{border:0;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.cmt-reply{margin-inline-start:34px;margin-top:14px;padding:14px;background:var(--g1);
  border-radius:var(--r-sm);border-inline-start:2.5px solid var(--orange2)}
.cmt-rules{background:var(--yellowL);border:1px solid #FFE4A3;border-radius:var(--r-sm);
  padding:15px 17px;margin:20px 0}
.cmt-rules b{font-size:13.5px;display:block;margin-bottom:9px}
.cmt-rules li{font-size:12.5px;color:var(--g7);line-height:2;list-style:none;
  padding-inline-start:16px;position:relative}
.cmt-rules li::before{content:"•";position:absolute;inset-inline-start:2px;color:var(--orange)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--g8)}
.field label .req{color:var(--red)}
.input,.textarea,.select{width:100%;border:1px solid var(--g4);border-radius:var(--r-sm);
  background:#fff;padding:0 14px;height:48px;font-size:14px;outline:none;transition:.16s;color:var(--g10)}
.textarea{height:auto;padding:13px 14px;line-height:2;resize:vertical;min-height:120px;font-family:inherit}
.input::placeholder,.textarea::placeholder{color:var(--g5)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--g5)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange1)}
.select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23878F9B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center;padding-inline-end:40px}
.field .hint{font-size:11.5px;color:var(--g6)}
.field .err{font-size:11.5px;color:var(--red)}

.prose{font-size:15px;line-height:2.3;color:var(--g8)}
.prose > *+*{margin-top:18px}
.prose h2{font-size:21px;color:var(--g10);margin-top:34px;line-height:1.6}
.prose h3{font-size:18px;color:var(--g10);margin-top:26px;line-height:1.6}
.prose a{color:var(--orange6);font-weight:600;border-bottom:1px solid var(--orange2)}
.prose ul,.prose ol{padding-inline-start:22px;display:grid;gap:9px}
.prose li{line-height:2.1}
.prose ul li{list-style:none;position:relative}
.prose ul li::before{content:"";position:absolute;inset-inline-start:-18px;top:13px;
  width:6px;height:6px;border-radius:50%;background:var(--orange3)}
.prose blockquote{border-inline-start:3px solid var(--orange);background:var(--orange1);
  padding:16px 18px;border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--g9);font-size:14.5px}
.prose .figure{border-radius:var(--r);overflow:hidden;aspect-ratio:16/8;display:grid;
  place-items:center;color:#fff;font-weight:700;text-align:center;padding:20px}
.prose .cap{font-size:12px;color:var(--g6);text-align:center;margin-top:8px}
.prose table{width:100%;border-collapse:collapse;font-size:13.5px;
  border:1px solid var(--g3);border-radius:var(--r-sm);overflow:hidden}
.prose th{background:var(--g2);font-weight:700;color:var(--g9)}
.prose th,.prose td{padding:11px 14px;border-bottom:1px solid var(--g3);text-align:start}

.spec-box{background:#fff;border:1px solid var(--g3);border-radius:var(--r);
  box-shadow:var(--sh-xs);overflow:hidden}
.spec-box>h3{font-size:14.5px;padding:13px 15px;border-bottom:1px solid var(--g3);
  display:flex;align-items:center;gap:10px}
.spec-box>h3 .ic{width:30px;height:30px;border-radius:var(--r-xs);background:var(--orange1);
  color:var(--orange5);display:grid;place-items:center;flex:none}
.spec-hi{display:grid;grid-template-columns:repeat(3,1fr);
  background:linear-gradient(135deg,var(--orange1),#FFFCF7);border-bottom:1px solid var(--g3)}
.spec-hi .h{padding:14px 6px;text-align:center;position:relative}
.spec-hi .h+.h::before{content:"";position:absolute;inset-block:12px;inset-inline-start:0;
  width:1px;background:var(--orange2)}
.spec-hi b{display:block;font-size:18px;font-weight:800;color:var(--orange6);
  line-height:1.5;direction:ltr}
.spec-hi span{font-size:11px;color:var(--g7)}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--g3)}
.spec-grid .s{background:#fff;padding:12px 13px;display:flex;align-items:center;
  gap:10px;min-width:0}
.spec-grid .s.full{grid-column:1/-1}
.spec-grid .s .i{width:32px;height:32px;border-radius:var(--r-xs);background:var(--g1);
  color:var(--g6);display:grid;place-items:center;flex:none;transition:.16s}
.spec-grid .s:hover .i{background:var(--orange1);color:var(--orange5)}
.spec-grid .s .k{font-size:11px;color:var(--g6);display:block;line-height:1.6}
.spec-grid .s .v{font-size:12.8px;font-weight:700;color:var(--g9);display:block;line-height:1.7}
.spec-foot{display:flex;align-items:center;gap:8px;padding:11px 15px;font-size:11.5px;
  color:var(--g6);border-top:1px solid var(--g3);background:var(--g1)}
.spec-foot svg{color:var(--green-d);flex:none}

/* ==========================================================================
   ۲۲. نوار خرید چسبان موبایل
   ========================================================================== */
.buy-bar{position:fixed;inset-inline:0;bottom:0;z-index:90;display:none;
  align-items:center;gap:9px;padding:10px 14px;background:#fff;
  border-top:1px solid var(--g3);box-shadow:0 -8px 24px rgba(31,32,37,.1);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.buy-bar.on{transform:none}
.buy-bar .p{flex:none;line-height:1.4;min-width:0}
.buy-bar .p .old{display:block;font-size:10.5px;color:var(--price-old);text-decoration:line-through}
.buy-bar .p .now{font-size:15px;font-weight:800;color:var(--g9);white-space:nowrap}
.buy-bar .p .now small{font-size:10.5px;font-weight:600;color:var(--g7)}
.buy-bar .btn{flex:1;min-width:0;padding:0 12px}
.buy-bar .btn-outline{flex:none;width:auto}
@media (max-width:980px){ .buy-bar{display:flex} }


@media (max-width:1180px){.course-page{grid-template-columns:1fr 300px}}
@media (max-width:980px){
  .course-page{grid-template-columns:1fr;grid-template-rows:none}
  /* Was order:-1 (buy-box pushed above all course content, including the
     intro video) -- the reference site leads with the video/cover and
     description on mobile, keeping the buy-box further down (right before
     reviews, matching stage) and relying on .buy-bar (the fixed bottom CTA,
     below) for an always-reachable purchase button. Reset the desktop
     column/row placement so source order applies: player -> about ->
     curriculum -> faq -> buy-box -> reviews. */
  .cp-main--top,.cp-main--bottom,.buy-box{grid-column:1;grid-row:auto}
  .buy-box{position:static}
  /* Old theme hides these sidebar ad banners entirely on mobile (a separate,
     currently-empty course_page_mobile area was used there instead). */
  .buy-box .widget-area{display:none}
}
@media (max-width:720px){
  .form-grid{grid-template-columns:1fr}
  .card-box{padding:16px}
  .card-box>h2{font-size:16.5px}
  .rate-sum{grid-template-columns:1fr;gap:16px}
  .cp-player .ttl b{font-size:15px}
  .prose{font-size:14px;line-height:2.15}
  .prose h2{font-size:18px}
  .prose h3{font-size:16px}
}
.ph-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ph-meta__item{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--g7)}
.ph-meta__star{color:var(--orange3);display:inline-flex}
.ph-meta__item b{color:var(--g9)}
.curriculum-summary,.spot-receive__lead{font-size:13px;color:var(--g6);margin:-8px 0 16px;line-height:2}
.free-preview__lead{font-size:13.5px;color:var(--g7);line-height:2;margin-bottom:14px}
.progress-row{border-top:1px solid var(--g3)}
.progress-row .bar{height:7px;background:var(--g3);border-radius:99px;overflow:hidden}
.progress-row .bar i{display:block;height:100%;background:var(--orange3);border-radius:99px}
.progress-row__meta{font-size:11.5px;color:var(--g6);margin-top:9px}
.buy-actions--owned{padding:16px}
.spot-receive{background:linear-gradient(135deg,#E9FBF6,#fff);border-color:#BFEDE1}
.spot-receive>h2 .ic{background:#D6F5EC;color:#1F9C80}
.spot-receive__actions{display:flex;gap:10px;flex-wrap:wrap}
.lesson--playable{cursor:pointer}
.lesson--playable:hover{color:var(--orange6)}
.cp-player__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.cp-player.is-playing .play,.cp-player.is-playing .ttl{display:none}
.tutor-mini .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.single-product .woocommerce-breadcrumb{display:none!important}
.review-login-note{font-size:13.5px;color:var(--g7);margin-top:12px}
.cmt-form-msg{margin:0 0 12px;padding:12px 14px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.8}
.cmt-form-msg.is-ok{background:#E9FBF6;color:#1F9C80;border:1px solid #BFEDE1}
.cmt-form-msg.is-err{background:var(--redL);color:var(--red);border:1px solid #f3c4c4}
.cmt-login-card{margin-top:18px;padding:18px 16px;border:1px dashed var(--g4);border-radius:var(--r-sm);
  background:var(--g1);text-align:center}
.cmt-login-card b{display:block;font-size:15px;color:var(--g9);margin-bottom:14px}
.cmt-login-card p{font-size:13px;color:var(--g6);line-height:1.9;margin:0 0 14px}
.cmt-login-card .btn{display:inline-flex}
.cmt-empty{font-size:13.5px;color:var(--g6);padding:8px 0 4px}
.cmt-pager{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:22px;flex-wrap:wrap}
.cmt-pager__btn{min-width:42px;height:42px;padding:0 12px;border-radius:var(--r-btn);
  display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--g7);
  background:#fff;border:1px solid var(--g3);cursor:pointer;font-family:inherit;transition:.15s}
.cmt-pager__btn:hover{border-color:var(--orange3);color:var(--orange6)}
.cmt-pager__btn.on{background:var(--orange);border-color:var(--orange);color:#fff;
  box-shadow:0 6px 14px rgba(255,150,6,.3)}
#reviews.is-loading-reviews .cmt-list,#reviews.is-loading-reviews [data-reviews-pager]{opacity:.45;pointer-events:none}
.cp-player--frame-fallback .cp-player__video{z-index:0}
.cp-player--frame-fallback .play,.cp-player--frame-fallback .ttl{z-index:1;position:relative}
.form-grid textarea,.form-grid select{width:100%;border:1px solid var(--g4);border-radius:var(--r-sm);background:#fff;padding:13px 14px;font-size:14px;outline:none;font-family:inherit;line-height:2;min-height:48px}
.form-grid textarea{min-height:120px;resize:vertical}
.form-grid select{height:48px;padding-block:0}
.star-rate{display:flex;gap:6px}
.star-rate .star{appearance:none;background:none;border:none;padding:0;cursor:pointer;
  font-size:26px;line-height:1;color:var(--g4);transition:color .15s,transform .15s}
.star-rate .star:hover,.star-rate .star.on{color:var(--orange)}
.star-rate .star:active{transform:scale(.92)}
body.has-buybar{padding-bottom:76px}
.zhaket-lesson-modal{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:rgba(20,22,28,.72);padding:20px}
.zhaket-lesson-modal.on{display:grid}
.zhaket-lesson-modal__box{width:min(920px,100%);background:#000;border-radius:var(--r);overflow:hidden;position:relative}
.zhaket-lesson-modal__box video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.zhaket-lesson-modal__close{position:absolute;top:10px;inset-inline-end:10px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--g9);display:grid;place-items:center;border:0;cursor:pointer;font-size:22px;line-height:1}
.zhaket-lesson-modal.is-loading .zhaket-lesson-modal__box::after{content:"";position:absolute;inset:0;margin:auto;width:38px;height:38px;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:zhaket-spin .8s linear infinite}
@keyframes zhaket-spin{to{transform:rotate(360deg)}}
.field input[type=text],.field input[type=email],.field input[type=url]{width:100%;border:1px solid var(--g4);border-radius:var(--r-sm);background:#fff;padding:0 14px;height:48px;font-size:14px;outline:none}