/* ===================================================================
   checkout.css —— 各产品购买/结账页共用样式（从 server.css 抽离）
   搭配 custom.css 的 .checkout-* / .order-summary / .os-* / .page-head 布局
=================================================================== */

/* ========================================
   Buy Page Styles
   ======================================== */

/* Product Summary Card */
.product-buy-summary {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 0;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(20,40,80,.06);
}

.product-buy-product-name {
  font-size: 22px;
  font-weight: 700;
  color: #0b1f4d;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-buy-product-name .icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(37,99,235,.28);
}

.product-buy-product-name .icon svg {
  width: 21px;
  height: 21px;
  color: #fff;
}

.product-buy-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.product-buy-spec {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 0;
  padding: 14px 16px;
  text-align: center;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.product-buy-spec:hover {
  border-color: #cdd9f5;
  box-shadow: 0 8px 20px rgba(20,40,80,.08);
  transform: translateY(-2px);
}

.product-buy-spec-label {
  font-size: 11px;
  color: #9aa6b4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.product-buy-spec-value {
  font-size: 18px;
  font-weight: 700;
  color: #2563eb;
}

/* Form Card */
.product-buy-form-card {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20,40,80,.06);
}

.product-buy-form-section {
  padding: 24px;
  border-bottom: 1px solid #e6e9ef;
}

.product-buy-form-section:last-child {
  border-bottom: none;
}

.product-buy-form-title {
  font-size: 16px;
  font-weight: 700;
  color: #0b1f4d;
  margin-bottom: 18px;
  padding-left: 11px;
  border-left: 3px solid #2563eb;
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-buy-form-title svg {
  width: 18px;
  height: 18px;
  color: #2563eb;
}

/* Form Group */
.product-buy-form-group {
  margin-bottom: 20px;
}

.product-buy-form-group:last-child {
  margin-bottom: 0;
}

.product-buy-label {
  display: block;
  font-size: 13px;
  color: #8a98a8;
  margin-bottom: 8px;
}

.product-buy-input {
  width: 100%;
  padding: 12px 16px;
  background: #f7f9fc;
  border: 1px solid #dfe5ef;
  border-radius: 0;
  color: #0b1f4d;
  font-size: 14px;
  transition: all 0.2s ease;
}

.product-buy-input:focus {
  outline: none;
  border-color: rgba(37,99,235,0.5);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.product-buy-input::placeholder {
  color: #475569;
}

.product-buy-select {
  width: 100%;
  padding: 12px 16px;
  background: #f7f9fc;
  border: 1px solid #dfe5ef;
  border-radius: 0;
  color: #0b1f4d;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.product-buy-select:focus {
  outline: none;
  border-color: rgba(37,99,235,0.5);
}

.product-buy-select option {
  background: #ffffff;
  color: #0b1f4d;
}

.product-buy-form-tip {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #a16207;
  background: rgba(250, 204, 21, 0.15);
  border: 1px solid rgba(250, 204, 21, 0.5);
  border-radius: 0;
}

/* Duration Selector */
.product-buy-duration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
}

.product-buy-duration-btn {
  padding: 14px 12px;
  background: #f7f9fc;
  border: 1px solid #dfe5ef;
  border-radius: 0;
  color: #8a98a8;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.product-buy-duration-btn:hover {
  background: #fff;
  border-color: #2563eb;
  color: #2563eb;
}

.product-buy-duration-btn.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(37,99,235,.28);
}

.product-buy-duration-btn input {
  display: none;
}

/* Quantity */
.product-buy-quantity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-buy-quantity-input {
  width: 80px;
  padding: 12px 16px;
  background: #f7f9fc;
  border: 1px solid #dfe5ef;
  border-radius: 0;
  color: #0b1f4d;
  font-size: 14px;
  text-align: center;
}

.product-buy-quantity-input:focus {
  outline: none;
  border-color: rgba(37,99,235,0.5);
}

/* 提交按钮 */
.product-buy-submit-btn {
  width: 100%;
  padding: 16px 32px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product-buy-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37,99,235,0.4);
}

.product-buy-submit-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.product-buy-submit-btn svg {
  width: 20px;
  height: 20px;
}

/* Responsive Buy Page */
@media (max-width: 768px) {
  .product-buy-specs {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-buy-duration-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .os-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== 操作系统选择：分类标签 + 卡片网格 ===== */
.os-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

/* 系统分类标签：直角，跟弹性云开通页(server/cloud/default.asp)保持一致。
   原来是 border-radius:20px 的胶囊，弹性云早就在页内覆盖成直角了，
   两边风格对不上，这里把基础样式直接对齐，省得再各写各的。
   本站只有 server/buy.asp 用这组 class，改这里不影响其它 buy 页。 */
.os-type-tab {
  padding: 6px 12px;   /* 16px 时 7 个标签(含「从我的机器克隆」)合计 701px，比容器 696px 宽 5px 刚好换行；收到 12px 省出 56px 稳在一行 */
  font-size: 13px;
  color: #7a8699;
  background: #f5f7fa;
  border: 1px solid #e6e9ef;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
}

.os-type-tab:hover {
  color: #27344a;
  border-color: rgba(37,99,235,0.3);
  background: rgba(37,99,235,0.08);
}

.os-type-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border-color: transparent;
}

.os-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;
  align-content: start;
}

.os-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f7f9fc;
  border: 1px solid #e6e9ef;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s;
}

.os-card:hover {
  background: rgba(37,99,235,0.08);
  border-color: rgba(37,99,235,0.25);
}

.os-card.active {
  background: rgba(37,99,235,0.12);
  border-color: rgba(37,99,235,0.5);
  box-shadow: 0 0 0 1px rgba(37,99,235,0.3);
}

.os-card-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.os-card-name {
  font-size: 13px;
  color: #5f6b7e;
  line-height: 1.3;
}

/* 加载旋转动画（提交按钮） */
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== SSL 申请页专属 ===== */
.ssl-brand-badge{ display:inline-block; padding:5px 14px; font-size:13px; font-weight:700; color:#fff; line-height:1.4; }
.ssl-type-dv{ background:#10b981; }
.ssl-type-ov{ background:#2563eb; }
.ssl-type-ev{ background:linear-gradient(135deg,#f59e0b,#d97706); }
.ssl-domains-input{ display:flex; flex-direction:column; gap:10px; }
.ssl-domain-row{ display:flex; gap:10px; align-items:center; }
.ssl-domain-row .product-buy-input{ flex:1; }
.ssl-domain-row .ssl-remove-domain{ flex:0 0 auto; width:40px; height:44px; display:flex; align-items:center; justify-content:center; color:#ef4444; background:#fff; border:1px solid #e6e9ef; cursor:pointer; }
.ssl-domain-row .ssl-remove-domain:hover{ border-color:#ef4444; background:#fef2f2; }
.ssl-add-domain-btn{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:9px 16px; font-size:14px; font-weight:600; color:#2563eb; background:#fff; border:1px solid #e6e9ef; cursor:pointer; transition:.2s; }
.ssl-add-domain-btn:hover{ border-color:#2563eb; background:#f5f8fc; }

.product-password-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.product-password-help{margin:12px 0 0;color:var(--text-muted,#64748b);font-size:13px;line-height:1.8;}
@media(max-width:575px){.product-password-fields{grid-template-columns:1fr;gap:16px;}}

.product-password-group{width:100%;min-width:0;}