/* ============================================================
   orderform.css — Orderform styles for sixv2 / redcheap_professional
   v2026032601
   ============================================================ */

/* ===== SHARED UTILITIES ===== */
.w-hidden { display: none !important; }
.alert { padding: 0.875rem 1.25rem; border-radius: 12px; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-danger  { background: rgba(239,68,68,0.1);  border: 1px solid rgba(239,68,68,0.2);  color: #f87171; }
.alert-warning { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); color: #fbbf24; }
.alert-success { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); color: #34d399; }
.alert-info    { background: rgba(99,102,241,0.1);  border: 1px solid rgba(99,102,241,0.2);  color: #818cf8; }
.alert ul { margin: 6px 0 0; padding-left: 1.25rem; }
.hp-card-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-size: 0.9rem; font-weight: 700; border-radius: 12px; text-decoration: none; transition: all 0.2s; }
.hp-card-btn:hover { box-shadow: 0 8px 24px rgba(139,92,246,0.45); color: #fff; text-decoration: none; }

/* ===== CONFIGURE PRODUCT ===== */
.cp-wrap { width: 100%; min-height: 100vh; padding-bottom: 4rem; }
.cp-inner { max-width: 1400px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.cp-layout { display: flex; gap: 2.5rem; align-items: flex-start; }
.cp-main { flex: 1; min-width: 0; }
.cp-sidebar { width: 360px; flex-shrink: 0; }
@media (max-width: 1024px) { .cp-layout { flex-direction: column; } .cp-sidebar { width: 100%; } }
.cp-specs-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.cp-spec-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; border: 1px solid; }
.cp-spec-pill.purple { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.2); color: #a78bfa; }
.cp-spec-pill.amber  { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); color: #fbbf24; }
.cp-spec-pill.blue   { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.2); color: #60a5fa; }
.cp-spec-pill.gray   { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #cbd5e1; }
.cp-errors { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #f87171; padding: 1rem; border-radius: 12px; margin-bottom: 2rem; font-size: 0.875rem; display: none; }
.cp-errors.visible { display: block; }
.cp-errors p { font-weight: 700; margin: 0 0 8px; }
.cp-errors ul { margin: 0; padding-left: 1.25rem; }
.cp-section { margin-bottom: 2.5rem; }
.cp-section-title { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; color: #e2e8f0; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.cp-section-title i { color: #8b5cf6; font-size: 0.8rem; }
.cp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.cp-grid-1 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (max-width: 768px) { .cp-grid-2 { grid-template-columns: 1fr; } }
.cp-col-span-2 { grid-column: 1 / -1; }
.cp-label { display: block; font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.custom-input, .cp-wrap select, .cp-wrap input[type="text"], .cp-wrap input[type="password"], .cp-wrap input[type="number"] { width: 100%; background: #1c1833; border: 1px solid rgba(139,92,246,0.15); border-radius: 10px; color: #e2e8f0; padding: 10px 14px; font-size: 0.9375rem; font-family: inherit; box-sizing: border-box; outline: none; transition: border-color 0.2s; height: auto; }
.custom-input:focus, .cp-wrap select:focus, .cp-wrap input:focus { border-color: rgba(139,92,246,0.4); box-shadow: 0 0 0 3px rgba(139,92,246,0.08); }
.cp-wrap select { height: 44px; cursor: pointer; }
.option-box { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #1c1833; border: 1px solid rgba(139,92,246,0.1); border-radius: 12px; cursor: pointer; transition: all 0.15s; user-select: none; }
.option-box:hover { border-color: rgba(139,92,246,0.3); }
.option-box.selected-box { border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.08); }
.hidden-input-wrapper { display: none; }
.custom-radio-icon, .custom-checkbox-icon { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(139,92,246,0.3); flex-shrink: 0; transition: all 0.15s; }
.custom-checkbox-icon { border-radius: 5px; }
.option-box.selected-box .custom-radio-icon, .option-box.selected-box .custom-checkbox-icon { background: #8b5cf6; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,0.2); }
.option-box-text { font-size: 0.9rem; color: #e2e8f0; font-weight: 500; }
.cp-addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 768px) { .cp-addon-grid { grid-template-columns: 1fr; } }
.cp-addon-box { display: flex; flex-direction: column; height: 100%; padding: 1.25rem; background: #1c1833; border: 1px solid rgba(139,92,246,0.1); border-radius: 12px; cursor: pointer; transition: all 0.15s; }
.cp-addon-box:hover { border-color: rgba(139,92,246,0.3); }
.cp-addon-box.selected-box { border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.08); }
.cp-addon-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cp-addon-name { font-size: 0.9375rem; font-weight: 600; color: #e2e8f0; }
.cp-addon-desc { font-size: 0.8125rem; color: #64748b; line-height: 1.6; margin-bottom: auto; padding-bottom: 1rem; }
.cp-addon-price { padding-top: 0.75rem; border-top: 1px solid rgba(139,92,246,0.1); text-align: center; color: #8b5cf6; font-weight: 700; font-size: 0.9375rem; }
.cp-qty-wrap { display: flex; align-items: center; gap: 12px; }
.cp-qty-wrap .custom-input { width: 100px !important; }
.cp-qty-label { color: #64748b; font-weight: 600; font-size: 0.875rem; }
.cp-contact-hint { border: 1px dashed rgba(139,92,246,0.2); border-radius: 12px; padding: 1rem; text-align: center; font-size: 0.875rem; color: #fbbf24; }
.cp-contact-hint a { color: #fff; font-weight: 700; text-decoration: none; margin-left: 4px; }
.cp-contact-hint a:hover { color: #fbbf24; }
.secondary-cart-sidebar { background: #16132a; border: 1px solid rgba(139,92,246,0.12); border-radius: 16px; overflow: hidden; position: sticky; top: 1.5rem; }

/* ===== CHECKOUT ===== */
.checkout-wrap { max-width: 860px; margin: 0 auto; padding: 0 0 3rem; }
.sub-heading { margin: 2rem 0 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(139,92,246,0.1); }
.sub-heading .primary-bg-color { font-size: 1rem; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.06em; }
.already-registered { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.12); border-radius: 12px; margin-bottom: 1.5rem; flex-wrap: wrap; }
.already-registered p { color: #94a3b8; font-size: 0.9rem; margin: 0; }
.already-registered .co-btn-info, .already-registered .co-btn-warning { padding: 8px 18px; border-radius: 9px; font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; }
.already-registered .co-btn-info { background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.25); }
.already-registered .co-btn-info:hover { background: rgba(99,102,241,0.25); }
.already-registered .co-btn-warning { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
.already-registered .co-btn-warning:hover { background: rgba(245,158,11,0.25); }
.checkout-error-feedback { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #f87171; padding: 1rem 1.25rem; border-radius: 12px; margin-bottom: 1.5rem; font-size: 0.875rem; }
.checkout-error-feedback p { font-weight: 700; margin: 0 0 6px; }
.checkout-error-feedback ul { margin: 0; padding-left: 1.25rem; }
.co-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.co-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.co-grid-4-5-3 { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: 1rem; }
.co-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .co-grid-2, .co-grid-3, .co-grid-4-5-3 { grid-template-columns: 1fr; } .co-full { grid-column: 1; } }
.co-field-wrap { position: relative; margin-bottom: 0; }
.co-field-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #8b5cf6; font-size: 0.8rem; pointer-events: none; z-index: 1; }
.field, .field.form-control, .checkout-wrap input[type="text"], .checkout-wrap input[type="email"], .checkout-wrap input[type="tel"], .checkout-wrap input[type="password"], .checkout-wrap select, .checkout-wrap textarea { width: 100%; background: #1c1833; border: 1px solid rgba(139,92,246,0.15); border-radius: 10px; color: #e2e8f0; padding: 10px 14px 10px 38px; font-size: 0.9375rem; font-family: inherit; box-sizing: border-box; outline: none; transition: border-color 0.2s; height: auto; -webkit-appearance: none; appearance: none; }
.checkout-wrap select { height: 44px; cursor: pointer; padding-left: 38px; }
.checkout-wrap textarea { min-height: 100px; resize: vertical; padding: 12px 14px; }
.field:focus, .field.form-control:focus, .checkout-wrap input:focus, .checkout-wrap select:focus, .checkout-wrap textarea:focus { border-color: rgba(139,92,246,0.45); box-shadow: 0 0 0 3px rgba(139,92,246,0.1); }
.field::placeholder { color: #4a5568; }
.field-error-msg { font-size: 0.75rem; color: #f87171; margin-top: 4px; display: none; }
.field-error-msg:not(:empty) { display: block; }
.field-help-text { font-size: 0.8rem; color: #64748b; margin-top: 4px; display: block; }
.checkout-wrap select.no-icon, .checkout-wrap textarea { padding-left: 14px; }
.account-select-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }
@media (max-width: 640px) { .account-select-container { grid-template-columns: 1fr; } }
.account { background: #1c1833; border: 1px solid rgba(139,92,246,0.1); border-radius: 12px; padding: 1rem; cursor: pointer; transition: all 0.15s; }
.account.active, .account:hover { border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.07); }
.account label.radio-inline { cursor: pointer; display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; }
.account input[type="radio"] { margin-top: 3px; accent-color: #8b5cf6; flex-shrink: 0; }
.account .address { font-size: 0.875rem; color: #94a3b8; line-height: 1.5; }
.account .address strong { color: #e2e8f0; display: block; margin-bottom: 2px; }
.account .address .small { font-size: 0.8rem; }
.label-default { background: rgba(71,85,105,0.2); color: #94a3b8; padding: 2px 8px; border-radius: 100px; font-size: 0.7rem; font-weight: 600; }
.label-info { background: rgba(99,102,241,0.15); color: #818cf8; padding: 2px 8px; border-radius: 100px; font-size: 0.7rem; font-weight: 600; }
.password-strength-meter { margin-top: 8px; }
.progress { background: rgba(139,92,246,0.1); border-radius: 100px; height: 6px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 100px; transition: width 0.3s; background: #8b5cf6; }
#passwordStrengthTextLabel { font-size: 0.75rem; color: #64748b; margin-top: 4px; text-align: center; }
.tt-payment-container h6 { font-size: 0.8rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.tt-payment-gateways { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-payment-gateways label.radio-inline { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: #1c1833; border: 1px solid rgba(139,92,246,0.12); border-radius: 9px; cursor: pointer; font-size: 0.875rem; color: #94a3b8; transition: all 0.15s; margin: 0; }
.tt-payment-gateways label.radio-inline:hover { border-color: rgba(139,92,246,0.3); color: #e2e8f0; }
.tt-payment-gateways input[type="radio"] { accent-color: #8b5cf6; }
.tt-payment-gateways label.radio-inline:has(input:checked) { border-color: rgba(139,92,246,0.45); background: rgba(139,92,246,0.08); color: #a78bfa; }
.gateway-errors { margin-top: 0.75rem; }
.cc-input-container { margin-top: 1rem; }
.existing-cc-grid { margin-bottom: 1rem; }
.cvv-input { margin-bottom: 0.75rem; }
.input-group { display: flex; }
.input-group .field { border-radius: 10px 0 0 10px !important; }
.input-group-btn button, .input-group-append button { background: #1c1833; border: 1px solid rgba(139,92,246,0.15); border-left: none; border-radius: 0 10px 10px 0; color: #a78bfa; padding: 0 14px; cursor: pointer; font-weight: 700; transition: background 0.15s; }
.input-group-btn button:hover, .input-group-append button:hover { background: rgba(139,92,246,0.1); }
.new-card-container .field { padding-left: 38px; }
.checkout-wrap ul { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.checkout-wrap ul li { margin-bottom: 6px; }
.checkout-wrap ul li label.radio-inline { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.875rem; color: #94a3b8; }
.checkout-wrap ul li label.radio-inline input { accent-color: #8b5cf6; }
.apply-credit-container { background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.15); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.apply-credit-container p { color: #6ee7b7; font-size: 0.9rem; margin-bottom: 0.75rem; }
.apply-credit-container label.radio { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.875rem; color: #94a3b8; margin-bottom: 6px; }
.apply-credit-container label.radio input { accent-color: #10b981; }
.marketing-email-optin { background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.12); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; }
.marketing-email-optin h4 { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin: 0 0 6px; }
.marketing-email-optin p { color: #94a3b8; font-size: 0.875rem; margin: 0 0 10px; }
.tt-tos-section { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.2); border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem; }
.tt-tos-header { padding: 0.875rem 1.25rem; background: rgba(245,158,11,0.1); color: #fbbf24; font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.tt-tos-body { padding: 1rem 1.25rem; }
.tt-tos-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.875rem; color: #94a3b8; }
.tt-tos-checkbox { accent-color: #f59e0b; width: 16px; height: 16px; }
.tt-tos-label a { color: #fbbf24; text-decoration: none; }
.tt-tos-label a:hover { text-decoration: underline; }
.tt-captcha-join-mail { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.co-btn-submit { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-size: 1rem; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: all 0.2s; text-decoration: none; }
.co-btn-submit:hover { box-shadow: 0 6px 24px rgba(139,92,246,0.45); transform: translateY(-1px); }
.co-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.btn-primary.btn-lg, #btnCompleteOrder { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff !important; font-size: 1rem; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: all 0.2s; }
.btn.btn-primary.btn-lg:hover, #btnCompleteOrder:hover { box-shadow: 0 6px 24px rgba(139,92,246,0.45); }
.btn.btn-primary.btn-lg:disabled, #btnCompleteOrder:disabled { opacity: 0.5; cursor: not-allowed; }
.generate-password { padding: 8px 16px; background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.15); border-radius: 9px; color: #a78bfa; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.generate-password:hover { background: rgba(139,92,246,0.15); }
.checkout-security-msg { margin-top: 1rem; font-size: 0.8rem; color: #64748b; text-align: center; background: none; border: none; }
#totalDueToday { margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
#totalCartPrice { font-size: 1.25rem; font-weight: 800; color: #a78bfa; }
.store-domain-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 0; margin-bottom: 0; list-style: none; border-bottom: 1px solid rgba(139,92,246,0.1); }
.store-domain-tabs li { margin: 0; }
.store-domain-tabs li a { display: inline-flex; align-items: center; padding: 10px 16px; font-size: 0.8125rem; font-weight: 600; color: #64748b; border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; transition: all 0.15s; margin-bottom: -1px; }
.store-domain-tabs li a:hover { color: #a78bfa; }
.store-domain-tabs li.active a { color: #8b5cf6; border-bottom-color: #8b5cf6; }
.store-domain-tab-content { padding: 1.25rem 0 0; }
.store-domain-tab-content .tab-pane { display: none; }
.store-domain-tab-content .tab-pane.active { display: block; }
.field-container { margin-top: 0; }
.checkout-wrap .field.form-control[rows] { padding-left: 14px; }

/* ===== VIEW CART ===== */
.vc-app-container { max-width: 1200px; margin: 0 auto; padding: 0 0 3rem; }
.vc-main-grid { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: flex-start; }
@media (max-width: 960px) { .vc-main-grid { grid-template-columns: 1fr; } }
.vc-main-content { display: flex; flex-direction: column; gap: 1rem; }
.product-cart-card { background: #16132a; border: 1px solid rgba(139,92,246,0.1); border-radius: 16px; overflow: hidden; }
.product-cart-hdr { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.25rem; background: #1c1833; border-bottom: 1px solid rgba(139,92,246,0.08); font-size: 0.8rem; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.06em; }
.item-category-tag { display: inline-flex; align-items: center; padding: 3px 10px; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.15); border-radius: 100px; font-size: 0.7rem; font-weight: 700; color: #a78bfa; text-transform: uppercase; }
.item-main-row { display: flex !important; flex-direction: row !important; align-items: flex-start; padding: 1.25rem; }
.item-identity { flex: 1; min-width: 0; width: 100%; }
.item-title-text { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin-bottom: 6px; }
.item-price-inline { text-align: right; flex-shrink: 0; min-width: 90px; }
@media (max-width: 768px) { .item-main-row { flex-direction: row !important; } }
.item-domain-line { font-size: 0.875rem; color: #64748b; margin-bottom: 8px; }
.item-domain-line i { margin-right: 6px; color: #8b5cf6; }
.item-config-box { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.item-config-box > div { font-size: 0.8125rem; color: #64748b; display: flex; align-items: center; gap: 6px; }
.item-config-box i { color: #8b5cf6; font-size: 0.7rem; }
.item-config-box strong { color: #94a3b8; }
.item-price-column { text-align: right; flex-shrink: 0; min-width: 100px; }
.price-big { font-size: 1.1rem; font-weight: 800; color: #e2e8f0; }
.cycle-small { font-size: 0.75rem; color: #64748b; }
.vc-addon-row { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.25rem; background: rgba(139,92,246,0.03); border-top: 1px solid rgba(139,92,246,0.06); }
.vc-addon-name { font-size: 0.875rem; font-weight: 600; color: #e2e8f0; }
.vc-addon-sub { font-size: 0.75rem; color: #64748b; }
.vc-addon-price { font-size: 0.875rem; font-weight: 700; color: #e2e8f0; text-align: right; }
.item-actions-row { display: flex; align-items: center; padding: 0.75rem 1.25rem; border-top: 1px solid rgba(139,92,246,0.06); gap: 8px; }
.action-btn-vc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid; transition: all 0.15s; background: none; }
.action-btn-vc.edit { color: #a78bfa; border-color: rgba(139,92,246,0.2); }
.action-btn-vc.edit:hover { background: rgba(139,92,246,0.1); text-decoration: none; }
.action-btn-vc.del { color: #f87171; border-color: rgba(239,68,68,0.2); }
.action-btn-vc.del:hover { background: rgba(239,68,68,0.08); text-decoration: none; }
.promo-container-new { background: #16132a; border: 1px solid rgba(139,92,246,0.1); border-radius: 14px; padding: 1.25rem; }
.promo-container-new > div:first-child { font-size: 0.8rem; font-weight: 700; color: #e2e8f0; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.promo-container-new i { color: #8b5cf6; margin-right: 6px; }
.promo-input-wrap { display: flex; gap: 0; }
.promo-input-wrap input { flex: 1; background: #1c1833; border: 1px solid rgba(139,92,246,0.15); border-radius: 10px 0 0 10px; color: #e2e8f0; padding: 10px 14px; font-size: 0.9rem; font-family: inherit; outline: none; transition: border-color 0.2s; }
.promo-input-wrap input:focus { border-color: rgba(139,92,246,0.4); }
.promo-submit-btn { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; border: none; border-radius: 0 10px 10px 0; padding: 0 20px; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: box-shadow 0.2s; white-space: nowrap; }
.promo-submit-btn:hover { box-shadow: 0 4px 16px rgba(139,92,246,0.4); }
.vc-sidebar-sticky { position: sticky; top: 1.5rem; }
.vc-summary-card { background: #16132a; border: 1px solid rgba(139,92,246,0.12); border-radius: 16px; overflow: hidden; }
.vc-summary-hdr { padding: 1rem 1.25rem; background: #1c1833; border-bottom: 1px solid rgba(139,92,246,0.08); font-size: 0.85rem; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.06em; }
.vc-summary-body { padding: 1.25rem; }
.sum-line { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(139,92,246,0.06); font-size: 0.875rem; }
.sum-line:last-of-type { border-bottom: none; }
.sum-line .text-muted { color: #64748b; }
.sum-line .text-success { color: #34d399 !important; }
.sum-total-box { margin-top: 1rem; padding: 1rem; background: rgba(139,92,246,0.06); border-radius: 12px; text-align: center; }
.sum-total-box .small { font-size: 0.7rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.big-amt { font-size: 1.75rem; font-weight: 900; color: #a78bfa; }
.btn-checkout-now { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-size: 0.9375rem; font-weight: 700; border-radius: 12px; text-decoration: none; transition: all 0.2s; margin-top: 1rem; box-sizing: border-box; }
.btn-checkout-now:hover { box-shadow: 0 6px 24px rgba(139,92,246,0.4); transform: translateY(-1px); color: #fff; text-decoration: none; }
.continue-shopping { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; color: #64748b; font-size: 0.8125rem; text-decoration: none; margin-top: 8px; transition: color 0.15s; }
.continue-shopping:hover { color: #a78bfa; text-decoration: none; }
.vc-empty-cart { display: flex; justify-content: flex-end; margin-top: 0.5rem; }

/* ===== ORDER SUMMARY SIDEBAR ===== */
.summary-card { background: #16132a; border: 1px solid rgba(139,92,246,0.12); border-radius: 16px; overflow: hidden; }
.summary-header { padding: 1rem 1.25rem; background: #1c1833; border-bottom: 1px solid rgba(139,92,246,0.08); font-size: 0.8rem; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; }
.summary-body { padding: 1.25rem; }
.summary-product-row { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(139,92,246,0.08); }
.summary-product-name { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin: 0 0 4px; }
.summary-price-badge { background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.2); color: #a78bfa; padding: 4px 12px; border-radius: 100px; font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.summary-group-name { font-size: 0.7rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.summary-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.summary-config-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(139,92,246,0.06); font-size: 0.8125rem; }
.summary-config-row .lbl { color: #64748b; display: flex; align-items: center; gap: 6px; }
.summary-config-row .val { color: #e2e8f0; font-weight: 700; }
.summary-addon-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 0.8125rem; color: #34d399; font-weight: 600; }
.summary-setup { display: flex; justify-content: space-between; font-size: 0.8rem; color: #64748b; margin-bottom: 8px; }
.summary-due-label { font-size: 0.7rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.summary-total-amount { font-size: 1.5rem; font-weight: 900; color: #a78bfa; }
.summary-submit-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-size: 0.9375rem; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s; margin-top: 1rem; }
.summary-submit-btn:hover { box-shadow: 0 6px 20px rgba(139,92,246,0.4); }

/* ===== DOMAIN TRANSFER ===== */
.dt-wrap { max-width: 700px; margin: 0 auto; padding: 0 0 3rem; }
.dt-card { background: #16132a; border: 1px solid rgba(139,92,246,0.1); border-radius: 16px; overflow: hidden; }
.dt-card-head { padding: 1.25rem 1.5rem; background: #1c1833; border-bottom: 1px solid rgba(139,92,246,0.08); }
.dt-card-head h3 { font-size: 1.1rem; font-weight: 700; color: #e2e8f0; margin: 0; }
.dt-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.dt-card-footer { padding: 1.25rem 1.5rem; background: #1c1833; border-top: 1px solid rgba(139,92,246,0.08); }
.dt-label { display: block; font-size: 0.8rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.dt-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dt-label-row a { color: #a78bfa; font-size: 0.75rem; text-decoration: none; }
.dt-field { width: 100%; background: #1c1833; border: 1px solid rgba(139,92,246,0.15); border-radius: 10px; color: #e2e8f0; padding: 10px 14px; font-size: 0.9375rem; font-family: inherit; box-sizing: border-box; outline: none; transition: border-color 0.2s; }
.dt-field:focus { border-color: rgba(139,92,246,0.4); }
.dt-field::placeholder { color: #4a5568; }
.dt-submit { display: inline-flex; align-items: center; gap: 8px; padding: 11px 28px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-size: 0.9375rem; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.dt-submit:hover { box-shadow: 0 6px 20px rgba(139,92,246,0.4); }
.dt-note { font-size: 0.8rem; color: #64748b; margin-top: 1rem; }

/* ===== CONFIGURE DOMAINS ===== */
.cd-wrap { max-width: 860px; margin: 0 auto; padding: 0 0 3rem; }
.cd-card { background: #16132a; border: 1px solid rgba(139,92,246,0.1); border-radius: 16px; overflow: hidden; margin-bottom: 1.5rem; }
.cd-sub-head { padding: 0.875rem 1.25rem; border-bottom: 1px solid rgba(139,92,246,0.08); background: rgba(139,92,246,0.06); }
.cd-sub-head span { font-size: 0.9rem; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.06em; }
.cd-body { padding: 1.25rem 1.5rem; }
.cd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 640px) { .cd-grid-2 { grid-template-columns: 1fr; } }
.cd-label { display: block; font-size: 0.8rem; font-weight: 700; color: #94a3b8; margin-bottom: 6px; }
.cd-value { font-size: 0.9375rem; color: #e2e8f0; font-weight: 500; }
.cd-field { width: 100%; background: #1c1833; border: 1px solid rgba(139,92,246,0.15); border-radius: 10px; color: #e2e8f0; padding: 10px 14px; font-size: 0.9375rem; font-family: inherit; box-sizing: border-box; outline: none; transition: border-color 0.2s; }
.cd-field:focus { border-color: rgba(139,92,246,0.4); }
.cd-field-help { font-size: 0.8rem; color: #64748b; margin-top: 4px; display: block; }
.cd-status-ok { color: #34d399; font-weight: 600; font-size: 0.875rem; }
.cd-status-warn { color: #f87171; font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.cd-addons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.cd-addon-panel { background: #1c1833; border: 1px solid rgba(139,92,246,0.1); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.15s; }
.cd-addon-panel.selected { border-color: rgba(139,92,246,0.4); }
.cd-addon-panel:hover { border-color: rgba(139,92,246,0.25); }
.cd-addon-body { padding: 1rem; }
.cd-addon-body label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cd-addon-body input[type="checkbox"] { accent-color: #8b5cf6; margin-top: 2px; flex-shrink: 0; }
.cd-addon-name { font-size: 0.875rem; font-weight: 600; color: #e2e8f0; display: block; margin-bottom: 4px; }
.cd-addon-desc { font-size: 0.8rem; color: #64748b; line-height: 1.5; }
.cd-addon-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: rgba(139,92,246,0.04); border-top: 1px solid rgba(139,92,246,0.08); }
.cd-addon-price { font-size: 0.875rem; font-weight: 700; color: #a78bfa; }
.cd-addon-add { font-size: 0.75rem; font-weight: 600; color: #64748b; display: flex; align-items: center; gap: 5px; }
.cd-ns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .cd-ns-grid { grid-template-columns: 1fr; } }
.cd-submit { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-size: 1rem; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: all 0.2s; }
.cd-submit:hover { box-shadow: 0 6px 20px rgba(139,92,246,0.4); }

/* ===== CONFIGURE PRODUCT DOMAIN ===== */
.cpd-wrap { max-width: 860px; margin: 0 auto; padding: 0 0 3rem; }
.domain-selection-options { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.domain-option-card { background: #16132a; border: 1px solid rgba(139,92,246,0.1); border-radius: 14px; overflow: hidden; }
.domain-option-label { display: flex; align-items: center; gap: 10px; padding: 1rem 1.25rem; cursor: pointer; transition: background 0.15s; }
.domain-option-label:hover { background: rgba(139,92,246,0.04); }
.domain-option-label input[type="radio"] { accent-color: #8b5cf6; width: 16px; height: 16px; flex-shrink: 0; }
.domain-option-text { font-size: 0.9375rem; font-weight: 600; color: #e2e8f0; }
.domain-input-group { padding: 0 1.25rem 1.25rem; display: none; }
.domain-input-group.show { display: block; }
.domain-input-row { display: grid; grid-template-columns: 3fr 1fr; gap: 10px; align-items: flex-end; }
@media (max-width: 640px) { .domain-input-row { grid-template-columns: 1fr; } }
.dom-prefix-text { background: #1c1833; border: 1px solid rgba(139,92,246,0.15); border-right: none; border-radius: 10px 0 0 10px; color: #64748b; padding: 10px 12px; font-size: 0.875rem; white-space: nowrap; height: 44px; display: flex; align-items: center; }
.dom-input-main { flex: 1; background: #1c1833; border: 1px solid rgba(139,92,246,0.15); color: #e2e8f0; padding: 10px 12px; font-size: 0.9375rem; font-family: inherit; outline: none; transition: border-color 0.2s; height: 44px; box-sizing: border-box; }
.dom-input-main.has-prefix { border-radius: 0; }
.dom-input-main.no-prefix { border-radius: 10px 0 0 10px; }
.dom-input-main:focus { border-color: rgba(139,92,246,0.4); }
.dom-select-tld { background: #1c1833; border: 1px solid rgba(139,92,246,0.15); border-left: none; border-radius: 0 10px 10px 0; color: #e2e8f0; padding: 0 10px; font-size: 0.875rem; font-family: inherit; outline: none; cursor: pointer; height: 44px; }
.dom-field { width: 100%; background: #1c1833; border: 1px solid rgba(139,92,246,0.15); border-radius: 10px; color: #e2e8f0; padding: 10px 14px; font-size: 0.9375rem; font-family: inherit; outline: none; transition: border-color 0.2s; box-sizing: border-box; height: 44px; }
.dom-field:focus { border-color: rgba(139,92,246,0.4); }
.dom-select { background: #1c1833; border: 1px solid rgba(139,92,246,0.15); border-radius: 10px; color: #e2e8f0; padding: 0 12px; font-family: inherit; outline: none; cursor: pointer; height: 44px; width: 100%; }
.dom-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 20px; background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; font-size: 0.875rem; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; height: 44px; white-space: nowrap; transition: box-shadow 0.2s; }
.dom-btn:hover { box-shadow: 0 4px 16px rgba(139,92,246,0.4); }
#btnDomainContinue { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-size: 1rem; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: all 0.2s; margin-top: 1.5rem; }
#btnDomainContinue:hover { box-shadow: 0 6px 20px rgba(139,92,246,0.4); }
.free-domain-note { font-size: 0.8rem; color: #64748b; font-style: italic; margin-top: 1rem; }

/* ===== DOMAIN REGISTER ===== */
.dr-wrap { max-width: 1100px; margin: 0 auto; padding: 0 0 3rem; }
.dr-search-box { background: linear-gradient(135deg, #1c1833, #16132a); border: 1px solid rgba(139,92,246,0.15); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; }
.dr-search-form { display: flex; max-width: 700px; margin: 0 auto; }
.dr-search-input { flex: 1; background: #0a0914; border: 1px solid rgba(139,92,246,0.2); border-right: none; border-radius: 12px 0 0 12px; color: #e2e8f0; padding: 12px 18px; font-size: 1rem; font-family: inherit; outline: none; transition: border-color 0.2s; }
.dr-search-input:focus { border-color: rgba(139,92,246,0.45); }
.dr-search-input::placeholder { color: #4a5568; }
.dr-search-btn { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; border: none; border-radius: 0 12px 12px 0; padding: 0 28px; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: box-shadow 0.2s; white-space: nowrap; }
.dr-search-btn:hover { box-shadow: 0 4px 16px rgba(139,92,246,0.4); }
.domain-checker-result-headline { color: #94a3b8; font-size: 0.9rem; }
.domain-lookup-loader { display: flex; align-items: center; gap: 8px; padding: 1rem 0; color: #a78bfa; }
.domain-lookup-result { padding: 1.25rem; background: #16132a; border: 1px solid rgba(139,92,246,0.1); border-radius: 12px; margin-bottom: 1rem; }
.domain-checker-available { color: #34d399; font-weight: 700; }
.domain-checker-unavailable, .domain-checker-invalid { color: #f87171; font-weight: 600; }
.domain-price { margin-top: 1rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.domain-price .price { font-size: 1.25rem; font-weight: 800; color: #a78bfa; }
.btn-add-to-cart { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; border: none; border-radius: 10px; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.btn-add-to-cart:hover { box-shadow: 0 4px 16px rgba(139,92,246,0.4); }
.domain-contact-support { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); border-radius: 10px; color: #818cf8; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.spotlight-tlds { margin: 1.5rem 0; }
.spotlight-tlds-container { display: flex; flex-wrap: wrap; gap: 10px; }
.spotlight-tld-container { flex: 1; min-width: 120px; max-width: 200px; }
.spotlight-tld { background: #16132a; border: 1px solid rgba(139,92,246,0.1); border-radius: 12px; padding: 1rem; text-align: center; font-size: 1.25rem; font-weight: 800; color: #e2e8f0; transition: border-color 0.15s; }
.spotlight-tld:hover { border-color: rgba(139,92,246,0.3); }
.suggested-domains { background: #16132a; border: 1px solid rgba(139,92,246,0.1); border-radius: 14px; overflow: hidden; margin-bottom: 2rem; }
.suggested-domains .card-header, .suggested-domains .panel-heading { padding: 0.875rem 1.25rem; background: #1c1833; font-size: 0.8rem; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.06em; }
.suggested-domains .card-body, .suggested-domains .panel-body { padding: 1rem 1.25rem; color: #94a3b8; }
.domain-suggestion.list-group-item { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.25rem; border-top: 1px solid rgba(139,92,246,0.06); flex-wrap: wrap; gap: 8px; }
.domain-suggestion .domain { font-weight: 700; color: #e2e8f0; }
.domain-suggestion .extension { color: #8b5cf6; }
.domain-suggestion .price { color: #a78bfa; font-weight: 700; }
.domain-suggestion .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-footer, .panel-footer { padding: 0.75rem 1.25rem; text-align: center; border-top: 1px solid rgba(139,92,246,0.06); }
.card-footer a, .panel-footer a { color: #a78bfa; font-size: 0.875rem; text-decoration: none; }
.tld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
.tld-filters a { display: inline-flex; align-items: center; padding: 6px 14px; background: #1c1833; border: 1px solid rgba(139,92,246,0.1); border-radius: 100px; color: #94a3b8; font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: all 0.15s; cursor: pointer; }
.tld-filters a:hover, .tld-filters a.active { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.25); color: #a78bfa; }
.tt-domain-list-wrap { background: #16132a; border: 1px solid rgba(139,92,246,0.1); border-radius: 14px; overflow: hidden; }
.tld-pricing-header { display: grid; grid-template-columns: 1fr 3fr; background: #1c1833; }
.tld-pricing-header-left { padding: 10px 16px; font-size: 0.75rem; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.06em; }
.tld-pricing-header-right { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.tld-pricing-header-right span { padding: 10px; font-size: 0.75rem; font-weight: 700; color: #a78bfa; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }
.tld-row { display: grid; grid-template-columns: 1fr 3fr; border-top: 1px solid rgba(139,92,246,0.06); }
.tld-row:hover { background: rgba(139,92,246,0.03); }
.tld-row.no-tlds { grid-template-columns: 1fr; }
.tld-name { padding: 12px 16px; font-weight: 700; color: #e2e8f0; display: flex; align-items: center; gap: 8px; }
.tld-sale-group { font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; text-transform: uppercase; }
.tld-sale-group-hot  { background: rgba(239,68,68,0.1);  color: #f87171; }
.tld-sale-group-new  { background: rgba(16,185,129,0.1); color: #34d399; }
.tld-sale-group-sale { background: rgba(245,158,11,0.1); color: #fbbf24; }
.tld-prices { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.tt-domain-price-cycle { padding: 12px; text-align: center; font-size: 0.875rem; font-weight: 600; color: #e2e8f0; }
.tt-domain-price-cycle small { display: block; color: #64748b; font-size: 0.75rem; font-weight: 400; margin-top: 2px; }
.featured-tlds-container { margin-bottom: 2rem; }
.featured-tlds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.featured-tld { background: #16132a; border: 1px solid rgba(139,92,246,0.1); border-radius: 12px; padding: 1.25rem; text-align: center; transition: border-color 0.15s; }
.featured-tld:hover { border-color: rgba(139,92,246,0.25); }
.featured-tld .img-container { margin-bottom: 0.75rem; }
.featured-tld .img-container img { max-height: 40px; max-width: 80px; object-fit: contain; }
.featured-tld .price { font-weight: 700; color: #a78bfa; font-size: 0.9rem; }
.dr-promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 640px) { .dr-promo-grid { grid-template-columns: 1fr; } }
.domain-promo-box { background: #16132a; border: 1px solid rgba(139,92,246,0.1); border-radius: 14px; padding: 1.5rem; }
.domain-promo-box-head { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.domain-promo-box-head i { font-size: 2rem; color: #8b5cf6; }
.domain-promo-box h3 { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin: 0 0 4px; }
.domain-promo-box p { color: #94a3b8; font-size: 0.875rem; margin: 0; }
.dr-btn-default { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.15); border-radius: 10px; color: #a78bfa; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.15s; }
.dr-btn-default:hover { background: rgba(139,92,246,0.15); color: #a78bfa; text-decoration: none; }
.dr-btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 10px; text-decoration: none; transition: box-shadow 0.2s; }
.dr-btn-primary:hover { box-shadow: 0 4px 16px rgba(139,92,246,0.4); color: #fff; text-decoration: none; }
.dr-section-title { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin: 1.5rem 0 1rem; }

/* ===== ORDER COMPLETE ===== */
.order-complete-full-page { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; min-height: 60vh; }
.order-complete-card { background: #16132a; border: 1px solid rgba(139,92,246,0.12); border-radius: 20px; padding: 3rem 2.5rem; max-width: 540px; width: 100%; text-align: center; }
.order-complete-icon { font-size: 4rem; color: #34d399; margin-bottom: 1rem; animation: popIn 0.4s ease; }
@keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.order-complete-title { font-size: 1.75rem; font-weight: 900; color: #e2e8f0; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.order-number-box { background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.15); border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.order-number-label { font-size: 0.875rem; color: #64748b; display: flex; align-items: center; gap: 6px; }
.order-number-value { font-size: 1.25rem; font-weight: 800; color: #a78bfa; }
.order-instructions { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; }
.order-complete-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.btn-continue-area { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 28px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-size: 1rem; font-weight: 700; border-radius: 12px; text-decoration: none; transition: all 0.2s; }
.btn-continue-area:hover { box-shadow: 0 6px 24px rgba(139,92,246,0.4); color: #fff; text-decoration: none; }

/* ===== PRODUCTS GRID ===== */
.products-wrap { width: 100%; min-height: 100vh; padding-bottom: 4rem; }
.products-inner { max-width: 1400px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.products-page-header { text-align: center; margin-bottom: 3rem; }
.products-page-header h1 { font-size: 2.5rem; font-weight: 900; color: #fff; margin: 0 0 0.5rem; letter-spacing: -0.03em; }
.products-page-header p { font-size: 1rem; color: #94a3b8; margin: 0; }
.products-cat-nav { background: rgba(22,19,42,0.6); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 1.25rem; margin-bottom: 3rem; }
.products-cat-nav-head { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.products-cat-icon { width: 40px; height: 40px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.products-cat-title { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; text-transform: uppercase; letter-spacing: 0.06em; }
.products-cat-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.products-cat-list li { margin: 0; }
.products-cat-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 10px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; transition: all 0.2s; border: 1px solid; }
.products-cat-link.active { background: rgba(139,92,246,0.2); color: #a78bfa; border-color: rgba(139,92,246,0.3); }
.products-cat-link.inactive { background: transparent; color: #64748b; border-color: rgba(255,255,255,0.05); }
.products-cat-link.inactive:hover { background: rgba(255,255,255,0.05); color: #e2e8f0; }
.products-cat-badge { background: rgba(0,0,0,0.4); padding: 2px 8px; border-radius: 100px; font-size: 0.65rem; font-weight: 700; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.product-card { position: relative; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; transition: all 0.4s ease; border: 1px solid rgba(255,255,255,0.05); min-height: 500px; background: #0a0914; }
.product-card:hover { border-color: rgba(139,92,246,0.4); transform: translateY(-6px); }
.product-card-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.product-card-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.65; transition: opacity 0.5s, transform 0.7s; }
.product-card:hover .product-card-bg img { opacity: 0.8; transform: scale(1.05); }
.product-card-bg-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, rgba(10,9,20,0.8) 50%, #0a0914); }
.product-card:hover .product-card-bg-overlay { background: linear-gradient(to bottom, transparent, rgba(10,9,20,0.7) 50%, #0a0914); }
.product-featured-badge { position: absolute; top: 1rem; right: 1rem; background: rgba(245,158,11,0.2); border: 1px solid rgba(245,158,11,0.3); color: #fbbf24; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 10px; border-radius: 100px; z-index: 20; }
.product-card-content { position: relative; z-index: 10; display: flex; flex-direction: column; height: 100%; padding: 1.75rem; }
.product-card-name { font-size: 1.5rem; font-weight: 900; color: #fff; margin: 1rem 0 1.5rem; letter-spacing: -0.02em; }
.product-card-price-wrap { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.product-bundle-label { font-size: 0.65rem; color: #a78bfa; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; display: block; margin-bottom: 4px; }
.product-from-label { font-size: 0.65rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; display: block; margin-bottom: 4px; }
.product-price-amount { font-size: 2.25rem; font-weight: 900; color: #fff; display: block; }
.product-price-cycle { font-size: 0.7rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-top: 6px; }
.product-setup-fee { display: inline-block; margin-top: 10px; font-size: 0.65rem; font-weight: 600; color: #cbd5e1; background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05); }
.product-stock { font-size: 0.7rem; font-weight: 700; color: #fbbf24; margin-bottom: 1rem; display: flex; align-items: center; gap: 6px; }
.product-features { flex: 1; margin-bottom: 2rem; }
.plan-feature { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.plan-feature-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.plan-feature-icon.pf-default  { background: rgba(255,255,255,0.05); color: #64748b; }
.plan-feature-icon.pf-ram, .plan-feature-icon.pf-cpu { background: rgba(139,92,246,0.1); color: #a78bfa; }
.plan-feature-icon.pf-storage  { background: rgba(245,158,11,0.1); color: #fbbf24; }
.plan-feature-icon.pf-network  { background: rgba(59,130,246,0.1); color: #60a5fa; }
.plan-feature-icon.pf-security { background: rgba(16,185,129,0.1); color: #34d399; }
.plan-feature-icon i { font-size: 0.65rem; }
.plan-feature-text { font-size: 0.85rem; color: #94a3b8; line-height: 1.4; }
.plan-feature-text strong { color: #e2e8f0; }
.products-empty { text-align: center; padding: 5rem 2rem; background: rgba(255,255,255,0.03); border-radius: 16px; border: 1px solid rgba(255,255,255,0.06); }
.products-empty i { font-size: 3rem; color: #334155; margin-bottom: 1.25rem; display: block; }
.products-empty h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0 0 0.5rem; }