/* WebOrder Public Form — Apple SF-inspired Design */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

.wo-order-shell * { box-sizing: border-box; }

.wo-order-shell {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  color: #1d1d1f;
  -webkit-font-smoothing: antialiased;
}

/* ── Stepper ── */
.wo-stepper {
  display: flex; align-items: center;
  margin-bottom: 44px;
  position: relative;
}
.wo-step-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; cursor: pointer; position: relative;
}
.wo-step-item:not(:last-child)::after {
  content: '';
  position: absolute; top: 18px; left: 50%; width: 100%;
  height: 2px; background: #e5e5ea; z-index: 0;
  transition: background .3s;
}
.wo-step-item.done:not(:last-child)::after { background: #0071e3; }
.wo-step-dot {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid #e5e5ea; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #8e8e93;
  position: relative; z-index: 1;
  transition: all .2s;
}
.wo-step-item.active .wo-step-dot {
  border-color: #0071e3; background: #0071e3; color: #fff;
  box-shadow: 0 0 0 5px rgba(0,113,227,.15);
}
.wo-step-item.done .wo-step-dot { border-color: #0071e3; background: #0071e3; color: #fff; }
.wo-step-label {
  margin-top: 8px; font-size: 11px; font-weight: 500;
  color: #8e8e93; text-align: center; letter-spacing: .2px;
}
.wo-step-item.active .wo-step-label { color: #0071e3; font-weight: 600; }
.wo-step-item.done  .wo-step-label { color: #1d1d1f; }

/* ── Panel ── */
.wo-panel { display: none; animation: woPanelIn .3s ease; }
.wo-panel.active { display: block; }
@keyframes woPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wo-panel-title {
  font-size: 26px; font-weight: 700; letter-spacing: -.5px;
  color: #1d1d1f; margin-bottom: 4px;
}
.wo-panel-sub {
  font-size: 15px; color: #6e6e73; margin-bottom: 28px; line-height: 1.5;
}

/* ── Template Grid ── */
.wo-cat-filter {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px;
}
.wo-cat-btn {
  padding: 6px 16px; border-radius: 20px; border: 1.5px solid #e5e5ea;
  background: #fff; font-size: 13px; font-weight: 500; color: #6e6e73;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.wo-cat-btn:hover, .wo-cat-btn.active {
  border-color: #0071e3; color: #0071e3; background: #e8f1fd;
}
.wo-tpl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-bottom: 32px;
}
.wo-tpl-card {
  border: 2px solid #e5e5ea; border-radius: 14px;
  overflow: hidden; cursor: pointer;
  background: #fff; transition: all .2s;
}
.wo-tpl-card:hover {
  border-color: #0071e3; transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,113,227,.12);
}
.wo-tpl-card.selected {
  border-color: #0071e3;
  box-shadow: 0 0 0 4px rgba(0,113,227,.15);
}
.wo-tpl-preview {
  height: 120px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.wo-tpl-preview.blue   { background: linear-gradient(135deg,#e8ecff,#c7d4ff); }
.wo-tpl-preview.green  { background: linear-gradient(135deg,#d4f5e8,#a0e8cc); }
.wo-tpl-preview.warm   { background: linear-gradient(135deg,#fef0e4,#fdd3a0); }
.wo-tpl-preview.dark   { background: linear-gradient(135deg,#1c1c1e,#2c2c2e); }
.wo-tpl-preview.pink   { background: linear-gradient(135deg,#ffe4f2,#ffc2dd); }
.wo-tpl-preview.slate  { background: linear-gradient(135deg,#e8e8ed,#d2d2d8); }
.wo-tpl-check {
  position: absolute; top: 10px; left: 10px;
  background: #0071e3; color: #fff;
  width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; font-size: 12px;
}
.wo-tpl-card.selected .wo-tpl-check { display: flex; }
.wo-tpl-badge {
  position: absolute; top: 10px; right: 10px;
  background: #ff3b30; color: #fff;
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; letter-spacing: .5px;
}
.wo-tpl-mock { width: 75%; }
.wo-tpl-bar { height: 5px; background: rgba(255,255,255,.55); border-radius: 3px; margin-bottom: 5px; }
.wo-tpl-bar.short { width: 55%; }
.wo-tpl-bar.tall  { height: 24px; border-radius: 4px; margin-top: 8px; }
.wo-tpl-info { padding: 12px 14px; }
.wo-tpl-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.wo-tpl-cat  { font-size: 12px; color: #8e8e93; }

/* ── Domain ── */
.wo-domain-box {
  display: flex; margin-bottom: 22px;
}
.wo-domain-input {
  flex: 1; padding: 13px 16px;
  border: 1.5px solid #e5e5ea; border-right: none;
  border-radius: 12px 0 0 12px;
  font-size: 15px; font-family: inherit;
  outline: none; background: #fafafa;
  transition: border-color .15s;
}
.wo-domain-input:focus { border-color: #0071e3; background: #fff; }
.wo-domain-btn {
  padding: 13px 22px; background: #0071e3; color: #fff;
  border: none; border-radius: 0 12px 12px 0;
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.wo-domain-btn:hover { background: #0077ed; }

.wo-domain-results { display: grid; gap: 10px; }
.wo-domain-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px;
  background: #fff; border: 1.5px solid #e5e5ea; border-radius: 12px;
  cursor: pointer; transition: all .15s;
}
.wo-domain-row:hover   { border-color: #0071e3; }
.wo-domain-row.selected{ border-color: #0071e3; background: #e8f1fd; }
.wo-domain-row.unavail { opacity: .4; cursor: not-allowed; }
.wo-domain-name { font-size: 15px; font-weight: 600; }
.wo-domain-ext  { color: #0071e3; }
.wo-avail   { color: #28c840; font-size: 12px; font-weight: 600; }
.wo-unavail { color: #ff3b30; font-size: 12px; font-weight: 600; }
.wo-domain-price { font-size: 15px; font-weight: 700; }
.wo-domain-loading { text-align:center; padding:30px; color:#8e8e93; font-size:14px; }

/* ── Packages ── */
.wo-pkg-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 16px; margin-bottom: 28px;
}
.wo-pkg-card {
  border: 2px solid #e5e5ea; border-radius: 16px;
  padding: 24px 20px; background: #fff;
  cursor: pointer; transition: all .2s; position: relative;
}
.wo-pkg-card:hover   { border-color: #0071e3; box-shadow: 0 8px 24px rgba(0,113,227,.1); }
.wo-pkg-card.selected{ border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,.12); }
.wo-pkg-card.popular { border-color: #0071e3; }
.wo-popular-tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: #0071e3; color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 14px;
  border-radius: 20px; white-space: nowrap; letter-spacing: .3px;
}
.wo-pkg-name  { font-size: 20px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 4px; }
.wo-pkg-price { font-size: 26px; font-weight: 700; margin: 12px 0 4px; letter-spacing: -1px; }
.wo-pkg-price span { font-size: 13px; font-weight: 400; color: #8e8e93; }
.wo-pkg-desc  { font-size: 13px; color: #8e8e93; margin-bottom: 16px; line-height: 1.5; }
.wo-pkg-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.wo-pkg-features li {
  font-size: 13px; display: flex; gap: 8px; align-items: flex-start;
  line-height: 1.4;
}
.wo-pkg-features li::before { content: '✓'; color: #28c840; font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* ── Form ── */
.wo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.wo-fg { display: flex; flex-direction: column; gap: 5px; }
.wo-fg.full { grid-column: 1/-1; }
.wo-label { font-size: 13px; font-weight: 600; color: #1d1d1f; }
.wo-input, .wo-select {
  padding: 11px 14px; border: 1.5px solid #e5e5ea; border-radius: 10px;
  font-size: 15px; font-family: inherit; background: #fafafa; color: #1d1d1f;
  outline: none; transition: border-color .15s;
  -webkit-appearance: none;
}
.wo-input:focus, .wo-select:focus { border-color: #0071e3; background: #fff; }
.wo-input::placeholder { color: #c7c7cc; }
.wo-pw-strength { display: flex; gap: 4px; margin-top: 6px; }
.wo-pw-bar { height: 3px; flex: 1; border-radius: 2px; background: #e5e5ea; transition: background .3s; }
.wo-pw-bar.l1 { background: #ff3b30; }
.wo-pw-bar.l2 { background: #ff9f0a; }
.wo-pw-bar.l3 { background: #28c840; }
.wo-terms { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6e6e73; margin-bottom: 20px; }
.wo-terms a { color: #0071e3; text-decoration: none; }

/* ── Payment ── */
.wo-pay-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.wo-pay-methods { display: grid; gap: 10px; margin-bottom: 22px; }
.wo-pay-row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  border: 1.5px solid #e5e5ea; border-radius: 12px;
  cursor: pointer; transition: all .15s; background: #fff;
}
.wo-pay-row:hover   { border-color: #0071e3; }
.wo-pay-row.selected{ border-color: #0071e3; background: #e8f1fd; }
.wo-pay-icon {
  width: 42px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  flex-shrink: 0;
}
.wo-pay-icon.visa    { background: #1a1f71; color: #fff; }
.wo-pay-icon.bca     { background: #005baa; color: #fff; }
.wo-pay-icon.mandiri { background: #003f88; color: #fff; }
.wo-pay-icon.qris    { background: #e11d48; color: #fff; font-size: 9px; }
.wo-pay-name { font-weight: 600; font-size: 14px; }
.wo-pay-sub  { font-size: 12px; color: #8e8e93; }

.wo-cc-fields {
  background: #f5f5f7; border-radius: 12px; padding: 18px;
  display: grid; gap: 12px; margin-top: 4px;
}
.wo-cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Summary ── */
.wo-summary {
  background: #fff; border-radius: 16px;
  border: 1.5px solid #e5e5ea;
  padding: 22px; position: sticky; top: 80px; height: fit-content;
}
.wo-summary-title { font-size: 17px; font-weight: 700; margin-bottom: 18px; letter-spacing: -.2px; }
.wo-sum-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 0; font-size: 14px; border-bottom: 1px solid #f2f2f7;
}
.wo-sum-row:last-of-type { border: none; }
.wo-sum-row.total {
  font-weight: 700; font-size: 16px;
  border-top: 2px solid #1d1d1f !important; padding-top: 16px; margin-top: 4px;
}
.wo-sum-label { color: #8e8e93; }
.wo-sum-item  { font-weight: 500; }
.wo-tag  {
  display: inline-block; padding: 2px 8px;
  background: #e8f1fd; color: #0071e3;
  border-radius: 20px; font-size: 11px; font-weight: 600; margin-top: 3px;
}
.wo-promo-row { display: flex; margin: 14px 0; }
.wo-promo-input {
  flex: 1; padding: 9px 13px;
  border: 1.5px solid #e5e5ea; border-right: none;
  border-radius: 8px 0 0 8px; font-size: 13px; font-family: inherit; outline: none;
}
.wo-promo-btn {
  padding: 9px 14px; background: #f5f5f7;
  border: 1.5px solid #e5e5ea; border-radius: 0 8px 8px 0;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* ── Buttons ── */
.wo-btn-primary {
  display: block; width: 100%;
  padding: 14px; border-radius: 12px;
  background: #0071e3; color: #fff;
  border: none; font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all .15s; letter-spacing: .1px;
}
.wo-btn-primary:hover { background: #0077ed; box-shadow: 0 4px 16px rgba(0,113,227,.3); }
.wo-btn-primary:disabled { background: #aeaeb2; cursor: not-allowed; }
.wo-btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 20px;
  border: 1.5px solid #e5e5ea; background: #fff; color: #1d1d1f;
  font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.wo-btn-back:hover { border-color: #aeaeb2; background: #f5f5f7; }

.wo-step-nav {
  display: flex; justify-content: space-between; align-items: center; margin-top: 32px;
}

/* ── Confirm ── */
.wo-confirm {
  max-width: 480px; margin: 0 auto;
  text-align: center; padding: 20px 0 40px;
}
.wo-confirm-icon { font-size: 64px; margin-bottom: 20px; }
.wo-confirm-title { font-size: 28px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 8px; }
.wo-confirm-sub   { color: #6e6e73; font-size: 15px; margin-bottom: 30px; line-height: 1.6; }
.wo-confirm-box {
  background: #f5f5f7; border-radius: 14px;
  padding: 22px; text-align: left; margin-bottom: 24px;
}
.wo-confirm-box h4 {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: #8e8e93; margin: 0 0 14px;
}
.wo-confirm-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; font-size: 14px;
  border-bottom: 1px solid #e5e5ea;
}
.wo-confirm-row:last-child { border: none; }
.wo-confirm-row span:first-child { color: #6e6e73; }

/* ── Loading spinner ── */
.wo-spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%;
  animation: woSpin .7s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
@keyframes woSpin { to { transform: rotate(360deg); } }

/* ── Error ── */
.wo-error {
  background: #ffe5e4; color: #9e0000;
  padding: 12px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 500; margin-bottom: 16px;
  display: none;
}

@media (max-width: 700px) {
  .wo-tpl-grid, .wo-pkg-grid { grid-template-columns: 1fr 1fr; }
  .wo-pay-layout { grid-template-columns: 1fr; }
  .wo-form-grid  { grid-template-columns: 1fr; }
  .wo-fg.full    { grid-column: 1; }
}