.opentest-product-plans-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

.billing-period-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding: 4px;
    background: #F5F5F5;
    border-radius: 4px;
    width: fit-content;
}

.billing-period-toggle .period-btn {
    padding: 4px 12px;
    border: none;
    background: #F5F5F5;
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.billing-period-toggle .period-btn:hover {
    background: #170057;
    color: #FFFFFF;
}

.billing-period-toggle .period-btn.active {
    background: #170057;
    color: #FFFFFF;
}

.opentest-product-plans {
    display: flex;
    gap: 17px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.product-card {
    flex: 1;
    min-width: 250px;
    background: #FFFFFF;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
    padding: 24px 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-card:hover {
    border: 2px solid #170057;
    background: #F6F6FC;
}

.product-card.highlighted {
    border: 2px solid #170057;
    background: #F6F6FC;
}

/* 低于当前套餐等级的卡片置灰禁用 */
.product-card.tier-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
}

.product-card.tier-disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.product-card.tier-disabled:hover {
    border-color: #D6D6D6;
    background: #FFFFFF;
}

.product-card.tier-disabled .product-button {
    background: #D6D6D6 !important;
    color: #999999 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.product-header {
    padding: 0 16px 24px;
}

.product-header.has-trial {
    padding: 0 16px 12px;
}

.product-title {
    margin: 0;
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.product-pricing {
    padding: 0 16px 32px;
}

.product-pricing.has-trial {
    padding: 0 16px 20px;
}

.free-trial-badge {
    display: inline-block;
    padding: 4px;
    border-radius: 2px;
    background: #FEE2E2;
    color: #DC2626;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 6px;
}

.price-with-trial {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.price-with-trial .trial-price {
    color: #333333;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.price-with-trial .trial-period {
    color: #888888;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.price-with-trial .then-text {
    color: #888888;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-left: 8px;
    margin-right: 6px;
}

.price-with-trial .regular-price {
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.price-with-trial .per-month {
    color: #888888;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

.price-only {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-only .main-price {
    color: #333333;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.price-only .per-month {
    color: #888888;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

.product-action {
    padding: 0 16px 32px;
}

.product-features {
    padding: 0 16px 0;
}

.product-button {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
    background: #FFFFFF;
    color: #333333;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.product-button:hover {
    border-color: #170057;
    background: #F6F6FC;
    color: #333333;
}

.product-button.btn-active {
    background: #FFFFFF;
    border-color: #D6D6D6;
    color: #BBBBBB;
    cursor: not-allowed;
}

.product-button.btn-auto-renew {
    background: #FFFFFF;
    border-color: #D6D6D6;
    color: #BBBBBB;
    cursor: not-allowed;
    position: relative;
}

.product-button.btn-auto-renew::after {
    content: '';
}

.product-button.btn-addon {
    background: #FFF8E1;
    border-color: #FF9800;
    color: #E65100;
}

.product-button.btn-addon:hover {
    background: #FFECB3;
    border-color: #F57C00;
}

.product-card.highlighted .product-button {
    border-color: #D6D6D6;
    background: #170057;
    color: #FFFFFF;
}

.product-card.highlighted .product-button:hover {
    background: #0F003D;
    color: #FFFFFF;
}

.product-button.btn-download {
    background: #170057;
    color: #FFFFFF;
    border-color: #D6D6D6;
}

.product-button.btn-download:hover {
    background: #170057;
    border-color: #170057;
    color: #FFFFFF;
}

.product-button.btn-contact {
    background: #FFFFFF;
    color: #333333;
    border-color: #D6D6D6;
}

.product-button.btn-contact:hover {
    background: #F6F6FC;
    border-color: #170057;
    color: #333333;
}

.product-button:disabled {
    background: #FFFFFF;
    border-color: #D6D6D6;
    color: #BBBBBB;
    cursor: not-allowed;
    opacity: 1;
}

.opentest-features-comparison {
    margin-top: 80px;
}

.comparison-title {
    text-align: center;
    color: #111827;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 64px;
}

/* 产品列表样式 */
.features-table thead tr.product-header-row th {
    border-bottom: 1px solid #D6D6D6 !important;
    padding: 0 0 24px !important; /* 下方保留 24px 空间 */
    vertical-align: top;
}

.product-header-spacer {
    width: 158px;
    padding-left: 0 !important;
}

.product-header-col {
    padding: 0 8px 24px !important;
    vertical-align: top;
    text-align: left;
}

.product-header-name {
    color: #333333;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    margin-bottom: 6px;
}

.product-header-price {
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.ph-price-amount {
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.ph-price-period {
    color: #888888;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.ph-price-text {
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.product-header-button {
    display: block;
    width: 100%;
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: #170057;
    color: #FFF;
    text-align: center;
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.product-header-button:hover {
    background: #0F003D;
    color: #FFF;
}

.product-header-button.btn-download {
    background: #170057;
    color: #FFF;
    border: none;
}

.product-header-button.btn-download:hover {
    background: #0F003D;
}

.product-header-button.btn-active {
    background: #170057;
    color: #FFF;
    cursor: not-allowed;
    opacity: 0.6;
}

.product-header-button.btn-upgrade {
    background: #170057;
    color: #FFF;
    border: none;
}

.product-header-button.btn-upgrade:hover {
    background: #0F003D;
}

.product-header-button.btn-contact {
    background: #170057;
    color: #FFF;
    border: none;
}

.product-header-button.btn-contact:hover {
    background: #0F003D;
}

.product-header-button:disabled {
    background: #170057;
    color: #FFF;
    cursor: not-allowed;
    opacity: 0.6;
}

.comparison-table-wrapper {
    overflow-x: auto;
    position: relative;
}

/* 用伪元素在表格下方添加独立的边框线 */
.comparison-table-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #D6D6D6;
}

.features-table {
    width: 100%;
    border-collapse: collapse; /* 使用 collapse 避免 border-spacing 导致断裂 */
    border-spacing: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.features-table tbody tr.group-header-row {
    background: none;
}

.features-table tbody tr.group-header-row td.group-title {
    padding: 12px 0 !important; /* 去除左右内距 */
    color: #78736F !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important; /* 133.333% */
    letter-spacing: 0.05em;
}

.features-table tbody tr td,
.features-table thead tr th {
    border-bottom: 1px solid #D6D6D6 !important;
    padding: 0 8px; /* 左右各 8px，合计列间距 16px */
}

.features-table tbody tr.group-header-row td.group-title {
    padding-top: 12px;
}
.features-table tbody tr.group-header-row:not(:first-child) td.group-title {
    padding-top: 52px !important;
}

.features-table td:first-child,
.features-table th:first-child {
    width: 158px;
}

/* 第一列不要左内距，其他列左右各 8px（合计 16px 列间距） */
.features-table th:first-child,
.features-table td:first-child {
    padding-left: 0 !important;
    padding-right: 8px !important;
}
.features-table td:nth-child(2),
.features-table td:nth-child(3),
.features-table td:nth-child(4),
.features-table td:nth-child(5),
.features-table th:nth-child(2),
.features-table th:nth-child(3),
.features-table th:nth-child(4),
.features-table th:nth-child(5) {
    width: 244px;
}

/* feature-name 字体样式（覆盖主题） */
.features-table td.feature-name {
    padding-left: 0 !important;
    padding-right: 8px !important;
    color: var(--dc-color-text-primary, #333) !important;
    font-size: var(--typography-base-sizes-base-font-size, 16px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-semibold, 700) !important;
    line-height: var(--typography-base-sizes-base-line-height, 24px) !important; /* 150% */
}

/* Channels 行样式 */
.channels-title {
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-semibold, 700);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    padding-left: 0 !important;
}

.channels-cell {
    padding: 0 !important;
    vertical-align: middle;
}

.channels-cell .channels-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.channels-cell .channels-list li {
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-bold, 400);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    margin: 0; /* 去掉额外间距 */
}

/* channels-row 在下方保留 32px 空间 */
.channels-row td {
    padding-bottom: 32px !important;
}

/* feature-name 的子元素：标题与副标题 */
.features-table td.feature-name .feature-title {
    color: var(--dc-color-text-primary, #333) !important;
    font-size: var(--typography-base-sizes-base-font-size, 16px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-semibold, 700) !important;
    line-height: var(--typography-base-sizes-base-line-height, 24px) !important;
}
.features-table td.feature-name .feature-subtitle {
    color: var(--dc-color-text-tertiary, #888) !important;
    font-size: var(--typography-base-sizes-small-font-size, 14px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-normal, 400) !important;
    line-height: var(--typography-base-sizes-small-line-height, 20px) !important;
}

.features-table svg {
    width: 20px !important;
    height: 20px !important;
}

/* 产品卡片内的 feature-item 行间距与样式 */
.product-features.product-description .feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px; /* 每行间隔 12px */
}
.product-features.product-description .feature-item:last-child {
    margin-bottom: 0;
}
.product-features.product-description .feature-text {
    color: var(--dc-color-text-primary, #333) !important;
    font-size: var(--typography-base-sizes-base-font-size, 16px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-medium, 500) !important;
    line-height: var(--typography-base-sizes-base-line-height, 24px) !important;
}
.product-features.product-description svg.feature-icon {
    width: 16px !important;
    height: 16px !important;
}

.features-table,
.features-table th,
.features-table td {
    border-style: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
}

.features-table td.feature-name {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.features-table td.feature-state {
    padding: 16px 8px !important;
    text-align: left !important;
    vertical-align: middle !important;
}
.features-table td.feature-state svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.features-table td.feature-state > * {
    vertical-align: middle;
}

@media (max-width: 1200px) {
    .opentest-product-plans {
        flex-wrap: wrap;
    }
    
    .product-card {
        flex: 1 1 calc(50% - 8.5px);
    }
}

@media (max-width: 768px) {
    .opentest-product-plans {
        flex-direction: column;
    }
    
    .product-card {
        flex: 1 1 100%;
    }
    
    .comparison-title {
        font-size: 24px;
        line-height: 32px;
    }
    
    .features-table {
        font-size: 14px;
    }
    
    .features-table thead th,
    .features-table tbody td {
        padding: 10px 12px;
    }

    .product-header-col {
        padding: 0 10px 16px !important;
    }

    .product-header-name {
        font-size: 15px;
    }
}

    .features-table tbody tr:has(+ .group-header-row) td {
         border-bottom: none !important;
    }

.opentest-purchase-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dc-alpha-80, rgba(0, 0, 0, 0.20));
    backdrop-filter: blur(calc(var(--blur-lg, 16px) / 2));
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.opentest-purchase-modal.open {
    display: flex;
}

.purchase-modal-content {
    background: #FFFFFF;
    border-radius: 4px;
    width: 90%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.purchase-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #F9F9F9;
    border-bottom: 1px solid #EEE;
}

.purchase-modal-title {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    margin: 0;
    line-height: 100%;
}

.purchase-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.purchase-modal-close svg {
    width: 24px;
    height: 24px;
}

.purchase-modal-close:hover {
    background: #F3F4F6;
}

/* 强制覆盖 Elementor kit 对关闭按钮的影响，只保留 24px 尺寸 */
.elementor-kit-62 .opentest-purchase-modal .purchase-modal-close {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    border-radius: 4px !important;
}

.purchase-modal-body {
    padding: 16px 24px 32px;
}

.modal-billing-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 4px;
    background: #F5F5F5;
    border-radius: 4px;
    width: fit-content;
}

.modal-billing-toggle .period-btn {
    padding: 4px 12px;
    border: none;
    background: transparent;
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.modal-billing-toggle .period-btn:hover {
    background: #170057;
    color: #FFFFFF;
}

.modal-billing-toggle .period-btn.active {
    background: #170057;
    color: #FFFFFF;
}

.modal-billing-toggle .discount-badge {
    color: #10B981;
    font-size: 14px;
    font-weight: 500;
}

.purchase-section {
    margin-bottom: 24px !important;
}

.purchase-section-label {
    color: var(--dc-color-text-tertiary, #888);
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
}

.addon-svg-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.addon-svg-disabled .addon-svg-checkbox,
.addon-svg-checkbox.addon-svg-disabled {
    cursor: default;
    opacity: 0.6;
}

.plan-selector-dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    color: var(--dc-color-text-primary, #333);
    font-size: 15px;
    line-height: 1.4;
    transition: background 0.15s;
}

.plan-selector-dropdown-item:hover {
    background: #F5F5F5;
}

.plan-selector-dropdown-item.selected {
    font-weight: 500;
    color: #170057;
}

.plan-selector {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    font-size: 14px;
    color: #111827;
    background: #FFFFFF;
    cursor: pointer;
}

.addon-list {
    margin-top: 8px !important;
}

.addon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px 12px 16px;
    border: 1px solid #EEE;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #FFF;
    transition: border-color 0.15s;
}

.addon-item:hover {
    border-color: #170057;
}

.addon-item.selected {
    border-color: #170057 !important;
}

.addon-item:last-child {
    margin-bottom: 0;
}

/* 已购买自动续费的加量包样式 */
.addon-item.addon-disabled {
    background-color: #F9FAFB;
    opacity: 0.7;
}

.addon-item.addon-disabled .addon-checkbox input[type="checkbox"] {
    cursor: not-allowed;
}

.addon-item.addon-disabled .addon-checkbox label {
    color: #9CA3AF;
    cursor: not-allowed;
}

.addon-purchased-tag {
    display: inline-block;
    font-size: 11px;
    padding: 2px 6px;
    background-color: #DEF7EC;
    color: #03543F;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 500;
}

.addon-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.addon-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.addon-checkbox label {
    font-size: 14px;
    color: #111827;
    cursor: pointer;
    margin: 0;
}

.addon-price {
    text-align: right;
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
}

.addon-price .addon-period,
.addon-period {
    color: var(--dc-color-text-secondary, #707070);
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-small-line-height, 20px);
}

.purchase-config-tabs {
    display: flex;
    gap: 8px;
    padding: 2px;
    background: #F5F5F5;
    border: 1px solid #EEE;
    border-radius: 4px;
    flex-shrink: 0;
}

.config-tab {
    padding: 4px 12px;
    background: #F5F5F5;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    color: var(--dc-color-text-primary, #333);
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.config-tab:hover {
    background: #EEEEEE;
}

.config-tab.active {
    background: #FFF;
    border: 1px solid #EEE;
}

.config-tab.disabled-for-none {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.payment-method-tabs {
    display: flex;
    gap: 8px !important;
    margin-top: 8px !important;
}

.opentest-purchase-modal .payment-method-radio {
    display: flex;
    align-items: flex-start !important;
    gap: 12px;
}
.opentest-purchase-modal .svg-radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.opentest-purchase-modal .svg-radio svg { display: block; vertical-align: top; }
.opentest-purchase-modal .payment-method-radio .svg-radio {
    margin-top: 4px !important;
}
.opentest-purchase-modal .payment-method .svg-checked { display: none !important; }
.opentest-purchase-modal .payment-method.selected .svg-checked { display: block !important; }
.opentest-purchase-modal .payment-method.selected .svg-unchecked { display: none !important; }

.opentest-purchase-modal .payment-method {
    flex: 1;
    padding: 12px 8px 12px 16px !important; /* top right bottom left */
    border: 1px solid #D6D6D6 !important;
    border-radius: 4px !important;
    background: #FFF !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.opentest-purchase-modal .payment-method:hover {
    border-color: #170057 !important;
}

.opentest-purchase-modal .payment-method.selected {
    border-color: #170057 !important;
    background: #FFF !important;
}

/* ensure spacing between tabs is preserved and visuals match spec */
.opentest-purchase-modal .payment-method-tabs {
    display: flex !important;
    gap: 16px !important;
    margin-top: 16px !important;
}
.payment-method.selected .svg-unchecked { display: none; }

.payment-method-label {
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
    margin: 0 0 4px 0;
}

.payment-method-desc {
    color: var(--dc-color-text-secondary, #707070);
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: 14px;
    margin: 0;
}

/* Seats Control - Team Purchase */
.seats-control {
    padding: 8px 8px 8px 16px;
    background: #FFF;
    border-radius: 4px;
    border: 1px solid #EEE;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.seats-control > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.seats-input-group {
    display: flex;
    align-items: center;
  
}

.seats-btn {
    width: auto;
    height: auto;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    transition: all 0.2s ease;
    color: #BBBBBB;
}

.seats-btn:hover {
    color: #170057;
}

.seats-btn svg path {
    stroke: currentColor;
}

.seats-input {
    width: auto;
    min-width: 56px;
    padding: 4.5px 16px;
    border: 1px solid #EEE;
    border-radius: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--dc-color-text-primary, #333);
    box-sizing: border-box;
}

.seats-desc {
    color: var(--dc-color-text-secondary, #707070) !important;
    font-size: var(--typography-base-sizes-small-font-size, 14px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-normal, 400) !important;
    line-height: var(--typography-base-sizes-small-line-height, 20px) !important;
    margin: 0 !important;
}

.duration-control {
    padding: 8px 8px 8px 16px; /* top right bottom left */
    background: #FFF;
    border-radius: 4px;
    border: 1px solid #EEE;
    display: flex;
    flex-direction: column;
}

.opentest-purchase-modal .duration-control,
.opentest-purchase-modal .seats-control {
    margin-top: 8px !important;
}

.duration-control > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.duration-input-group {
    display: flex;
    align-items: center;
  
}

.duration-btn {
    width: auto;
    height: auto;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    transition: all 0.2s ease;
    color: #BBBBBB;
}

.duration-btn:hover {
    color: #170057;
}

.duration-btn svg path {
    stroke: currentColor !important;
}

.duration-input {
    width: auto;
    min-width: 50px;
    padding: 6px 16px;
    border: 1px solid #EEE;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #333;
}

/* Quantity selector exact visuals per design */
.opentest-purchase-modal .duration-input-group .duration-btn#duration-minus,
.opentest-purchase-modal .seats-input-group .seats-btn#seats-minus {
    border-top: 1px solid #EEE !important;
    border-left: 1px solid #EEE !important;
    border-bottom: 1px solid #EEE !important;
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
    padding: 6px 8px !important; /* left/right 8, top/bottom 6 roughly */
    background: #FFF !important;
}

.opentest-purchase-modal .duration-input-group .duration-btn#duration-plus,
.opentest-purchase-modal .seats-input-group .seats-btn#seats-plus {
    border-top: 1px solid #EEE !important;
    border-right: 1px solid #EEE !important;
    border-bottom: 1px solid #EEE !important;
    border-left: none !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 6px 8px !important;
    background: #FFF !important;
}

/* Middle number input: 1px border #EEE, no radius, padding left/right 16, top/bottom 6 */
.opentest-purchase-modal .duration-input-group .duration-input,
.opentest-purchase-modal .seats-input-group .seats-input {
    border: 1px solid #EEE !important;
    border-radius: 0 !important;
    padding: 4.5px 16px !important;
    margin: 0 !important;
    min-width: 56px !important;
}

/* SVG color behavior: default #BBBBBB, hover -> #170057 */
.opentest-purchase-modal .duration-btn,
.opentest-purchase-modal .seats-btn {
    color: #BBBBBB !important;
}
.opentest-purchase-modal .duration-btn:hover,
.opentest-purchase-modal .seats-btn:hover {
    color: #170057 !important;
}
.opentest-purchase-modal .duration-btn svg path,
.opentest-purchase-modal .seats-btn svg path {
    stroke: currentColor !important;
}

/* Override duration input typography to match design variables and ensure not overridden by Elementor */
.opentest-purchase-modal .duration-input {
    color: var(--dc-color-text-primary, #333) !important;
    font-size: var(--typography-base-sizes-base-font-size, 16px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-medium, 500) !important;
    line-height: 100% !important; /* 16px */
    background: #FFF !important;
    border: 1px solid #EEE !important;
}

/* duration buttons - ensure SVGs are visible and button reset to avoid Elementor global button styles */
.opentest-purchase-modal .duration-btn {
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    color: #BBBBBB !important;
}

.opentest-purchase-modal .duration-btn svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

/* Specific overrides to neutralize Elementor's global button/input rules inside our modal */
.elementor-kit-62 .opentest-purchase-modal .duration-btn,
.elementor-kit-62 .opentest-purchase-modal .duration-input,
.elementor-kit-62 .opentest-purchase-modal input[type="number"] {
    background: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    padding: 6px 8px !important;
    border-radius: 4px !important;
}

/* Re-assert exact padding and typography for number inputs inside modal (override elementor rule by placing later) */
.elementor-kit-62 .opentest-purchase-modal .duration-input,
.elementor-kit-62 .opentest-purchase-modal input[type="number"].duration-input,
.elementor-kit-62 .opentest-purchase-modal .seats-input,
.elementor-kit-62 .opentest-purchase-modal input[type="number"].seats-input {
    padding: 4.5px 10px !important; /* top/bottom 4.5, left/right 10 */
    color: var(--dc-color-text-primary, #333) !important;
    font-size: var(--typography-base-sizes-base-font-size, 16px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-medium, 500) !important;
    line-height: 100% !important;
    border: 1px solid #EEE !important;
    border-radius: 0 !important;
    background: #FFF !important;
}

/* Ensure inputs are not forced into fixed width/height by other theme rules */
.opentest-purchase-modal .duration-input,
.opentest-purchase-modal .seats-input,
.elementor-kit-62 .opentest-purchase-modal .duration-input,
.elementor-kit-62 .opentest-purchase-modal .seats-input {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: inline-block !important;
}

/* Hide native number input spinners (WebKit & Firefox) inside our modal */
.opentest-purchase-modal .duration-input::-webkit-outer-spin-button,
.opentest-purchase-modal .duration-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.opentest-purchase-modal .duration-input[type=number] {
    -moz-appearance: textfield !important;
}

/* Hide native number input spinners for seats input as well */
.opentest-purchase-modal .seats-input::-webkit-outer-spin-button,
.opentest-purchase-modal .seats-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.opentest-purchase-modal .seats-input[type=number] {
    -moz-appearance: textfield !important;
}

.renewal-notice {
    display: flex;
    gap: 8px !important;
    padding: 8px 8px 8px 16px; /* top right bottom left */
    background: #F6F6FC !important;
    border-radius: 4px;
    margin-top: 16px;
}

.renewal-notice-icon {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    color: #6B7280;
}

.renewal-notice-icon svg { width: 20px; height: 20px; }

.renewal-notice-text {
    margin: 0;
}

.renewal-notice-text strong {
    display: block;
    margin-bottom: 4px;
    color: var(--dc-color-text-primary, #333);
    font-size: var(--typography-base-sizes-base-font-size, 16px);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--typography-base-sizes-base-line-height, 24px);
}

.renewal-notice-text {
    color: var(--dc-color-text-secondary, #707070);
    font-size: var(--typography-base-sizes-small-font-size, 14px);
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--typography-base-sizes-small-line-height, 20px);
}

.renewal-notice-text .renewal-amount {
    color: inherit;
    font-weight: var(--font-weight-medium, 500);
}

/* removed default top border/padding/margin for total-section per design */

.opentest-purchase-modal .total-section {
    margin-bottom: 12px !important;
}

/* Layout: left labels (header + breakdown) stacked, amount row aligned right */
.opentest-purchase-modal .total-section {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
}

.opentest-purchase-modal .total-section .total-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.opentest-purchase-modal .total-header {
    color: var(--dc-color-text-primary, #333) !important;
    font-size: var(--typography-base-sizes-xlarge-font-size, 20px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-medium, 500) !important;
    line-height: var(--typography-base-sizes-xlarge-line-height, 28px) !important; /* 140% */
    margin: 0 0 2px 0 !important;
}

.opentest-purchase-modal .total-breakdown {
    color: var(--dc-color-text-secondary, #707070) !important;
    font-size: var(--typography-base-sizes-small-font-size, 14px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-normal, 400) !important;
    line-height: var(--typography-base-sizes-small-line-height, 20px) !important; /* 142.857% */
    margin: 0 !important;
}

.opentest-purchase-modal .total-amount-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    .opentest-purchase-modal .total-amount-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }
}

.opentest-purchase-modal .total-amount-row .total-final {
    color: var(--dc-color-text-primary, #333) !important;
    text-align: right !important;
    font-size: var(--typography-base-sizes-3x-large-font-size, 30px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-semibold, 700) !important;
    line-height: var(--typography-base-sizes-3x-large-line-height, 36px) !important; /* 120% */
}

.opentest-purchase-modal .total-amount-row .total-original {
    color: var(--dc-color-text-disabled, #BBB) !important;
    font-size: var(--typography-base-sizes-small-font-size, 14px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-normal, 400) !important;
    line-height: var(--typography-base-sizes-small-line-height, 20px) !important; /* 142.857% */
    text-decoration-line: line-through !important;
}

.total-header {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

.total-breakdown {
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 12px;
}

.credit-notice {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    background: #F0FDF4 !important;
    border-radius: 4px !important;
    border: 1px solid #BBF7D0 !important;
    margin-bottom: 24px !important;
}

.credit-icon {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
}

.credit-icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

.credit-text,
.credit-amount {
    color: var(--dc-color-text-success, #22C55E) !important;
    font-size: var(--typography-base-sizes-base-font-size, 16px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-normal, 400) !important;
    line-height: var(--typography-base-sizes-base-line-height, 24px) !important;
    margin: 0 !important;
}

.credit-text {
    flex: 1 !important;
}

.credit-amount {
    white-space: nowrap !important;
    margin-left: auto !important;
}

.total-amount-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.opentest-purchase-modal .total-amount-row {
    display: flex !important;
    justify-content: center;
    align-items: center !important;
    gap: 6px !important;
}

.total-original {
    font-size: 14px;
    color: #9CA3AF;
    text-decoration: line-through;
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
}

.total-original:empty,
.total-original[style*="display: none"] {
    opacity: 0;
}

.total-final {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    transition: opacity 0.1s ease-in-out;
}

.checkout-button {
    width: 100%;
    padding: 12px 24px; /* vertical 12px, horizontal 24px */
    background: #170057;
    color: var(--dc-color-text-white, #FFF) !important;
    border: none;
    border-radius: 4px;
    font-size: var(--typography-base-sizes-base-font-size, 16px) !important;
    font-style: normal !important;
    font-weight: var(--font-weight-normal, 400) !important;
    line-height: var(--typography-base-sizes-base-line-height, 24px) !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout-button:hover {
    background: #0F003D;
}

.checkout-button:disabled {
    background: #D1D5DB;
    cursor: not-allowed;
}