/* =============================================================
   B03 LIVEJOIN REFINEMENT — 2026-10-02
   Scoped public-home + compact order-page presentation.
   ============================================================= */

/* -------------------- PUBLIC HOME -------------------- */
.public-body .b03-public-home{
  min-height:calc(100vh - 72px);
  display:grid;
  align-items:center;
  padding:46px 0 54px;
  background:
    radial-gradient(circle at 14% 14%,rgba(104,23,245,.08),transparent 27%),
    radial-gradient(circle at 88% 70%,rgba(41,166,255,.07),transparent 25%),
    #f8f8fc;
}
.b03-public-hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.72fr);
  align-items:center;
  gap:64px;
}
.b03-public-copy{max-width:680px}
.b03-public-copy .eyebrow{display:block;margin-bottom:10px;font-size:.66rem;letter-spacing:.15em}
.b03-public-copy h1{
  max-width:700px;
  margin:0 0 16px;
  color:#171a31;
  font-size:clamp(2.55rem,5vw,4.35rem);
  line-height:1.01;
  letter-spacing:-.052em;
}
.b03-public-copy>p{
  max-width:610px;
  margin:0;
  color:#73778c;
  font-size:1.03rem;
  line-height:1.7;
}
.b03-public-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.b03-public-actions .btn{min-width:132px;min-height:44px;padding:10px 17px;border-radius:11px;font-size:.78rem}
.b03-public-points{display:flex;flex-wrap:wrap;gap:16px 22px;margin-top:22px;color:#5e6277;font-size:.72rem;font-weight:750}
.b03-public-points span{display:inline-flex;align-items:center;gap:7px}
.b03-public-points i{width:7px;height:7px;border-radius:50%;background:#6b36e6;box-shadow:0 0 0 4px rgba(107,54,230,.08)}
.b03-public-visual{
  position:relative;
  width:min(370px,100%);
  aspect-ratio:1/1;
  justify-self:end;
  display:grid;
  place-items:center;
}
.b03-public-visual::before{
  content:"";
  position:absolute;
  width:82%;height:82%;
  border-radius:36%;
  background:linear-gradient(145deg,rgba(110,55,233,.1),rgba(30,166,255,.07));
  transform:rotate(9deg);
}
.b03-telegram-tile{
  position:relative;
  z-index:2;
  width:190px;height:190px;
  display:grid;place-items:center;
  border:1px solid #e3e4ec;
  border-radius:42px;
  background:#fff;
  box-shadow:0 24px 64px rgba(32,34,61,.12);
}
.b03-telegram-tile img{width:118px!important;height:118px!important;object-fit:contain!important;border-radius:28px!important}
.b03-visual-card{
  position:absolute;z-index:3;
  min-width:105px;
  padding:10px 13px;
  border:1px solid rgba(225,226,237,.95);
  border-radius:12px;
  background:rgba(255,255,255,.95);
  box-shadow:0 13px 30px rgba(35,38,66,.09);
}
.b03-visual-card small,.b03-visual-card strong{display:block}
.b03-visual-card small{color:#8a8da0;font-size:.56rem;font-weight:750}
.b03-visual-card strong{margin-top:1px;color:#25283d;font-size:.78rem}
.b03-visual-card-one{left:0;top:24%}
.b03-visual-card-two{right:-4px;bottom:23%}
.b03-visual-card-two strong{color:#0e9d6a}
.b03-minimal-footer{
  margin:0!important;
  padding:16px 0!important;
  background:#fff!important;
  color:#85889a!important;
  border-top:1px solid #e9eaf0!important;
}
.b03-minimal-footer .shell{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.68rem}
.b03-minimal-footer a{color:#5e35c9;font-weight:800}

/* -------------------- COMPACT ORDER PAGE -------------------- */
.b03-order-page{
  min-height:calc(100vh - 86px);
  padding:13px 16px 24px!important;
  background:#f5f6fa!important;
}
.b03-order-container{width:min(1010px,100%)!important;max-width:1010px!important;margin:0 auto!important}
.b03-order-card{
  overflow:hidden;
  border:1px solid #e3e5ed;
  border-radius:17px;
  background:#fff;
  box-shadow:0 15px 44px rgba(34,35,59,.075);
}
.b03-order-head{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 13px;
  border-bottom:1px solid #eceef3;
  background:#fff;
}
.b03-order-title{display:flex;align-items:center;gap:10px;min-width:0}
.b03-order-logo{
  width:43px;height:43px;flex:0 0 43px;
  display:grid;place-items:center;
  border:1px solid #e5e7ee;
  border-radius:12px;
  background:#fafafe;
}
.b03-order-logo img{width:29px!important;height:29px!important;object-fit:contain!important}
.b03-order-kicker{display:block;color:#6a35df;font-size:.53rem;font-weight:900;letter-spacing:.13em}
.b03-order-title h1{margin:1px 0 0!important;color:#24273a!important;font-size:1rem!important;letter-spacing:-.02em!important}
.b03-order-statuses{display:flex;align-items:stretch;gap:7px;flex:0 0 auto}
.b03-status-chip{
  min-width:108px;
  min-height:43px;
  display:grid;
  align-content:center;
  padding:6px 10px;
  border:1px solid #e5e7ee;
  border-radius:10px;
  background:#fafafe;
}
.b03-status-chip span{color:#878a9a;font-size:.5rem;font-weight:800}
.b03-status-chip strong{margin-top:1px;color:#2b2e41;font-size:.72rem;line-height:1.15}
.b03-available-chip{position:relative;padding-left:25px;background:#f8fffc;border-color:#dceee6}
.b03-available-chip i{position:absolute;left:10px;top:17px;width:7px;height:7px;border-radius:50%;background:#15ae76;box-shadow:0 0 0 3px rgba(21,174,118,.1)}
.b03-order-error{margin:9px 12px 0!important;padding:9px 11px!important;border-radius:9px!important;font-size:.7rem!important}
.b03-order-body{padding:12px}
.b03-order-section{
  min-width:0;
  border:1px solid #e8e9ef;
  border-radius:12px;
  background:#fff;
}
.b03-link-section{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:10px;padding:8px 9px}
.b03-section-label{display:flex;align-items:center;gap:7px;min-width:0}
.b03-section-label b{
  width:25px;height:25px;flex:0 0 25px;
  display:grid;place-items:center;
  border-radius:7px;
  background:#f0ecff;
  color:#6530da;
  font-size:.5rem;
}
.b03-section-label span{color:#303346;font-size:.68rem;font-weight:850}
.b03-link-input{
  min-height:40px;
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:center;
  border:1px solid #dfe1e8;
  border-radius:9px;
  background:#fafafd;
}
.b03-link-input:focus-within{border-color:#a58bed;box-shadow:0 0 0 3px rgba(102,49,219,.06);background:#fff}
.b03-link-input>span{display:grid;place-items:center;color:#6734d9;font-size:.8rem;font-weight:900}
.b03-link-input input{
  width:100%!important;height:38px!important;min-height:38px!important;
  padding:0 9px 0 0!important;
  border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;
  color:#2d3043!important;font-size:.7rem!important;
}
.b03-middle-grid{display:grid;grid-template-columns:minmax(230px,.65fr) minmax(0,1.35fr);gap:10px;margin-top:10px}
.b03-quantity-section,.b03-duration-section{padding:10px}
.b03-quantity-section .b03-section-label,.b03-duration-section .b03-section-label{margin-bottom:8px}
.b03-quantity-line{display:grid;gap:8px}
.b03-quantity-control{
  height:42px;
  display:grid;
  grid-template-columns:40px 1fr 40px;
  overflow:hidden;
  border:1px solid #dfe1e8;
  border-radius:9px;
  background:#fafafd;
}
.b03-quantity-control button{
  border:0;background:transparent;color:#6030d0;cursor:pointer;font-size:1rem;font-weight:850;
  transition:background .15s ease,transform .15s ease;
}
.b03-quantity-control button:hover{background:#f0ecff}.b03-quantity-control button:active{transform:scale(.94)}
.b03-quantity-control input{
  min-width:0!important;width:100%!important;height:40px!important;min-height:40px!important;
  padding:0 4px!important;border:0!important;border-left:1px solid #e8e9ef!important;border-right:1px solid #e8e9ef!important;
  outline:0!important;box-shadow:none!important;background:#fff!important;text-align:center!important;
  color:#272a3c!important;font-size:.82rem!important;font-weight:900!important;-moz-appearance:textfield;
}
.b03-quantity-control input::-webkit-outer-spin-button,.b03-quantity-control input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.b03-qty-hints{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.b03-qty-hints span{padding:6px 8px;border-radius:8px;background:#f7f7fa;color:#858899;font-size:.51rem}
.b03-qty-hints strong{color:#45485b}
.b03-native-duration{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.b03-duration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.b03-duration-card{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 9px;
  border:1px solid #e1e3ea;
  border-radius:9px;
  background:#fafafd;
  color:#313448;
  cursor:pointer;
  text-align:left;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,transform .16s ease;
}
.b03-duration-card:hover{transform:translateY(-1px);border-color:#cabbf1;background:#fff}
.b03-duration-card.is-active{border-color:#6b35df;background:#f3efff;box-shadow:inset 0 0 0 1px #6b35df}
.b03-duration-card strong{font-size:.62rem;line-height:1.15}
.b03-duration-card span{color:#5e2ed0;font-size:.6rem;font-weight:900;white-space:nowrap}
.b03-duration-card.is-active strong,.b03-duration-card.is-active span{color:#5524c5}
.b03-order-footer{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
  padding:9px 10px;
  border:1px solid #e6e7ee;
  border-radius:11px;
  background:#fafafd;
}
.b03-total-price{margin-right:auto;display:grid;gap:0}
.b03-total-price span{color:#8a8d9f;font-size:.52rem;font-weight:800}
.b03-total-price strong{color:#232638;font-size:1.08rem;letter-spacing:-.03em}
.smmvai-ui .b03-place-order{
  width:210px!important;min-height:42px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:8px 9px 8px 13px!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,#6f39e7,#5622cc)!important;
  box-shadow:0 7px 17px rgba(79,37,176,.19)!important;
  font-size:.7rem!important;
}
.smmvai-ui .b03-place-order b{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.14);font-size:.74rem}
.smmvai-ui .b03-place-order:disabled{opacity:.45!important;box-shadow:none!important;transform:none!important}

@media(max-width:900px){
  .b03-public-hero{grid-template-columns:1fr .6fr;gap:34px}
  .b03-public-visual{width:min(300px,100%)}
  .b03-telegram-tile{width:156px;height:156px;border-radius:34px}.b03-telegram-tile img{width:96px!important;height:96px!important}
  .b03-middle-grid{grid-template-columns:220px minmax(0,1fr)}
}
@media(max-width:760px){
  .public-body .b03-public-home{min-height:calc(100vh - 64px);padding:42px 0 44px}
  .b03-public-hero{grid-template-columns:1fr;text-align:left;gap:28px}
  .b03-public-copy h1{font-size:clamp(2.25rem,11vw,3.35rem)}
  .b03-public-copy>p{font-size:.9rem}
  .b03-public-visual{justify-self:center;width:min(290px,84vw)}
  .b03-telegram-tile{width:144px;height:144px}.b03-telegram-tile img{width:88px!important;height:88px!important}
  .b03-visual-card{min-width:92px;padding:8px 10px}
  .b03-minimal-footer .shell{flex-direction:column;justify-content:center;gap:5px;text-align:center}

  .b03-order-page{padding:9px 8px 20px!important}
  .b03-order-card{border-radius:14px}
  .b03-order-head{min-height:0;align-items:flex-start;padding:9px;flex-direction:column}
  .b03-order-statuses{width:100%}.b03-status-chip{flex:1;min-width:0}
  .b03-order-body{padding:9px}
  .b03-link-section{grid-template-columns:1fr;gap:7px}
  .b03-middle-grid{grid-template-columns:1fr;gap:8px;margin-top:8px}
  .b03-duration-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .b03-order-footer{margin-top:8px}
}
@media(max-width:470px){
  .b03-public-actions{display:grid;grid-template-columns:1fr 1fr}.b03-public-actions .btn{width:100%;min-width:0}
  .b03-public-points{gap:10px 14px;font-size:.66rem}
  .b03-public-visual{width:min(260px,82vw)}
  .b03-telegram-tile{width:126px;height:126px;border-radius:29px}.b03-telegram-tile img{width:76px!important;height:76px!important}

  .b03-order-logo{width:39px;height:39px;flex-basis:39px}.b03-order-logo img{width:26px!important;height:26px!important}
  .b03-order-title h1{font-size:.92rem!important}
  .b03-status-chip{min-height:40px;padding:5px 8px}.b03-available-chip{padding-left:23px}.b03-available-chip i{left:9px;top:16px}
  .b03-duration-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .b03-duration-card{min-height:46px;padding:7px 8px}
  .b03-order-footer{display:grid;grid-template-columns:1fr 1.35fr;gap:7px;padding:7px 8px}
  .smmvai-ui .b03-place-order{width:100%!important;min-width:0!important}
  .b03-total-price strong{font-size:.98rem}
}
