[v-cloak] { display: none; }
.ssl-buy-page {
  --sb-primary: #2563eb;
  --sb-primary-dark: #1d4ed8;
  --sb-text: #182230;
  --sb-muted: #718096;
  --sb-line: #e6ebf2;
  --sb-soft: #f7f9fc;
  --sb-content-width: 1400px;
  min-height: 100vh;
  padding: 22px 0 48px;
  background: #f5f7fb;
  color: var(--sb-text);
}
.ssl-buy-page * { box-sizing: border-box; }
.ssl-buy-shell { width: min(var(--sb-content-width), calc(100% - 40px)); margin: 0 auto; }
.ssl-buy-topbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.ssl-buy-back { color: #5d697b; text-decoration: none; font-size: 13px; }
.ssl-buy-back i { margin-right: 6px; }
.ssl-buy-secure { color: #7b8799; font-size: 12px; }
.ssl-buy-secure i { margin-right: 6px; color: #159455; }
.ssl-product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 112px;
  padding: 20px 24px;
  border: 1px solid var(--sb-line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 35, 60, .04);
}
.ssl-product-brand { display: flex; align-items: center; gap: 17px; min-width: 0; }
.ssl-product-logo { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; flex: 0 0 62px; border: 1px solid #e8edf4; border-radius: 12px; background: #fbfcfe; }
.ssl-product-logo img { max-width: 48px; max-height: 42px; object-fit: contain; }
.ssl-product-logo.placeholder { color: var(--sb-primary); font-size: 25px; background: #eff5ff; }
.ssl-product-tags { display: flex; gap: 6px; margin-bottom: 5px; }
.ssl-product-tags span { padding: 3px 7px; border-radius: 4px; color: #315fba; background: #eef4ff; font-size: 10px; font-weight: 700; }
.ssl-product-head h1 { margin: 0; color: #111827; font-size: 22px; line-height: 1.25; }
.ssl-product-head p { max-width: 780px; margin: 6px 0 0; color: var(--sb-muted); font-size: 12px; line-height: 1.6; }
.ssl-product-feature { display: flex; align-items: center; gap: 10px; min-width: 220px; padding-left: 20px; border-left: 1px solid var(--sb-line); color: #344054; font-size: 12px; line-height: 1.45; }
.ssl-product-feature > i { color: #16a05c; font-size: 21px; }
.ssl-product-feature small { color: #98a2b3; font-size: 10px; }
.ssl-buy-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; align-items: start; }
.ssl-buy-main { display: grid; min-width: 0; gap: 16px; }
.ssl-form-card { overflow: hidden; border: 1px solid var(--sb-line); border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(20, 35, 60, .025); }
.ssl-section-head { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 11px 20px; border-bottom: 1px solid var(--sb-line); background: #fbfcfe; }
.ssl-section-index { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; color: #fff; background: var(--sb-primary); font-size: 12px; font-weight: 700; }
.ssl-section-head h2 { margin: 0; color: #243044; font-size: 15px; }
.ssl-section-head p { margin: 4px 0 0; color: #8a95a6; font-size: 11px; }
.ssl-section-body { padding: 20px; }
.ssl-field { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.ssl-field:last-child { margin-bottom: 0; }
.ssl-field.align-start { align-items: flex-start; }
.ssl-field > label { width: 112px; flex: 0 0 112px; color: #475467; text-align: right; font-size: 12px; font-weight: 600; }
.ssl-field label b,
.ssl-form-item label b { margin-right: 3px; color: #e5484d; font-weight: 500; }
.ssl-field-control { min-width: 0; flex: 1; }
.ssl-field-tip { margin-top: 7px; color: #98a2b3; font-size: 10px; line-height: 1.55; }
.ssl-field-tip i { margin-right: 4px; }
.ssl-method-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ssl-method-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid #dfe5ee;
  border-radius: 9px;
  color: #586579;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.ssl-method-card > i:first-child { width: 24px; color: #7790b7; text-align: center; font-size: 18px; }
.ssl-method-card span { display: flex; min-width: 0; flex-direction: column; }
.ssl-method-card strong { color: #344054; font-size: 12px; font-weight: 600; }
.ssl-method-card small { margin-top: 3px; color: #98a2b3; font-size: 10px; }
.ssl-method-card .selected-icon { display: none; position: absolute; right: 8px; top: 8px; color: var(--sb-primary); font-size: 13px; }
.ssl-method-card.active { border-color: #7da3ed; background: #f3f7ff; box-shadow: 0 0 0 2px rgba(37,99,235,.06); }
.ssl-method-card.active > i:first-child,
.ssl-method-card.active strong { color: var(--sb-primary); }
.ssl-method-card.active .selected-icon { display: block; }
.ssl-method-card.disabled { cursor: not-allowed; opacity: .45; }
.ssl-email-dcv { margin-top: 10px; }
.ssl-contact-form { display: grid; gap: 16px; }
.ssl-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ssl-form-item { min-width: 0; }
.ssl-form-item label { display: block; margin-bottom: 6px; color: #596579; font-size: 11px; font-weight: 600; }
.ssl-form-item.full { grid-column: 1 / -1; }
.ssl-organization-box { grid-column: 1 / -1; padding: 14px; border: 1px solid #dfe8f7; border-radius: 9px; background: #f8fbff; }
.ssl-organization-title { color: #315b9f; font-size: 12px; font-weight: 700; }
.ssl-organization-title i { margin-right: 6px; }
.ssl-organization-box > p { margin: 5px 0 12px; color: #8290a5; font-size: 10px; }
.ssl-organization-box .ssl-field-row { margin-bottom: 12px; }
.ssl-form-card.compact .ssl-section-body { padding-top: 15px; padding-bottom: 15px; }
.ssl-duration-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 100%; }
.ssl-duration-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid #dce3ed;
  border-radius: 8px;
  color: #475467;
  background: #fff;
  cursor: pointer;
  flex-direction: column;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.ssl-duration-card:hover { border-color: #9bb8ed; background: #f8faff; transform: translateY(-1px); }
.ssl-duration-card:focus-visible { outline: 3px solid rgba(37,99,235,.17); outline-offset: 2px; }
.ssl-duration-card.active { border-color: var(--sb-primary); background: #f2f6ff; box-shadow: inset 0 0 0 1px var(--sb-primary), 0 6px 14px rgba(37,99,235,.08); }
.ssl-duration-years { display: inline-flex; align-items: baseline; color: #344054; line-height: 1; }
.ssl-duration-years strong { font-size: 18px; font-weight: 700; }
.ssl-duration-years small { margin-left: 3px; font-size: 12px; font-weight: 600; }
.ssl-duration-note { margin-top: 8px; color: #98a2b3; font-size: 10px; line-height: 1; }
.ssl-duration-note.discount { color: #c66a12; font-weight: 700; }
.ssl-duration-card.active .ssl-duration-years { color: var(--sb-primary); }
.ssl-duration-check { display: none; position: absolute; right: 7px; top: 7px; color: var(--sb-primary); font-size: 13px; }
.ssl-duration-card.active .ssl-duration-check { display: block; }
.ssl-duration-saving {
  position: absolute;
  left: 50%;
  top: -35px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 10px);
  padding: 5px 8px;
  border: 1px solid #fed7aa;
  border-radius: 7px;
  color: #c2410c;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  box-shadow: 0 5px 12px rgba(234, 88, 12, .13);
  font-size: 10px;
  line-height: 15px;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}
.ssl-duration-saving::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: #fed7aa transparent transparent;
  transform: translateX(-50%);
}
.ssl-duration-saving strong { color: #ea580c; font-size: 11px; font-weight: 800; }
.ssl-original-price-line { padding-top: 9px; }
.ssl-original-price-line span { color: #8a95a6; }
.ssl-original-price-line del { color: #a0a8b5; font-size: 11px; }
.ssl-order-saving {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 3px;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-radius: 9px;
  background: linear-gradient(135deg, #fffaf4, #fff1e6);
  box-shadow: 0 5px 14px rgba(234, 88, 12, .08);
}
.ssl-order-saving-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ssl-order-saving-copy > span { display: inline-flex; align-items: center; gap: 5px; color: #c2410c; font-size: 12px; font-weight: 700; }
.ssl-order-saving-copy > span i { color: #f97316; font-size: 12px; }
.ssl-order-saving-copy > small { color: #9a3412; font-size: 10px; line-height: 1.35; opacity: .78; }
.ssl-order-saving > strong { flex: 0 0 auto; color: #ea580c; font-size: 17px; font-weight: 800; white-space: nowrap; }
.ssl-order-card { position: sticky; top: 18px; min-width: 0; padding: 22px; border: 1px solid var(--sb-line); border-radius: 12px; background: #fff; box-shadow: 0 9px 28px rgba(20,35,60,.05); }
.ssl-order-head { padding-bottom: 14px; border-bottom: 1px solid var(--sb-line); }
.ssl-order-title { color: #202b3c; font-size: 16px; font-weight: 700; }
.ssl-order-head p { margin: 4px 0 0; color: #98a2b3; font-size: 10px; }
.ssl-order-product { display: flex; align-items: center; gap: 11px; padding: 15px 0; border-bottom: 1px dashed #e4e9f0; }
.ssl-order-product-logo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid #e6ebf2; border-radius: 8px; background: #fbfcfe; }
.ssl-order-product-logo img { max-width: 34px; max-height: 29px; object-fit: contain; }
.ssl-order-product-logo.placeholder { color: var(--sb-primary); background: #eff5ff; font-size: 17px; }
.ssl-order-product-info { min-width: 0; flex: 1; }
.ssl-order-product-info strong { display: block; overflow: hidden; color: #344054; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.ssl-order-product-info > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ssl-order-product-info span { padding: 3px 6px; border-radius: 4px; color: #315fba; background: #eef4ff; font-size: 9px; font-weight: 700; }
.ssl-order-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 11px; color: #7c8798; font-size: 11px; }
.ssl-coupon-line { align-items: flex-start; }
.ssl-coupon-label { flex: 0 0 auto; padding-top: 13px; }
.ssl-coupon-control { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; align-items: flex-end; gap: 5px; }
.ssl-coupon-control .coupon-entry { display: flex; align-items: stretch; gap: 6px; width: 100%; max-width: 260px; }
.ssl-coupon-control .coupon-input { min-width: 0; flex: 1 1 auto; }
.ssl-coupon-control .coupon-input .el-input__inner,
.ssl-coupon-control .coupon-apply-btn { height: 40px; line-height: 40px; }
.ssl-coupon-control .coupon-input .el-input__inner { width: 100%; padding: 0 11px; border-radius: 7px; }
.ssl-coupon-control .coupon-apply-btn { flex: 0 0 68px; min-width: 68px; padding: 0 12px; border-radius: 7px; }
.ssl-coupon-control .coupon-feedback { align-self: flex-end; display: flex; align-items: flex-start; gap: 8px; width: fit-content; max-width: 100%; min-height: 32px; margin: 8px 0 0; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; box-sizing: border-box; font-size: 12px; line-height: 17px; font-weight: 500; text-align: left; overflow-wrap: anywhere; }
.ssl-coupon-control .coupon-feedback::before { flex: 0 0 auto; margin-top: 1px; font: normal normal normal 14px/17px FontAwesome; }
.ssl-coupon-control .coupon-feedback > span { min-width: 0; }
.ssl-coupon-control .coupon-feedback--success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.ssl-coupon-control .coupon-feedback--success::before { content: "\f058"; }
.ssl-coupon-control .coupon-feedback--warning { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.ssl-coupon-control .coupon-feedback--warning::before { content: "\f071"; }
.ssl-coupon-control .coupon-feedback--error { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.ssl-coupon-control .coupon-feedback--error::before { content: "\f06a"; }
.ssl-order-line strong { max-width: 180px; color: #475467; text-align: right; font-weight: 600; word-break: break-all; }
.ssl-order-line strong.domain-summary { font-family: Menlo, monospace; }
.ssl-order-line.minor { padding-top: 8px; font-size: 10px; }
.ssl-order-line.muted del { color: #a0a8b5; }
.ssl-order-divider { height: 1px; margin: 15px 0 2px; background: var(--sb-line); }
.ssl-order-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; }
.ssl-order-total span { color: #475467; font-size: 12px; font-weight: 600; }
.ssl-order-total strong { color: #e5484d; font-size: 25px; line-height: 1; }
.ssl-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 7px; color: #778397; background: #f6f8fb; font-size: 10px; }
.ssl-balance-row + .ssl-balance-row { margin-top: 6px; }
.ssl-balance-row strong { color: #2f6f4c; font-size: 11px; }
.ssl-balance-row strong.insufficient { color: #c0352b; }
.ssl-submit-button { width: 100%; height: 42px; margin-top: 13px; border: 0; border-radius: 8px; color: #fff; background: var(--sb-primary); box-shadow: 0 8px 18px rgba(37,99,235,.18); cursor: pointer; font-size: 12px; font-weight: 700; }
.ssl-submit-button:hover { background: var(--sb-primary-dark); }
.ssl-submit-button:disabled { cursor: not-allowed; opacity: .65; }
.ssl-submit-button i { margin-right: 7px; }
.ssl-order-tip { margin: 11px 1px 0; color: #929dad; font-size: 9px; line-height: 1.65; }
.ssl-order-tip i { margin-right: 4px; color: #28925d; }
.ssl-confirm-product { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; margin-bottom: 12px; border-radius: 9px; background: #f6f8fb; }
.ssl-confirm-product span { color: #667085; font-size: 12px; }
.ssl-confirm-product strong { color: #1d4ed8; font-family: Menlo, monospace; font-size: 17px; word-break: break-all; }
.ssl-confirm-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; color: #778397; font-size: 12px; }
.ssl-confirm-row strong { color: #344054; }
.ssl-confirm-row strong.danger { color: #c0352b; }
.ssl-confirm-warning { margin-top: 10px; padding: 9px 11px; border-radius: 7px; color: #9f4a00; background: #fff7ed; font-size: 11px; }
.ssl-confirm-warning.credit-use { color: #166534; background: #f0fdf4; }
.ssl-processing-dialog .el-dialog__header { display: none; }
.ssl-processing-dialog .el-dialog__body { padding: 34px 28px; }
.ssl-processing { text-align: center; }
.ssl-spinner { display: inline-block; width: 46px; height: 46px; border: 4px solid #e4eaf3; border-top-color: var(--sb-primary); border-radius: 50%; animation: ssl-spin .8s linear infinite; }
.ssl-processing h3 { margin: 16px 0 7px; color: #253046; font-size: 17px; }
.ssl-processing p { margin: 0; color: #8a95a6; font-size: 11px; line-height: 1.6; }
@keyframes ssl-spin { to { transform: rotate(360deg); } }
.ssl-buy-page .el-input__inner,
.ssl-buy-page .el-textarea__inner { border-color: #dce3ed; border-radius: 7px; color: #344054; font-size: 12px; }
.ssl-buy-page .el-input__inner { height: 40px; line-height: 40px; }
.ssl-buy-page .el-input__inner:focus,
.ssl-buy-page .el-textarea__inner:focus { border-color: #7da3ed; }
.ssl-buy-page .el-input-group__prepend { border-color: #dce3ed; color: #667085; background: #f6f8fb; font-size: 11px; }
.ssl-buy-page .el-dialog { border-radius: 11px; }
.ssl-buy-page .el-dialog__header { padding: 18px 20px 13px; border-bottom: 1px solid var(--sb-line); }
.ssl-buy-page .el-dialog__title { color: #253046; font-size: 16px; font-weight: 700; }
.ssl-buy-page .el-dialog__body { padding: 20px; }
.ssl-buy-page .el-dialog__footer { padding: 13px 20px 18px; }
@media (max-width: 1240px) {
  .ssl-buy-shell { width: min(var(--sb-content-width), calc(100% - 36px)); }
  .ssl-buy-layout { grid-template-columns: minmax(0, 1fr) 324px; gap: 16px; }
  .ssl-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssl-duration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .ssl-buy-layout { grid-template-columns: 1fr; }
  .ssl-order-card { position: static; }
  .ssl-product-feature { display: none; }
  .ssl-duration-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ssl-buy-page { padding-top: 14px; }
  .ssl-buy-shell { width: calc(100% - 20px); }
  .ssl-buy-secure { display: none; }
  .ssl-product-head { padding: 17px; }
  .ssl-product-logo { width: 50px; height: 50px; flex-basis: 50px; }
  .ssl-product-head h1 { font-size: 18px; }
  .ssl-section-body { padding: 15px; }
  .ssl-field { align-items: stretch; flex-direction: column; gap: 7px; }
  .ssl-field > label { width: auto; flex-basis: auto; text-align: left; }
  .ssl-field-control { width: 100%; flex: none; }
  .ssl-method-grid,
  .ssl-field-row { grid-template-columns: 1fr; }
  .ssl-duration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssl-duration-card { min-height: 66px; }
  .ssl-duration-saving { top: -32px; padding: 4px 6px; font-size: 9px; }
  .ssl-duration-saving strong { font-size: 10px; }
  .ssl-order-saving { align-items: flex-start; padding: 9px 10px; }
  .ssl-section-head p { display: none; }
  .ssl-coupon-line { display: block; }
  .ssl-coupon-label { display: block; padding-top: 0; margin-bottom: 7px; }
  .ssl-coupon-control { align-items: stretch; }
  .ssl-coupon-control .coupon-entry { max-width: none; }
  .ssl-coupon-control .coupon-feedback { align-self: stretch; width: 100%; margin-left: 0; text-align: left; }
}