/* Final visual tuning for premium inner pages. */

/* Order hero: neutralize legacy payment-page selectors from styles.css. */
.premium-order .pay-page .pay-head .eyebrow{
  display:inline-flex;
  width:auto;
  margin:0 0 12px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#8f9aa7;
  font-size:10px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:.13em;
  text-transform:uppercase;
  box-shadow:none;
}
.premium-order .pay-page .pay-head h1{
  margin:0;
  color:#f8fafc;
  font-size:clamp(42px,5vw,70px);
  line-height:.94;
  letter-spacing:-.06em;
}
.premium-order .pay-page .pay-head p{color:#9ba6b2}
.premium-order .pay-page .state-dot{margin-top:9px}

/* Recovery values should feel like fields, not black legacy panels. */
.premium-order .pay-page .copyline{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.premium-order .pay-page .copyline code{
  min-width:0;
  min-height:46px;
  padding:0 12px;
  border:1px solid #dfe2dd;
  border-radius:11px;
  background:#f8f9f6;
  color:#2f353b;
  font-family:inherit;
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.premium-order .pay-page .copyline button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  min-height:46px;
  padding:0 12px;
  border:1px solid #dce8b9;
  border-radius:11px;
  background:linear-gradient(180deg,#f3ffd7 0%,#e8ffb8 100%);
  color:#3e4c34;
  font-size:9px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 5px 12px rgba(109,145,48,.10),inset 0 1px 0 rgba(255,255,255,.72);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.premium-order .pay-page .copyline button:hover{
  transform:translateY(-1px);
  border-color:#b8d56b;
  background:linear-gradient(180deg,#f8ffdf 0%,#ddff98 100%);
  box-shadow:0 8px 18px rgba(109,145,48,.15),inset 0 1px 0 rgba(255,255,255,.8);
}
.premium-order .pay-page .copyline button:active{transform:translateY(0) scale(.98)}
.premium-order .pay-page .copyline button:focus-visible{outline:2px solid #9bc94c;outline-offset:3px}

/* Keep payment status legible inside the light card despite legacy dark styles. */
.premium-order .pay-page .waitbox{padding:12px 13px}
.premium-order .pay-page .waitbox b{color:#35352f}
.premium-order .pay-page .waitbox>div>span{color:#908d80;font-size:9px}
.premium-order .pay-page .status-message{color:#777e85;font-size:10px}

@media(max-width:700px){
  .premium-order .pay-page .pay-head .eyebrow{font-size:9px}
  .premium-order .pay-page .pay-head h1{font-size:42px}
  .premium-order .pay-page .copyline code{font-size:10px}
  .premium-order .pay-page .copyline button{min-width:88px;min-height:46px}

  /* Seven preparation screenshots become a swipeable rail instead of tiny tiles. */
  .premium-guide .guide-page .guide-warning .shot-grid{
    display:grid;
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(205px,68%);
    gap:9px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:2px 2px 8px;
    margin-left:-2px;
    margin-right:-2px;
  }
  .premium-guide .guide-page .guide-warning .shot-grid::-webkit-scrollbar{display:none}
  .premium-guide .guide-page .guide-warning .shot{scroll-snap-align:start}
}

@media(max-width:390px){
  .premium-order .pay-page .pay-head h1{font-size:38px}
  .premium-guide .guide-page .guide-warning .shot-grid{grid-auto-columns:72%}
}

@media(max-width:360px){
  .premium-order .pay-page .copyline{grid-template-columns:1fr}
  .premium-order .pay-page .copyline button{width:100%}
}

/* Order page: compact status flow with one clear primary action. */
.premium-order .pay-page .pay-surface{
  background:linear-gradient(180deg,#f7f5ef 0%,#efede6 100%);
}
.premium-order .pay-page .order-status-card{
  padding:28px;
  border-color:#dedbd2;
  background:#fff;
  box-shadow:0 18px 42px rgba(30,32,28,.07);
}
.premium-order .pay-page .order-card-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.premium-order .pay-page .order-card-topline .pill{margin:0}
.premium-order .pay-page .amount-chip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border:1px solid #dce7bd;
  border-radius:999px;
  background:#f2ffd5;
  color:#3d4a2e;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.premium-order .pay-page .order-status-card h2{
  max-width:650px;
  margin-top:17px;
  font-size:clamp(30px,4vw,48px);
  line-height:.98;
  letter-spacing:-.06em;
}
.premium-order .pay-page .order-intro{
  max-width:650px;
  margin:11px 0 0;
  color:#70756f;
  font-size:13px;
  line-height:1.5;
}
.premium-order .pay-page .order-progress{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:27px 0 25px;
  padding:0;
  list-style:none;
}
.premium-order .pay-page .order-progress li{
  position:relative;
  min-width:0;
  padding:12px 12px 13px;
  border:1px solid #e3e5df;
  border-radius:14px;
  background:#fafbf8;
}
.premium-order .pay-page .order-progress li:not(:last-child)::after{
  content:"";
  position:absolute;
  z-index:0;
  top:25px;
  right:-16px;
  width:20px;
  height:2px;
  background:#dfe3dc;
}
.premium-order .pay-page .order-progress li.is-done:not(:last-child)::after{background:#b8dc6a}
.premium-order .pay-page .order-progress li.is-active{border-color:#d2e893;background:#f8ffe9}
.premium-order .pay-page .order-progress li.is-error{border-color:#f2c8be;background:#fff7f4}
.premium-order .pay-page .order-progress li>span{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  margin-bottom:10px;
  border:1px solid #d8ddd5;
  border-radius:50%;
  background:#fff;
  color:#858b82;
  font-size:10px;
  font-weight:950;
}
.premium-order .pay-page .order-progress li.is-active>span{border-color:#ffb29f;background:#ff684f;color:#fff}
.premium-order .pay-page .order-progress li.is-done>span{border-color:#b8dc6a;background:#d9ff67;color:#2c3a1e;font-size:0}
.premium-order .pay-page .order-progress li.is-done>span::before{content:"✓";font-size:13px}
.premium-order .pay-page .order-progress li.is-error>span{border-color:#ffb29f;background:#fff0eb;color:#e3523c;font-size:0}
.premium-order .pay-page .order-progress li.is-error>span::before{content:"!";font-size:13px}
.premium-order .pay-page .order-progress b,.premium-order .pay-page .order-progress small{display:block}
.premium-order .pay-page .order-progress b{color:#252a25;font-size:11px}
.premium-order .pay-page .order-progress small{margin-top:4px;color:#8b9189;font-size:9px;line-height:1.3}
.premium-order .pay-page .order-apps-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 9px;
  padding-top:18px;
  border-top:1px solid #e6e7e2;
  color:#777d76;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.premium-order .pay-page .order-apps-heading strong{color:#1c211e;font-size:16px;letter-spacing:-.03em}
.premium-order .pay-page .order-status-card .waitbox{margin-top:15px}
.premium-order .pay-page .order-status-card .status-message{min-height:15px}
.premium-order .pay-page .codebox{padding:25px;background:#fff;box-shadow:0 18px 42px rgba(30,32,28,.055)}
.premium-order .pay-page .codebox h2{font-size:28px}
.premium-order .pay-page .codebox .order-side-note{margin-top:16px;background:#f3ffd9;border-color:#dcebb1;color:#59664a}
.premium-order .pay-page .codebox .copyline{margin-top:7px}
.premium-order .pay-page .codebox .copyline button{border:1px solid #d7e8a9}
.premium-order .pay-page .pay-bottom-actions{margin-top:22px}
.premium-order .pay-page .pay-bottom-actions>a.primary{background:#161b1f}
@media(max-width:700px){
  .premium-order .pay-page .order-status-card{padding:21px 17px}
  .premium-order .pay-page .order-status-card h2{font-size:35px}
  .premium-order .pay-page .order-progress{gap:7px;margin:22px 0 20px}
  .premium-order .pay-page .order-progress li{padding:10px 9px 11px}
  .premium-order .pay-page .order-progress li:not(:last-child)::after{right:-12px;width:14px}
  .premium-order .pay-page .order-progress b{font-size:10px}
  .premium-order .pay-page .order-progress small{font-size:8px}
  .premium-order .pay-page .codebox{padding:20px 17px}
}

@media(max-width:390px){
  .premium-order .pay-page .order-card-topline{align-items:flex-start}
  .premium-order .pay-page .order-status-card h2{font-size:31px}
  .premium-order .pay-page .order-progress li{padding:9px 7px}
  .premium-order .pay-page .order-progress li>span{width:22px;height:22px;margin-bottom:8px}
  .premium-order .pay-page .order-progress li:not(:last-child)::after{top:20px}
}

/* Final reference match: fewer boxes, one app row, and a real horizontal status line. */
.premium-order .pay-page .order-status-card{
  padding:30px 28px 25px;
  border-color:rgba(28,34,38,.10);
  box-shadow:0 18px 42px rgba(30,32,28,.06);
}
.premium-order .pay-page .order-status-card .order-card-topline .pill{
  padding:9px 13px 9px 10px;
  border-radius:999px;
  background:#eaffc9;
  color:#37731d;
  letter-spacing:.04em;
}
.premium-order .pay-page .order-status-card .order-card-topline .pill:before{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  background:#75c832;
  color:#fff;
  box-shadow:none;
  content:"•";
  font-size:15px;
}
.premium-order .pay-page .order-status-card.is-state-ready .order-card-topline .pill:before{
  content:"";
  width:8px;
  height:5px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.premium-order .pay-page .order-status-card.is-state-error .order-card-topline .pill:before,
.premium-order .pay-page .order-status-card.is-state-fulfillment_error .order-card-topline .pill:before{content:"!";background:#ff8b75}
.premium-order .pay-page .order-status-card h2{margin-top:19px;font-size:clamp(34px,4.2vw,50px)}
.premium-order .pay-page .order-intro{max-width:700px;margin-top:12px;color:#718097;font-size:16px;line-height:1.45}
.premium-order .pay-page .order-progress{
  display:flex;
  align-items:center;
  gap:0;
  margin:30px 14px 27px;
}
.premium-order .pay-page .order-progress li{
  display:flex;
  flex:1 1 0;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.premium-order .pay-page .order-progress li.is-active,
.premium-order .pay-page .order-progress li.is-error,
.premium-order .pay-page .order-progress li.is-done{
  border:0;
  background:transparent;
}
.premium-order .pay-page .order-progress li:not(:last-child)::after{
  position:static;
  flex:1 1 auto;
  width:auto;
  height:2px;
  margin:0 16px;
  background:#dfe8d5;
}
.premium-order .pay-page .order-progress li.is-done:not(:last-child)::after{background:#88d241}
.premium-order .pay-page .order-progress .progress-mark{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  margin:0;
  border:1px solid #dfe5dc;
  border-radius:50%;
  background:#fff;
  color:#8b948b;
  font-size:11px;
  font-weight:950;
  box-shadow:0 2px 0 rgba(21,26,24,.02);
}
.premium-order .pay-page .order-progress .progress-copy,
.premium-order .pay-page .order-progress li.is-active .progress-copy,
.premium-order .pay-page .order-progress li.is-done .progress-copy,
.premium-order .pay-page .order-progress li.is-error .progress-copy{
  position:static!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  flex:0 1 auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  z-index:auto!important;
}
.premium-order .pay-page .order-progress .progress-copy::before{content:none!important;display:none!important}
.premium-order .pay-page .order-progress li.is-active .progress-mark{border-color:#ffb4a3;background:#ff684f;color:#fff}
.premium-order .pay-page .order-progress li.is-done .progress-mark{border:0;background:#79cd31;color:#fff;font-size:0;box-shadow:0 0 0 6px #edffd7}
.premium-order .pay-page .order-progress li.is-done .progress-mark::before{
  content:"";
  display:block;
  width:15px;
  height:8px;
  border-left:3px solid currentColor;
  border-bottom:3px solid currentColor;
  transform:rotate(-45deg) translate(1px,-1px);
}
.premium-order .pay-page .order-progress li.is-error .progress-mark{border-color:#ffb4a3;background:#fff1ed;color:#ed684e;font-size:16px}
.premium-order .pay-page .order-progress .progress-copy{min-width:0;display:block}
.premium-order .pay-page .order-progress b{color:#1b2025;font-size:15px;line-height:1.15}
.premium-order .pay-page .order-progress small{margin-top:5px;color:#428c22;font-size:12px;line-height:1.15;white-space:nowrap}
.premium-order .pay-page .order-progress li:not(.is-done) small{color:#7f8b99}
.premium-order .pay-page #items{gap:10px;margin-top:0}
.premium-order .pay-page .payment-app{
  grid-template-columns:64px minmax(0,1fr) auto;
  min-height:116px;
  padding:14px 17px;
  border:1px solid #e0e4df;
  border-radius:16px;
  background:#fff;
}
.premium-order .pay-page .payment-icon{width:64px;height:64px;border-radius:16px;background:#edf1ed}
.premium-order .pay-page .payment-app-copy b{color:#101722;font-size:21px;letter-spacing:-.035em}
.premium-order .pay-page .payment-app-copy small{margin-top:7px;color:#8290a3;font-size:14px}
.premium-order .pay-page .payment-app-price{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-width:135px;
  padding-left:20px;
  border-left:1px solid #e2e5e1;
}
.premium-order .pay-page .payment-app-price small{color:#778396;font-size:13px}
.premium-order .pay-page .payment-app-price strong{color:#0d1520;font-size:30px;line-height:1;letter-spacing:-.055em}
.premium-order .pay-page .payment-app-install{display:none}
.premium-order .pay-page .order-status-card .waitbox{margin-top:16px}
.premium-order .pay-page .order-status-card.is-state-ready .waitbox{display:none}
.premium-order .pay-page .order-primary-action{
  display:grid;
  grid-template-columns:28px 1fr 28px;
  align-items:center;
  min-height:70px;
  margin-top:20px;
  padding:0 21px;
  border-radius:18px;
  background:linear-gradient(110deg,#ff594f 0%,#ff6b50 100%);
  box-shadow:0 14px 24px rgba(255,91,71,.17);
  font-size:20px;
  letter-spacing:-.025em;
}
.premium-order .pay-page .order-primary-action span{text-align:center}
.premium-order .pay-page .order-primary-action svg{width:25px;height:25px}
.premium-order .pay-page .order-primary-action .cta-arrow{justify-self:end}
.premium-order .pay-page .order-status-card.is-state-ready .status-message{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:19px;
  padding:17px 19px;
  border-radius:14px;
  background:#f7f8fb;
  color:#718097;
  font-size:14px;
}
.premium-order .pay-page .order-status-card.is-state-ready .status-message::before{
  content:"i";
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border:2px solid #708096;
  border-radius:50%;
  font-family:Georgia,serif;
  font-size:14px;
  font-weight:700;
}
.premium-order .pay-page .codebox{padding:31px 27px 25px;border-color:rgba(28,34,38,.10);box-shadow:0 18px 42px rgba(30,32,28,.055)}
.premium-order .pay-page .pay-side-column,
.premium-order .pay-page .pay-side-column>.order-card{min-width:0}
.premium-order .pay-page .codebox .pill{display:none}
.premium-order .pay-page .codebox h2{font-size:32px;letter-spacing:-.055em}
.premium-order .pay-page .codebox>p{margin-top:12px;color:#718097;font-size:16px;line-height:1.45}
.premium-order .pay-page .order-data-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:23px}
.premium-order .pay-page .order-data-row{
  display:flex;
  width:100%;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:79px;
  padding:13px 14px 13px 18px;
  border:1px solid #e0e4df;
  border-radius:15px;
  background:#fbfcfa;
}
.premium-order .pay-page .order-data-row>div{min-width:0;flex:1 1 auto}
.premium-order .pay-page .order-data-row .label{display:block;margin:0 0 7px;color:#718097;font-size:13px;letter-spacing:0;text-transform:none}
.premium-order .pay-page .order-data-row code{display:block;min-width:0;overflow:hidden;color:#0f1723;font-family:inherit;font-size:17px;font-weight:750;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
.premium-order .pay-page .order-data-row:last-child code{font-size:14px;font-weight:500}
.premium-order .pay-page .order-data-row button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:142px;
  min-height:46px;
  padding:0 13px;
  border:1px solid #d8edaa;
  border-radius:12px;
  background:#eaffc9;
  color:#111b16;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.premium-order .pay-page .order-data-row button:hover{transform:translateY(-1px);background:#deffa4;box-shadow:0 8px 16px rgba(110,155,42,.12)}
.premium-order .pay-page .order-data-row button:active{transform:translateY(0) scale(.98)}
.premium-order .pay-page .order-data-row button svg{width:18px;height:18px;flex:0 0 18px}
.premium-order .pay-page .order-side-note{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-top:25px;
  padding:19px;
  border:0;
  border-radius:16px;
  background:#f3faeb;
  color:#718097;
  font-size:14px;
  line-height:1.45;
}
.premium-order .pay-page .order-side-note:before{display:none!important;content:none!important}
.premium-order .pay-page .order-note-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid #d9ecc5;border-radius:50%;background:#fff;color:#4f9a2a}
.premium-order .pay-page .order-note-icon svg{width:20px;height:20px}
.premium-order .pay-page .order-side-note b,.premium-order .pay-page .order-side-note span{display:block}
.premium-order .pay-page .order-side-note b{margin-bottom:3px;color:#101722;font-size:16px}
.premium-order .pay-page .order-side-note span{font-size:14px}
@media(max-width:700px){
  .premium-order .pay-page .order-status-card{padding:23px 17px 19px}
  .premium-order .pay-page .order-intro,.premium-order .pay-page .codebox>p{font-size:14px}
  .premium-order .pay-page .order-progress{margin:24px 0 22px}
  .premium-order .pay-page .order-progress li{gap:7px}
  .premium-order .pay-page .order-progress li:not(:last-child)::after{margin:0 8px}
  .premium-order .pay-page .order-progress .progress-mark{width:32px;height:32px;flex-basis:32px}
  .premium-order .pay-page .order-progress li.is-done .progress-mark{box-shadow:0 0 0 4px #edffd7}
  .premium-order .pay-page .order-progress b{font-size:12px}
  .premium-order .pay-page .order-progress small{font-size:9px}
  .premium-order .pay-page .payment-app{grid-template-columns:54px minmax(0,1fr);min-height:92px;padding:12px}
  .premium-order .pay-page .payment-icon{width:54px;height:54px}
  .premium-order .pay-page .payment-app-copy b{font-size:17px}
  .premium-order .pay-page .payment-app-copy small{font-size:12px}
  .premium-order .pay-page .payment-app-price{grid-column:2;min-width:0;padding:0;border:0}
  .premium-order .pay-page .payment-app-price{display:block}
  .premium-order .pay-page .payment-app-price small{display:inline;margin-right:6px;font-size:11px}
  .premium-order .pay-page .payment-app-price strong{display:inline;font-size:18px}
  .premium-order .pay-page .order-primary-action{min-height:62px;padding:0 14px;font-size:16px}
  .premium-order .pay-page .codebox{padding:23px 17px 19px}
  .premium-order .pay-page .codebox h2{font-size:29px}
  .premium-order .pay-page .order-data-row{min-height:74px;padding-left:14px;gap:8px}
  .premium-order .pay-page .order-data-row .label{font-size:11px}
  .premium-order .pay-page .order-data-row code{font-size:14px}
  .premium-order .pay-page .order-data-row:last-child code{font-size:11px}
  .premium-order .pay-page .order-data-row button{min-width:112px;min-height:42px;padding:0 9px;font-size:10px}
  .premium-order .pay-page .order-data-row button svg{width:16px;height:16px}
  .premium-order .pay-page .order-side-note{margin-top:19px;padding:15px;font-size:12px}
  .premium-order .pay-page .order-side-note b{font-size:14px}
  .premium-order .pay-page .order-side-note span{font-size:12px}
}
@media(max-width:390px){
  .premium-order .pay-page .order-progress li:not(:last-child)::after{margin:0 5px}
  .premium-order .pay-page .order-progress .progress-mark{width:28px;height:28px;flex-basis:28px}
  .premium-order .pay-page .order-progress b{font-size:10px}
  .premium-order .pay-page .order-progress small{font-size:8px}
  .premium-order .pay-page .order-data-row button{min-width:98px}
}

/* Expired payment state: calm notice, dark recovery panel, one clear action. */
.premium-order .pay-page .order-status-card.is-state-expired{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.premium-order .pay-page .order-status-card.is-state-expired .order-card-topline,
.premium-order .pay-page .order-status-card.is-state-expired>h2,
.premium-order .pay-page .order-status-card.is-state-expired>.order-intro,
.premium-order .pay-page .order-status-card.is-state-expired>.order-progress,
.premium-order .pay-page .order-status-card.is-state-expired>#items,
.premium-order .pay-page .order-status-card.is-state-expired>.waitbox{display:none}
.premium-order .pay-page .order-status-card.is-state-expired .pay-actions{margin:0}
.premium-order .pay-page .expired-state{display:grid;gap:25px}
.premium-order .pay-page .expired-alert{
  display:flex;
  align-items:center;
  gap:24px;
  min-height:124px;
  padding:23px 34px;
  border:2px solid #ffd0ca;
  border-radius:24px;
  background:linear-gradient(110deg,#fff8f7,#fffdfc);
}
.premium-order .pay-page .expired-alert-mark{
  display:grid;
  place-items:center;
  width:74px;
  height:74px;
  flex:0 0 74px;
  border-radius:50%;
  background:#f5a21c;
  color:#fff;
  font-size:34px;
  font-weight:850;
  line-height:1;
  box-shadow:0 0 0 15px #ffe6e2;
}
.premium-order .pay-page .expired-alert>div>b,.premium-order .pay-page .expired-alert>div>span{display:block}
.premium-order .pay-page .expired-alert>div>b{color:#121c28;font-size:28px;line-height:1.1;letter-spacing:-.04em}
.premium-order .pay-page .expired-alert>div>span{margin-top:8px;color:#78879b;font-size:18px;line-height:1.35}
.premium-order .pay-page .expired-panel{
  position:relative;
  display:grid;
  gap:27px;
  overflow:hidden;
  padding:40px 40px 28px;
  border-radius:25px;
  background:radial-gradient(28rem 19rem at 87% 0,rgba(113,197,69,.18),transparent 70%),linear-gradient(120deg,#131e24,#1c2a30 62%,#14241d);
  color:#fff;
  box-shadow:0 24px 44px rgba(10,20,25,.16);
}
.premium-order .pay-page .expired-panel::after{
  content:"";
  position:absolute;
  right:-105px;
  top:-190px;
  width:420px;
  height:420px;
  border:1px solid rgba(176,239,107,.10);
  border-radius:50%;
  box-shadow:0 0 0 68px rgba(176,239,107,.035),0 0 0 136px rgba(176,239,107,.022);
  pointer-events:none;
}
.premium-order .pay-page .expired-panel-head{position:relative;z-index:1;display:flex;align-items:center;gap:28px}
.premium-order .pay-page .expired-hourglass{
  display:grid;
  place-items:center;
  width:92px;
  height:92px;
  flex:0 0 92px;
  border-radius:24px;
  background:rgba(89,115,126,.28);
  color:#e2e9eb;
}
.premium-order .pay-page .expired-hourglass svg{width:61px;height:61px}
.premium-order .pay-page .expired-panel-head>div>b,.premium-order .pay-page .expired-panel-head>div>span{display:block}
.premium-order .pay-page .expired-panel-head>div>b{font-size:30px;line-height:1.1;letter-spacing:-.04em}
.premium-order .pay-page .expired-panel-head>div>span{margin-top:8px;color:#d5dee4;font-size:18px;line-height:1.35}
.premium-order .pay-page .expired-new-order{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:66px;
  margin:0;
  border-radius:17px;
  background:linear-gradient(110deg,#ff594f,#ff6c50);
  box-shadow:0 16px 27px rgba(255,91,71,.18);
  font-size:20px;
}
.premium-order .pay-page .expired-new-order span{font-weight:900}
.premium-order .pay-page .expired-new-order svg{width:25px;height:25px}
.premium-order .pay-page .order-status-card.is-state-expired .status-message{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:22px;
  padding:0 4px;
  color:#718097;
  font-size:17px;
  line-height:1.4;
}
.premium-order .pay-page .order-status-card.is-state-expired .status-message::before{
  content:"i";
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border:3px solid #718097;
  border-radius:50%;
  font-family:Georgia,serif;
  font-size:22px;
  font-weight:700;
}
@media(max-width:700px){
  .premium-order .pay-page .expired-state{gap:16px}
  .premium-order .pay-page .expired-alert{gap:17px;min-height:94px;padding:17px 20px;border-radius:18px}
  .premium-order .pay-page .expired-alert-mark{width:52px;height:52px;flex-basis:52px;font-size:25px;box-shadow:0 0 0 9px #ffe6e2}
  .premium-order .pay-page .expired-alert>div>b{font-size:20px}
  .premium-order .pay-page .expired-alert>div>span{margin-top:5px;font-size:13px}
  .premium-order .pay-page .expired-panel{gap:19px;padding:25px 19px 19px;border-radius:19px}
  .premium-order .pay-page .expired-panel-head{gap:17px}
  .premium-order .pay-page .expired-hourglass{width:64px;height:64px;flex-basis:64px;border-radius:17px}
  .premium-order .pay-page .expired-hourglass svg{width:44px;height:44px}
  .premium-order .pay-page .expired-panel-head>div>b{font-size:22px}
  .premium-order .pay-page .expired-panel-head>div>span{margin-top:5px;font-size:14px}
  .premium-order .pay-page .expired-new-order{min-height:56px;font-size:16px}
  .premium-order .pay-page .order-status-card.is-state-expired .status-message{gap:11px;margin-top:15px;font-size:13px}
  .premium-order .pay-page .order-status-card.is-state-expired .status-message::before{width:25px;height:25px;flex-basis:25px;border-width:2px;font-size:17px}
}

/* Keep the status icon optically centered at every progress size. */
.premium-order .pay-page .order-progress .progress-mark::before{content:none!important;display:none!important}
.premium-order .pay-page .order-progress .progress-mark .progress-number{display:inline}
.premium-order .pay-page .order-progress .progress-mark .progress-check,
.premium-order .pay-page .order-progress .progress-mark .progress-error{display:none}
.premium-order .pay-page .order-progress li.is-done .progress-mark .progress-number,
.premium-order .pay-page .order-progress li.is-error .progress-mark .progress-number{display:none}
.premium-order .pay-page .order-progress li.is-done .progress-mark .progress-check{
  display:block;
  width:20px;
  height:20px;
}
.premium-order .pay-page .order-progress li.is-error .progress-mark .progress-error{
  display:block;
  font-size:16px;
  line-height:1;
}