/* ============================================================
   Pricing Page - For Merchants
   ============================================================ */
.pricing-page {
    background: linear-gradient(180deg, #fff8f3 0%, #ffffff 320px);
    color: #1f2937;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Microsoft YaHei", sans-serif;
}
.pricing-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.pricing-page .text-orange { color: #FF6A00; }

/* ============================================================
   Hero
   ============================================================ */
.pricing-hero {
    text-align: center;
    padding: 80px 0 60px;
    position: relative;
}
.pricing-hero-eyebrow {
    display: inline-block;
    background: rgba(255, 106, 0, 0.1);
    color: #FF6A00;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}
.pricing-hero-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 18px;
    color: #111827;
    letter-spacing: -0.5px;
}
.pricing-hero-subtitle {
    font-size: 18px;
    color: #6b7280;
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.65;
}
.pricing-hero-cta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 24px;
}
.pricing-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    color: #6b7280;
    font-size: 14.5px;
}
.pricing-hero-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* Buttons */
.btn-pricing-primary,
.btn-pricing-secondary,
.btn-pricing-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    line-height: 1;
}
.btn-pricing-primary {
    background: linear-gradient(135deg, #FF6A00 0%, #ff8c1a 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 106, 0, 0.3);
}
.btn-pricing-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(255, 106, 0, 0.4);
    color: #fff;
}
.btn-pricing-secondary {
    background: #fff;
    color: #FF6A00;
    border: 2px solid #FF6A00;
}
.btn-pricing-secondary:hover {
    background: #fff5ec;
    color: #FF6A00;
}
.btn-pricing-ghost {
    background: transparent;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
.btn-pricing-ghost:hover { background: #f9fafb; color: #1f2937; }
.btn-pricing-large { padding: 16px 36px; font-size: 16px; }

/* ============================================================
   Section common
   ============================================================ */
.pricing-section-title {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}
.pricing-section-subtitle {
    text-align: center;
    color: #6b7280;
    font-size: 16px;
    margin: 0 0 48px;
}

/* ============================================================
   Plans cards
   ============================================================ */
.pricing-plans { padding: 60px 0; }
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.pricing-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.pricing-card.is-highlight {
    border: 2px solid #FF6A00;
    box-shadow: 0 12px 32px rgba(255, 106, 0, 0.12);
    transform: translateY(-8px);
}
.pricing-card.is-highlight:hover { transform: translateY(-12px); }

.pricing-card-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FF6A00 0%, #ff8c1a 100%);
    color: #fff;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.3);
}

.pricing-card-name {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}
.pricing-card-name-cn {
    color: #9ca3af;
    font-size: 14px;
    margin-bottom: 20px;
}
.pricing-card-price {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px dashed #e5e7eb;
}
.pricing-currency { font-size: 18px; color: #6b7280; font-weight: 600; vertical-align: top; line-height: 1.6; }
.pricing-amount { font-size: 44px; font-weight: 800; color: #111827; letter-spacing: -1px; }
.pricing-period { font-size: 15px; color: #9ca3af; margin-left: 4px; }
.pricing-yearly-hint {
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
}
.pricing-save-tag {
    background: #ecfdf5;
    color: #10b981;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
}

.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
}
.pricing-card-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.55;
}
.pricing-card-features li.is-included { color: #1f2937; }
.pricing-card-features li.is-excluded { color: #d1d5db; text-decoration: line-through; }
.pricing-feature-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.is-included .pricing-feature-icon { background: #ecfdf5; color: #10b981; }
.is-excluded .pricing-feature-icon { background: #f3f4f6; color: #d1d5db; }

.pricing-card-cta { margin-top: auto; }
.btn-pricing-card-cta { width: 100%; }

/* Disabled CTA (e.g. Verified Owner already activated) */
.btn-pricing-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    background: #f3f4f6;
    color: #9ca3af;
    border: 2px solid #e5e7eb;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}
.btn-pricing-disabled:hover {
    background: #f3f4f6;
    color: #9ca3af;
    transform: none;
    box-shadow: none;
}

/* ============================================================
   How It Works
   ============================================================ */
.pricing-how {
    padding: 80px 0;
    background: #fff;
    border-top: 1px solid #f3f4f6;
}
.pricing-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    position: relative;
}
.pricing-step {
    text-align: center;
    position: relative;
}
.pricing-step-num {
    position: absolute;
    top: -8px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff5ec;
    color: #FF6A00;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pricing-step-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff5ec, #ffe3cc);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF6A00;
}
.pricing-step h3 {
    font-size: 19px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}
.pricing-step p {
    color: #6b7280;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   Comparison Table
   ============================================================ */
.pricing-compare { padding: 80px 0; }
.pricing-table-wrap {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    overflow-x: auto;
}
.pricing-table {
    width: 100%;
    border-collapse: collapse;
}
.pricing-table th,
.pricing-table td {
    padding: 16px 20px;
    text-align: center;
    border-bottom: 1px solid #f3f4f6;
}
.pricing-table thead th {
    background: #fafafa;
    font-weight: 700;
    color: #111827;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pricing-table thead th.is-highlight { color: #FF6A00; }
.pricing-table .feature-name {
    text-align: left;
    color: #1f2937;
    font-weight: 500;
}
.pricing-table .feature-cell { vertical-align: middle; }
.feature-dash { color: #d1d5db; font-size: 18px; }
.pricing-table tbody tr:hover { background: #fffbf6; }

/* ============================================================
   FAQ
   ============================================================ */
.pricing-faq {
    padding: 80px 0;
    background: #fafafa;
}
.pricing-faq-list {
    max-width: 760px;
    margin: 0 auto;
}
.pricing-faq-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}
.pricing-faq-item summary {
    padding: 18px 24px;
    cursor: pointer;
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
    list-style: none;
    position: relative;
    transition: background 0.2s;
}
.pricing-faq-item summary::-webkit-details-marker { display: none; }
.pricing-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #FF6A00;
    transition: transform 0.2s;
    font-weight: 400;
}
.pricing-faq-item[open] summary::after { content: '−'; }
.pricing-faq-item summary:hover { background: #fff8f3; }
.pricing-faq-content {
    padding: 0 24px 18px;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.75;
}
.pricing-faq-content p { margin: 0; }

/* ============================================================
   Bottom CTA
   ============================================================ */
.pricing-bottom-cta {
    text-align: center;
    padding: 80px 0 100px;
    background: linear-gradient(135deg, #FF6A00 0%, #ff8c1a 100%);
    color: #fff;
}
.pricing-bottom-cta h2 {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}
.pricing-bottom-cta p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
    margin: 0 0 28px;
}
.pricing-bottom-cta .btn-pricing-primary {
    background: #fff;
    color: #FF6A00;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}
.pricing-bottom-cta .btn-pricing-primary:hover {
    background: #fff8f3;
    color: #FF6A00;
}

/* ============================================================
   Apply Plan Modal
   ============================================================ */
.apply-plan-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}
.apply-plan-modal-overlay.is-open { display: flex; }
.apply-plan-modal {
    background: #fff;
    width: 100%;
    max-width: 580px;
    border-radius: 16px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25);
    position: relative;
    margin: auto;
    animation: applyPlanIn 0.25s ease;
}
@keyframes applyPlanIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.apply-plan-modal-header {
    padding: 24px 28px 16px;
    border-bottom: 1px solid #f3f4f6;
}
.apply-plan-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}
.apply-plan-modal-sub {
    color: #6b7280;
    font-size: 14.5px;
    margin: 0;
}
.apply-plan-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: background 0.15s, color 0.15s;
}
.apply-plan-modal-close:hover { background: #f3f4f6; color: #111827; }

.apply-plan-modal-body { padding: 24px 28px; }

/* Gating banners */
.apply-gate-banner {
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
}
.apply-gate-banner.is-info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; }
.apply-gate-banner.is-warn    { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.apply-gate-banner.is-error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.apply-gate-banner.is-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.apply-gate-banner a { color: inherit; text-decoration: underline; font-weight: 600; }

/* Mode tabs (existing brand vs new brand) */
.apply-mode-tabs {
    display: flex;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 18px;
    gap: 4px;
}
.apply-mode-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: #6b7280;
    transition: all 0.18s ease;
}
.apply-mode-tab.is-active {
    background: #fff;
    color: #FF6A00;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Form */
.apply-form-row { margin-bottom: 16px; }
.apply-form-row.is-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.apply-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.apply-form-label .req { color: #ef4444; }
.apply-form-input,
.apply-form-textarea,
.apply-form-select {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #fff;
}
.apply-form-input:focus,
.apply-form-textarea:focus,
.apply-form-select:focus {
    outline: none;
    border-color: #FF6A00;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12);
}
.apply-form-textarea { resize: vertical; min-height: 80px; }
.apply-form-help { color: #9ca3af; font-size: 12px; margin-top: 4px; }

/* Plan summary card inside modal */
.apply-plan-summary {
    background: linear-gradient(135deg, #fff5ec 0%, #ffe9d6 100%);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.apply-plan-summary-name {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}
.apply-plan-summary-price {
    font-size: 15px;
    font-weight: 700;
    color: #FF6A00;
}

/* Billing toggle */
.apply-billing-toggle {
    display: inline-flex;
    background: #f3f4f6;
    padding: 3px;
    border-radius: 8px;
    gap: 2px;
    margin-bottom: 16px;
}
.apply-billing-option {
    background: transparent;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}
.apply-billing-option.is-active {
    background: #fff;
    color: #FF6A00;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Footer */
.apply-plan-modal-footer {
    padding: 16px 28px 24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid #f3f4f6;
}
.apply-plan-modal-footer .btn-pricing-ghost,
.apply-plan-modal-footer .btn-pricing-primary { padding: 10px 22px; }
.apply-plan-modal-footer .btn-pricing-primary[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Success state */
.apply-success {
    text-align: center;
    padding: 12px 0 8px;
}
.apply-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.apply-success h3 {
    font-size: 18px;
    color: #111827;
    margin: 0 0 8px;
    font-weight: 700;
}
.apply-success p { color: #6b7280; font-size: 14px; line-height: 1.65; margin: 0 0 16px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .pricing-cards { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .pricing-card.is-highlight { transform: none; }
    .pricing-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}
@media (max-width: 640px) {
    .pricing-hero { padding: 56px 0 40px; }
    .pricing-hero-title { font-size: 36px; }
    .pricing-hero-subtitle { font-size: 16px; }
    .pricing-section-title { font-size: 28px; }
    .pricing-steps { grid-template-columns: 1fr; }
    .pricing-table th, .pricing-table td { padding: 12px 10px; font-size: 13px; }
    .apply-form-row.is-double { grid-template-columns: 1fr; }
    .pricing-bottom-cta h2 { font-size: 28px; }
    .pricing-bottom-cta { padding: 60px 0 80px; }
}