/**
 * Step Discounts
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/wizard/step-discounts.css
 * @author     Webstepper.io <contact@webstepper.io>
 * @copyright  2025 Webstepper.io
 * @license    GPL-3.0-or-later https://www.gnu.org/licenses/gpl-3.0.html
 * @link       https://webstepper.io/wordpress/plugins/smart-cycle-discounts/
 * @since      1.0.0
 */

/* ==========================================================================
   Essential Layout Styles - Step-Specific
   ========================================================================== */


/* Layout handled by wizard-fullscreen.css */

.wsscd-discount-rules-container {
    display: flex;
    flex-direction: column;
    gap: var(--wsscd-gap-spacious);
}

/* form-table reset — scoped so it doesn't bleed into other wizard steps. */
.wsscd-wizard-step--discounts .form-table {
    width: 100%;
    clear: both;
    margin: 0;
    border-spacing: 0;
    border-collapse: separate;
}

.wsscd-wizard-step--discounts .form-table td,
.wsscd-wizard-step--discounts .form-table th {
    padding: var(--wsscd-padding-compact) var(--wsscd-spacing-lg) 15px 0;
    line-height: 1.3;
    vertical-align: top;
    border: none;
}

.wsscd-wizard-step--discounts .form-table th {
    color: var(--wsscd-color-text);
    font-weight: var(--wsscd-font-weight-semibold);
    text-align: left;
    padding-left: 0;
    width: var(--wsscd-sidebar-width-small);
    box-shadow: none;
}

.wsscd-wizard-step--discounts .form-table td {
    margin-bottom: var(--wsscd-spacing-sm);
    padding-left: 0;
}

/* Form styling handled by shared _forms.css and _components.css */

/* ==========================================================================
   Simplified Discount Rules Styles
   ========================================================================== */

/* Variables now defined in _variables.css and theme files */

/* Clean section styling */
.wsscd-discount-rules-section {
    margin-bottom: var(--wsscd-gap-spacious);
    background: var(--wsscd-color-background);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-border-radius);
    box-shadow: var(--wsscd-shadow-md);
}

.wsscd-rules-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wsscd-padding-large) var(--wsscd-padding-section);
    margin: 0;
    border-bottom: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
    cursor: pointer;
    font-size: var(--wsscd-font-size-xl);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
    background: linear-gradient(to bottom, var(--wsscd-color-surface), var(--wsscd-color-white));
    border-radius: var(--wsscd-border-radius) var(--wsscd-border-radius) 0 0;
    transition: background var(--wsscd-transition-base) ease;
}

.wsscd-section-text {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--wsscd-gap-normal);
}

.wsscd-section-text .wsscd-icon {
    font-size: var(--wsscd-icon-medium);
    width: var(--wsscd-icon-medium);
    height: var(--wsscd-icon-medium);
    color: var(--wsscd-color-primary);
}

.wsscd-collapsible-trigger:hover {
    background: var(--wsscd-color-surface);
}

.wsscd-collapsible-content {
    padding: var(--wsscd-padding-section);
}

/* Hide label icons in section titles - visual-only, kept for accessibility */
.wsscd-label-icon {
    display: none;
}

/* Form field styling: Defined in shared/_forms.css */
/* Rules table now uses .wsscd-enhanced-input class automatically via template-wrapper.php */

/* Helper icon styling - now handled by shared/_components.css for global consistency */

/* Collapse icon */
.wsscd-collapsed .wsscd-collapse-icon .wsscd-icon:before {
    content: "\f345"; /* arrow-right-alt2 */
}

.wsscd-collapse-icon .wsscd-icon {
    color: var(--wsscd-color-text-muted);
    font-size: var(--wsscd-icon-small);
    transition: transform var(--wsscd-transition-slow) ease;
}

.wsscd-collapsed .wsscd-collapsible-content {
    display: none;
}


/* ==========================================================================
   Global Input Width Settings - Standardized widths
   ========================================================================== */

/* Width styling now handled by .wsscd-enhanced-input class automatically - no duplication needed */

/* ==========================================================================
   Discount Step Variables
   ========================================================================== */

.wsscd-wizard-step--discounts {
    position: relative;
    /* Extends .wsscd-wizard-step from wizard-steps.css */
    /* Uses global CSS variables from admin.css */
    --wsscd-discount-accent: var(--wsscd-color-primary);
    --wsscd-discount-success: var(--wsscd-color-success);
    --wsscd-discount-error: var(--wsscd-color-danger);
    --wsscd-discount-highlight: var(--wsscd-color-primary-bg);
}


/* ==========================================================================
   Discounts Step Shared Styles
   ========================================================================== */

/* Discounts step field group styles - scoped to prevent conflicts */
.wsscd-wizard-step--discounts .wsscd-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--wsscd-spacing-xs);
    width: 100%;
    max-width: 100%;
}

/* Field labels - consistent with WordPress admin */
.wsscd-wizard-step--discounts .wsscd-field-group label {
    display: block;
    margin-bottom: var(--wsscd-spacing-xs);
    font-size: var(--wsscd-font-size-base);
    line-height: 1.4;
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
}

/* Field group inputs - margin and height overrides only */
/* NOTE: Base styling (padding, border, color, transitions, focus) inherited from _forms.css */
.wsscd-wizard-step--discounts .wsscd-field-group input[type="text"],
.wsscd-wizard-step--discounts .wsscd-field-group input[type="number"],
.wsscd-wizard-step--discounts .wsscd-field-group input[type="email"],
.wsscd-wizard-step--discounts .wsscd-field-group input[type="url"],
.wsscd-wizard-step--discounts .wsscd-field-group input[type="search"],
.wsscd-wizard-step--discounts .wsscd-field-group textarea,
.wsscd-wizard-step--discounts .wsscd-field-group select {
    margin: 0; /* Reset margin for field-group layout */
    min-height: var(--wsscd-input-height); /* Ensure minimum height consistency */
}

/* ==========================================================================
   Discount Type Selection
   ========================================================================== */

.wsscd-discount-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--wsscd-spacing-md);
    margin-top: var(--wsscd-spacing-md);
}

.wsscd-discount-type-card {
    border: 2px solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-radius-lg);
    padding: var(--wsscd-spacing-lg) var(--wsscd-spacing-md);
    cursor: pointer;
    transition: var(--wsscd-transition-base);
    background: var(--wsscd-color-background);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-discount-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--wsscd-nav-progress-height);
    background: var(--wsscd-color-primary);
    transform: translateY(-100%);
    transition: transform var(--wsscd-transition-base) ease;
}

.wsscd-discount-type-card:hover {
    border-color: var(--wsscd-color-primary);
    box-shadow: var(--wsscd-card-hover-shadow);
    transform: translateY(-1px);
}

.wsscd-discount-type-card.selected,
.wsscd-discount-type-card:has( input:checked ) {
    border-color: var(--wsscd-color-primary);
    background: var(--wsscd-card-selected-bg);
    box-shadow: var(--wsscd-card-selected-shadow);
}

.wsscd-discount-type-card.selected::before {
    transform: translateY(0);
}

.wsscd-discount-type-card__icon {
    margin-bottom: var(--wsscd-spacing-sm);
}

.wsscd-discount-type-card__icon .wsscd-icon {
    font-size: calc(var(--wsscd-font-size-xxxl) * 1.5);
    width: var(--wsscd-badge-number-width-mobile);
    height: var(--wsscd-button-height);
    color: var(--wsscd-color-primary);
    line-height: 1;
}

.wsscd-discount-type-card__title {
    font-size: var(--wsscd-font-size-medium);
    font-weight: var(--wsscd-font-weight-semibold);
    margin: 0 0 var(--wsscd-spacing-xs) 0;
    color: var(--wsscd-color-text);
    line-height: 1.3;
}

.wsscd-discount-type-card__description {
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-muted);
    margin: 0 0 var(--wsscd-spacing-sm) 0;
    line-height: var(--wsscd-line-height);
}

.wsscd-discount-type-card__example {
    background: var(--wsscd-color-surface);
    padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-md);
    border-radius: var(--wsscd-radius-md);
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-muted);
    font-weight: var(--wsscd-font-weight-medium);
}

/* Disable transforms on reduced motion */
@media ( prefers-reduced-motion: reduce ) {
    .wsscd-discount-type-card:hover {
        transform: none;
    }
}

/* Locked discount card - PRO badge spacing */
.wsscd-discount-type-card__locked-content .wsscd-badge--pro {
    display: block;
    margin-bottom: var(--wsscd-spacing-md);
}

.wsscd-discount-type-card__locked-content .wsscd-pro-badge {
    margin-bottom: var(--wsscd-spacing-sm);
}

/* ==========================================================================
   Form Elements & Input Groups
   ========================================================================== */

/* Form table styling for better visual grouping */
.wsscd-wizard-step--discounts .form-table {
    background: transparent;
}

/* Apply styling to all form rows except strategy options */
.wsscd-wizard-step--discounts .form-table tr:not(.wsscd-strategy-options) {
    background: var(--wsscd-color-white);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-border-radius);
    margin-bottom: var(--wsscd-gap-comfortable);
    display: block;
    box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-wizard-step--discounts .form-table th,
.wsscd-wizard-step--discounts .form-table td {
    display: block;
    padding: var(--wsscd-padding-large);
    border: none;
}

.wsscd-wizard-step--discounts .form-table th {
    background: var(--wsscd-color-surface);
    border-bottom: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-border-radius) var(--wsscd-border-radius) 0 0;
    padding-bottom: var(--wsscd-padding-medium);
    width: 100%;
}

.wsscd-wizard-step--discounts .form-table td {
    padding-top: var(--wsscd-padding-large);
}

/* Responsive: Show side-by-side on larger screens */
@media (min-width: 782px) {
    .wsscd-wizard-step--discounts .form-table tr:not(.wsscd-strategy-options) {
        display: table-row;
    }

    .wsscd-wizard-step--discounts .form-table th,
    .wsscd-wizard-step--discounts .form-table td {
        display: table-cell;
        vertical-align: top;
    }

    .wsscd-wizard-step--discounts .form-table th {
        width: var(--wsscd-sidebar-width-small);
        border-bottom: none;
        border-right: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
        border-radius: var(--wsscd-border-radius) 0 0 var(--wsscd-border-radius);
        background: var(--wsscd-color-surface);
    }

    .wsscd-wizard-step--discounts .form-table td {
        border-radius: 0 var(--wsscd-border-radius) var(--wsscd-border-radius) 0;
        background: var(--wsscd-color-white);
    }
}

/* Input prefix styling - shared across all discount inputs */
.wsscd-wizard-step--discounts .wsscd-input-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: var(--wsscd-input-height);
    padding: 0 var(--wsscd-padding-medium);
    background: var(--wsscd-color-surface);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-right: none;
    border-radius: var(--wsscd-border-radius) 0 0 var(--wsscd-border-radius);
    font-weight: var(--wsscd-font-weight-semibold);
    font-size: var(--wsscd-font-size-base);
    color: var(--wsscd-color-text);
    box-sizing: border-box;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 0;
}

/* Input with prefix - seamless connection */
.wsscd-wizard-step--discounts .wsscd-input-with-prefix {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
}

/* Override enhanced-input border-radius for prefix inputs */
.wsscd-wizard-step--discounts .wsscd-input-with-prefix input.wsscd-enhanced-input,
.wsscd-wizard-step--discounts .wsscd-input-with-prefix input[type].wsscd-enhanced-input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}


/* Strategy-specific configuration rows */
.wsscd-wizard-step--discounts .form-table tr.wsscd-strategy-options {
    /* Visual styling similar to other form rows */
    background: var(--wsscd-color-white);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-border-radius);
    margin-bottom: var(--wsscd-gap-comfortable);
    box-shadow: var(--wsscd-shadow-sm);
    /* Visibility control - ensure this row type is hidden by default */
    display: none;
}

/* Show the active strategy option */
.wsscd-wizard-step--discounts .form-table tr.wsscd-strategy-options.active {
    display: block;
}

.wsscd-wizard-step--discounts .form-table tr.wsscd-strategy-options th {
    background: var(--wsscd-color-surface);
    border-radius: var(--wsscd-border-radius) var(--wsscd-border-radius) 0 0;
}

.wsscd-wizard-step--discounts .form-table tr.wsscd-strategy-options td {
    background: var(--wsscd-color-white);
}

/* Responsive: Adjust display for larger screens */
@media (min-width: 782px) {
    .wsscd-wizard-step--discounts .form-table tr.wsscd-strategy-options {
        display: none;
    }

    .wsscd-wizard-step--discounts .form-table tr.wsscd-strategy-options.active {
        display: table-row;
    }

    .wsscd-wizard-step--discounts .form-table tr.wsscd-strategy-options th {
        border-right: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
        border-radius: var(--wsscd-border-radius) 0 0 var(--wsscd-border-radius);
    }

    .wsscd-wizard-step--discounts .form-table tr.wsscd-strategy-options td {
        border-radius: 0 var(--wsscd-border-radius) var(--wsscd-border-radius) 0;
    }
}

/* ==========================================================================
   Tiered Discounts (Specific Overrides Only)
   ========================================================================== */

/* Tier warning message (unique to tiers, not thresholds) */
.wsscd-tier-warning,
.wsscd-threshold-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--wsscd-spacing-xs);
    margin-top: var(--wsscd-spacing-sm);
    margin-bottom: var(--wsscd-spacing-md);
    padding: var(--wsscd-spacing-sm);
    background: var(--wsscd-color-warning-bg);
    border-left: 4px solid var(--wsscd-color-warning);
    border-radius: var(--wsscd-radius-md);
    color: var(--wsscd-color-text);
    font-size: var(--wsscd-font-size-base);
    line-height: 1.5;
}

.wsscd-tier-warning .wsscd-icon,
.wsscd-threshold-warning .wsscd-icon {
    color: var(--wsscd-color-warning);
    font-size: var(--wsscd-font-size-xxl);
    margin-top: calc(var(--wsscd-spacing-xxs) * -1);
}

.wsscd-tier-warning .warning-text,
.wsscd-threshold-warning .warning-text {
    flex: 1;
    color: var(--wsscd-color-text-secondary);
}


/* ==========================================================================
   BOGO Configuration
   ========================================================================== */

.wsscd-bogo-config {
    max-width: 100%;
}

.wsscd-bogo-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: var(--wsscd-gap-spacious);
    margin-bottom: var(--wsscd-gap-comfortable);
}

.wsscd-bogo-field {
    display: flex;
    flex-direction: column;
}

.wsscd-bogo-field label {
    display: block;
    font-weight: var(--wsscd-font-weight-semibold);
    margin-bottom: var(--wsscd-gap-tight);
    font-size: var(--wsscd-font-size-base);
    color: var(--wsscd-color-text);
}

/* NOTE: Enhanced inputs handle their own width */
.wsscd-bogo-field input:not(.wsscd-enhanced-input) {
    width: 100%;
    max-width: none;
}

/* ==========================================================================
   Buy X Get Y Configuration
   ========================================================================== */

.wsscd-bxgy-config {
    display: flex;
    flex-direction: column;
    gap: var(--wsscd-gap-spacious);
    max-width: 100%;
    width: 100%;
}

.wsscd-strategy-buy_x_get_y td {
    width: 100%;
    max-width: 100%;
}

/* Preset shortcuts row */
.wsscd-bxgy-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wsscd-gap-tight);
    padding: var(--wsscd-spacing-md);
    background: var(--wsscd-color-surface);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-radius-md);
}

.wsscd-bxgy-preset.button {
    background: var(--wsscd-color-background);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    color: var(--wsscd-color-text);
    font-size: var(--wsscd-font-size-small);
    padding: var(--wsscd-spacing-xs) var(--wsscd-spacing-md);
    border-radius: var(--wsscd-radius-sm);
    transition: all var(--wsscd-transition-fast) ease;
}

.wsscd-bxgy-preset.button:hover,
.wsscd-bxgy-preset.button:focus {
    background: var(--wsscd-color-surface);
    border-color: var(--wsscd-color-primary);
    color: var(--wsscd-color-primary);
}

.wsscd-bxgy-preset.button:focus-visible {
    outline: 2px solid var(--wsscd-color-primary);
    outline-offset: 2px;
}

/* Buy-side + Get-side outer fieldsets */
.wsscd-bxgy-buy-side,
.wsscd-bxgy-get-side {
    display: flex;
    flex-direction: column;
    gap: var(--wsscd-gap-comfortable);
    margin: 0;
    padding: var(--wsscd-spacing-lg);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-radius-md);
    background: var(--wsscd-color-surface);
}

.wsscd-bxgy-buy-side > legend,
.wsscd-bxgy-get-side > legend {
    padding: 0 var(--wsscd-spacing-sm);
    font-weight: var(--wsscd-font-weight-semibold);
    font-size: var(--wsscd-font-size-base);
    color: var(--wsscd-color-text);
}

.wsscd-bxgy-buy-side label,
.wsscd-bxgy-get-side label {
    display: block;
    font-weight: var(--wsscd-font-weight-semibold);
    margin-bottom: var(--wsscd-gap-tight);
    font-size: var(--wsscd-font-size-base);
    color: var(--wsscd-color-text);
}

.wsscd-bxgy-buy-side input:not(.wsscd-enhanced-input):not([type="radio"]):not([type="checkbox"]),
.wsscd-bxgy-get-side input:not(.wsscd-enhanced-input):not([type="radio"]):not([type="checkbox"]),
.wsscd-bxgy-buy-side select:not([multiple]),
.wsscd-bxgy-get-side select:not([multiple]) {
    width: 100%;
    max-width: none;
}

/* Inner "Apply to" radio fieldset */
.wsscd-bxgy-target {
    display: flex;
    flex-direction: column;
    gap: var(--wsscd-gap-tight);
    margin: 0;
    padding: var(--wsscd-spacing-md);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-radius-sm);
    background: var(--wsscd-color-background);
}

.wsscd-bxgy-target > legend {
    padding: 0 var(--wsscd-spacing-xs);
    font-weight: var(--wsscd-font-weight-semibold);
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text);
}

.wsscd-bxgy-target > label {
    display: flex;
    align-items: center;
    gap: var(--wsscd-spacing-sm);
    margin: 0;
    font-weight: var(--wsscd-font-weight-normal);
    cursor: pointer;
}

.wsscd-bxgy-target > label input[type="radio"] {
    margin: 0;
}

/* Responsive: tighten padding on small screens */
@media (max-width: 782px) {
    .wsscd-bxgy-presets {
        padding: var(--wsscd-spacing-sm);
    }

    .wsscd-bxgy-buy-side,
    .wsscd-bxgy-get-side {
        padding: var(--wsscd-spacing-md);
    }
}

/* ==========================================================================
   Location Countries Tom Select (visual parity with wizard controls)
   ========================================================================== */

.wsscd-location-countries-ts {
    position: relative;
    width: 100%;
}

.wsscd-location-countries-ts.multi .ts-control {
    min-height: calc(var(--wsscd-input-height-large) + 2px);
    padding: var(--wsscd-spacing-xs) var(--wsscd-spacing-sm);
}

.wsscd-location-countries-ts.multi.has-items .ts-control {
    padding: var(--wsscd-spacing-xs) var(--wsscd-spacing-sm) calc(var(--wsscd-spacing-xs) - 3px);
}

.wsscd-location-countries-ts .ts-control {
    background-color: var(--wsscd-color-background);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-md);
    box-shadow: none !important;
    color: var(--wsscd-color-text);
    font-size: var(--wsscd-font-size-medium);
    line-height: var(--wsscd-line-height-base);
    padding: calc(var(--wsscd-spacing-sm) - 2px) calc(var(--wsscd-spacing-sm) + 2px);
    transition: border-color var(--wsscd-transition-base) ease;
}

.wsscd-location-countries-ts .ts-control:hover {
    border-color: var(--wsscd-color-border-dark);
}

.wsscd-location-countries-ts.focus .ts-control {
    border-color: var(--wsscd-color-primary);
    outline: none;
}

.wsscd-location-countries-ts .ts-control > .item {
    background-color: var(--wsscd-color-background);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-sm);
    color: var(--wsscd-color-text);
    font-size: var(--wsscd-font-size-base);
    line-height: 1.4;
    margin: calc(var(--wsscd-spacing-xs) / 2) var(--wsscd-spacing-xs) calc(var(--wsscd-spacing-xs) / 2) 0;
    padding: calc(var(--wsscd-spacing-xs) - 1px) var(--wsscd-spacing-sm);
}

/* ==========================================================================
   Shared Tier/Threshold Styles (DRY principle)
   ========================================================================== */

/* Base styles for both tiers and thresholds */
.wsscd-tier-mode-selector,
.wsscd-threshold-mode-selector {
    display: flex;
    gap: var(--wsscd-spacing-md);
    margin-bottom: var(--wsscd-spacing-lg);
}

.wsscd-tier-mode-option,
.wsscd-threshold-mode-option {
    flex: 1;
    cursor: pointer;
}

.wsscd-tier-mode-option input[type="radio"],
.wsscd-threshold-mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wsscd-tier-mode-card,
.wsscd-threshold-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--wsscd-spacing-md);
    background: var(--wsscd-color-background);
    border: 2px solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-radius-md);
    text-align: center;
    transition: all var(--wsscd-transition-fast);
}

.wsscd-tier-mode-card:hover,
.wsscd-threshold-mode-card:hover {
    border-color: var(--wsscd-color-border);
    background: var(--wsscd-color-background-subtle);
}

.wsscd-tier-mode-option input:checked + .wsscd-tier-mode-card,
.wsscd-threshold-mode-option input:checked + .wsscd-threshold-mode-card {
    background: var(--wsscd-color-primary-bg);
    border-color: var(--wsscd-color-primary);
}

.wsscd-tier-mode-card .wsscd-icon,
.wsscd-threshold-mode-card .wsscd-icon {
    font-size: var(--wsscd-font-size-xxxl);
    width: var(--wsscd-icon-large);
    height: var(--wsscd-icon-large);
    color: var(--wsscd-color-primary);
    margin-bottom: var(--wsscd-spacing-xs);
}

.wsscd-tier-mode-card strong,
.wsscd-threshold-mode-card strong {
    display: block;
    font-size: var(--wsscd-font-size-medium);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
}

/* Mode description text (tiers and thresholds) */
.wsscd-tier-mode-description,
.wsscd-mode-description {
    display: block;
    margin-top: var(--wsscd-spacing-xs);
    font-weight: normal;
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-subtle);
    line-height: 1.4;
}

/* Tier section wrapper */
.wsscd-tier-section {
    margin-bottom: var(--wsscd-gap-spacious);
}

/* Tier section label */
.wsscd-tier-section-label {
    display: flex;
    align-items: center;
    gap: var(--wsscd-gap-tight);
    margin-bottom: var(--wsscd-gap-normal);
    font-weight: var(--wsscd-font-weight-semibold);
    font-size: var(--wsscd-font-size-base);
    color: var(--wsscd-color-text);
    line-height: 1.5;
}

.wsscd-tier-section-label .required {
    color: var(--wsscd-color-danger);
    margin-left: var(--wsscd-spacing-xxs);
}

.wsscd-tier-section-label .wsscd-field-helper {
    margin-left: var(--wsscd-gap-tight);
}

.wsscd-tier-group,
.wsscd-threshold-group {
    margin-bottom: var(--wsscd-gap-comfortable);
}

.wsscd-tiers-list,
.wsscd-thresholds-list {
    padding: var(--wsscd-padding-large);
    background: var(--wsscd-color-surface);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-border-radius);
    margin-bottom: var(--wsscd-gap-normal);
    min-height: var(--wsscd-nav-height);
}

.wsscd-tiers-list:empty::before,
.wsscd-thresholds-list:empty::before {
    content: attr(data-empty-message);
    display: block;
    text-align: center;
    color: var(--wsscd-color-text-muted);
    font-style: italic;
    padding: var(--wsscd-spacing-md);
}

/* ==========================================================================
   Tier/Threshold Row Structure
   HTML: <div class="wsscd-tier-row">
           <div class="wsscd-tier-fields">
             <div class="wsscd-row-field">
               <label>Label</label>
               <div class="wsscd-input-wrapper [wsscd-input-with-prefix]">
                 [<span class="wsscd-input-prefix">%</span>]
                 <input class="wsscd-enhanced-input">
               </div>
             </div>
           </div>
           <button class="wsscd-remove-tier">Remove</button>
         </div>
   ========================================================================== */

/* Row Container - Flexbox layout for fields + button */
.wsscd-tier-row,
.wsscd-threshold-row {
    display: flex;
    gap: var(--wsscd-gap-comfortable);
    align-items: flex-start;
    margin-bottom: var(--wsscd-gap-normal);
    padding: var(--wsscd-padding-large);
    background: var(--wsscd-color-background);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-border-radius);
    box-shadow: var(--wsscd-input-shadow);
    transition: var(--wsscd-transition-base);
}

.wsscd-tier-row:hover,
.wsscd-threshold-row:hover {
    border-color: var(--wsscd-color-border);
    box-shadow: var(--wsscd-shadow-sm);
}

/* Fields Wrapper - Contains all input fields */
.wsscd-tier-fields,
.wsscd-threshold-fields {
    display: flex;
    gap: var(--wsscd-gap-comfortable);
    flex: 1;
}

/* Individual Field Container (label + input wrapper) */
.wsscd-tier-fields .wsscd-row-field,
.wsscd-threshold-fields .wsscd-row-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wsscd-gap-tight);
}

/* Field Labels */
.wsscd-tier-fields .wsscd-row-field label,
.wsscd-threshold-fields .wsscd-row-field label {
    display: block;
    margin-bottom: 0;
    font-size: var(--wsscd-font-size-small);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
    line-height: 1.4;
}

/* Input Wrapper (contains input or prefix+input) */
.wsscd-tier-fields .wsscd-input-wrapper,
.wsscd-threshold-fields .wsscd-input-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Standard Input (no prefix) */
.wsscd-tier-fields .wsscd-input-wrapper:not(.wsscd-input-with-prefix) input,
.wsscd-threshold-fields .wsscd-input-wrapper:not(.wsscd-input-with-prefix) input {
    width: 100%;
    flex: 1;
}

/* Input with Prefix Wrapper */
.wsscd-tier-fields .wsscd-input-with-prefix,
.wsscd-threshold-fields .wsscd-input-with-prefix {
    width: 100%;
}

/* Input Field inside Prefix Wrapper */
.wsscd-tier-fields .wsscd-input-with-prefix input,
.wsscd-threshold-fields .wsscd-input-with-prefix input {
    flex: 1;
    min-width: 0;
}

/* Remove Button Wrapper - Matches field structure for proper alignment */
.wsscd-row-field--button {
    flex-shrink: 0;
    flex-grow: 0;
    width: auto;
}

/* Label spacer - Takes up same height as real labels */
.wsscd-field-label-spacer {
    display: block;
    margin-bottom: 0;
    font-size: var(--wsscd-font-size-small);
    line-height: 1.4;
    pointer-events: none;
}

/* Add Tier/Threshold Button */
.wsscd-add-tier,
.wsscd-add-threshold {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wsscd-gap-tight);
    width: 100%;
    min-height: var(--wsscd-input-height);
    margin-top: var(--wsscd-gap-normal);
    padding: var(--wsscd-padding-small) var(--wsscd-padding-large);
    font-size: var(--wsscd-font-size-base);
    font-weight: var(--wsscd-font-weight-medium);
    border-radius: var(--wsscd-border-radius);
}

.wsscd-add-tier .wsscd-icon,
.wsscd-add-threshold .wsscd-icon {
    font-size: var(--wsscd-icon-small);
    width: var(--wsscd-icon-small);
    height: var(--wsscd-icon-small);
}

/* Empty List State */
.wsscd-tiers-list:empty,
.wsscd-thresholds-list:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--wsscd-nav-height);
}

/* ==========================================================================
   Spend Threshold Discounts (Specific Overrides Only)
   ========================================================================== */

.wsscd-spend-thresholds {
    max-width: var(--wsscd-container-sm);
}

/* ==========================================================================
   Inline Previews (shared by all discount types)
   ========================================================================== */

.wsscd-inline-preview {
    background: var(--wsscd-discount-highlight);
    border: var(--wsscd-border-width) solid var(--wsscd-color-primary);
    border-radius: var(--wsscd-radius-md);
    padding: var(--wsscd-spacing-md);
    text-align: center;
    margin-top: var(--wsscd-spacing-sm);
}

.wsscd-inline-preview .preview-text {
    font-size: var(--wsscd-font-size-large);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-primary);
    line-height: 1.3;
}

.wsscd-inline-preview .preview-text.placeholder {
    color: var(--wsscd-color-text-muted);
    font-weight: var(--wsscd-font-weight-normal);
    font-style: italic;
}

.wsscd-inline-preview:empty {
    display: none;
}

/* ==========================================================================
   Bundle Configuration
   ========================================================================== */

/* Main config wrapper */
.wsscd-bundle-config {
    max-width: 100%;
    width: 100%;
}

/* Ensure proper table cell width */
.wsscd-strategy-bundle td {
    width: 100%;
    max-width: 100%;
}

/* Section spacing within bundle config */
.wsscd-bundle-section {
    margin-bottom: var(--wsscd-gap-spacious);
}

.wsscd-bundle-section:last-child {
    margin-bottom: 0;
}

/* Section labels (match BOGO field labels) */
.wsscd-bundle-section-label {
    display: block;
    font-weight: var(--wsscd-font-weight-semibold);
    margin-bottom: var(--wsscd-gap-tight);
    font-size: var(--wsscd-font-size-base);
    color: var(--wsscd-color-text);
}

/* Discount type radio card selector */
.wsscd-bundle-discount-type-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wsscd-gap-comfortable);
}

/* Hide native radio buttons */
.wsscd-bundle-discount-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.wsscd-bundle-discount-type-option {
    position: relative;
    cursor: pointer;
    margin: 0;
}

/* Card appearance */
.wsscd-bundle-discount-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wsscd-spacing-xs);
    padding: var(--wsscd-spacing-lg) var(--wsscd-spacing-md);
    border: 2px solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-radius-lg);
    background: var(--wsscd-color-surface);
    text-align: center;
    transition: all var(--wsscd-transition-fast) ease;
}

.wsscd-bundle-discount-type-card:hover {
    border-color: var(--wsscd-color-border-dark);
    background: var(--wsscd-color-background);
}

/* Selected state */
.wsscd-bundle-discount-type-option input[type="radio"]:checked + .wsscd-bundle-discount-type-card {
    border-color: var(--wsscd-color-primary);
    background: var(--wsscd-color-background);
    box-shadow: 0 0 0 1px var(--wsscd-color-primary);
}

/* Card typography */
.wsscd-bundle-discount-type-card strong {
    font-size: var(--wsscd-font-size-base);
    color: var(--wsscd-color-text);
}

.wsscd-bundle-discount-type-card small {
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-muted);
}

/* Card icon */
.wsscd-bundle-discount-type-card .wsscd-icon {
    color: var(--wsscd-color-text-muted);
    transition: color var(--wsscd-transition-fast) ease;
}

.wsscd-bundle-discount-type-option input[type="radio"]:checked + .wsscd-bundle-discount-type-card .wsscd-icon {
    color: var(--wsscd-color-primary);
}

/* Focus state for accessibility */
.wsscd-bundle-discount-type-option input[type="radio"]:focus-visible + .wsscd-bundle-discount-type-card {
    outline: 2px solid var(--wsscd-color-primary);
    outline-offset: 2px;
}

/* Discount value input */
.wsscd-bundle-discount-value-input {
    width: 100%;
}

/* Responsive: stack cards on smaller screens */
@media (max-width: 782px) {
    .wsscd-bundle-discount-type-selector {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   Preview Table
   ========================================================================== */

.wsscd-preview-table-container {
    overflow-x: auto;
}

.wsscd-preview-table-container h4 {
    margin: 0 0 var(--wsscd-spacing-md) 0;
    font-size: var(--wsscd-font-size-large);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
    line-height: 1.3;
}

.wsscd-preview-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--wsscd-color-background);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-radius-lg);
    overflow: hidden;
    box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-preview-table th,
.wsscd-preview-table td {
    padding: var(--wsscd-spacing-md) var(--wsscd-spacing-lg);
    text-align: left;
    border-bottom: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
}

.wsscd-preview-table tbody tr:last-child td {
    border-bottom: none;
}

.wsscd-preview-table th {
    background: var(--wsscd-color-surface);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
    font-size: var(--wsscd-font-size-base);
}

.wsscd-preview-table td {
    color: var(--wsscd-color-text-muted);
    font-size: var(--wsscd-font-size-base);
}

.wsscd-preview-table td strong {
    color: var(--wsscd-color-text);
    font-weight: var(--wsscd-font-weight-semibold);
}

/* Card styles handled by shared _components.css */

/* ==========================================================================
   Mobile Responsive Design
   ========================================================================== */

/* Tablet Styles (1200px and below) */
@media (max-width: 1200px) {
    .wsscd-bogo-row {
        grid-template-columns: 1fr;
    }

    /* Removed sidebar adjustments that were breaking layout */
}

/* Mobile Styles (782px and below - WordPress admin breakpoint) */
@media (max-width: 782px) {
    /* Discount type cards - single column */
    .wsscd-discount-type-grid {
        grid-template-columns: 1fr;
        gap: var(--wsscd-spacing-md);
    }
    
    .wsscd-discount-type-card {
        padding: var(--wsscd-spacing-md);
    }
    
    .wsscd-discount-type-card__icon .wsscd-icon {
        font-size: calc(var(--wsscd-font-size-xxxl) * 1.5);
        width: var(--wsscd-badge-number-width-mobile);
        height: var(--wsscd-button-height);
    }
    
    .wsscd-discount-type-card__title {
        font-size: var(--wsscd-font-size-base);
    }
    
    /* Tier/Threshold Mobile Adjustments */
    .wsscd-tier-row,
    .wsscd-threshold-row {
        flex-direction: column;
    }

    .wsscd-tier-fields,
    .wsscd-threshold-fields {
        flex-direction: column;
        gap: var(--wsscd-gap-normal);
    }

    .wsscd-tier-mode-selector,
    .wsscd-threshold-mode-selector {
        flex-direction: column;
    }
    
    /* Preview table - horizontal scroll */
    .wsscd-preview-table-container {
        margin: 0 calc(var(--wsscd-spacing-md) * -1);
        padding: 0 var(--wsscd-spacing-md);
    }

    .wsscd-preview-table {
        min-width: calc(var(--wsscd-container-sm) - 100px);
    }

    /* Card spacing */
    .wsscd-card {
        margin-bottom: var(--wsscd-spacing-md);
    }
    
    /* Card content responsive styles moved to components.css */

    /* Field group inputs - width handled by global rule */
    
    /* All form inputs - full width on mobile */
    .wsscd-wizard-step--discounts input[type="text"],
    .wsscd-wizard-step--discounts input[type="password"],
    .wsscd-wizard-step--discounts input[type="color"],
    .wsscd-wizard-step--discounts input[type="date"],
    .wsscd-wizard-step--discounts input[type="datetime"],
    .wsscd-wizard-step--discounts input[type="datetime-local"],
    .wsscd-wizard-step--discounts input[type="email"],
    .wsscd-wizard-step--discounts input[type="month"],
    .wsscd-wizard-step--discounts input[type="number"],
    .wsscd-wizard-step--discounts input[type="search"],
    .wsscd-wizard-step--discounts input[type="tel"],
    .wsscd-wizard-step--discounts input[type="time"],
    .wsscd-wizard-step--discounts input[type="url"],
    .wsscd-wizard-step--discounts input[type="week"],
    .wsscd-wizard-step--discounts select,
    .wsscd-wizard-step--discounts textarea {
        width: 100%;
    }
}

/* Small Mobile Styles (480px and below) */
@media (max-width: 480px) {
    .wsscd-discount-type-card__example {
        font-size: var(--wsscd-font-size-small);
        padding: var(--wsscd-spacing-sm);
    }

    /* Form table adjustments */
    .form-table th,
    .form-table td {
        display: block;
        width: 100%;
        padding: var(--wsscd-spacing-sm) 0;
    }

    .form-table th {
        padding-bottom: var(--wsscd-spacing-xs);
    }
    
    /* Preview elements */
    .wsscd-preview-table th,
    .wsscd-preview-table td {
        padding: var(--wsscd-spacing-md);
        font-size: var(--wsscd-font-size-base);
    }
    
}

/* Very Small Mobile (320px and below) */
@media (max-width: 320px) {
    /* Ensure nothing breaks on very small screens */
    .wsscd-discount-type-card__title {
        font-size: var(--wsscd-font-size-base);
    }

    .wsscd-discount-type-card__description {
        font-size: var(--wsscd-font-size-small);
    }
    
    .wsscd-wizard-step--discounts .wsscd-input-prefix {
        padding: 0 var(--wsscd-spacing-sm);
        font-size: var(--wsscd-font-size-base);
    }
    
}

/* ==========================================================================
   Touch-friendly Enhancements
   ========================================================================== */

@media (pointer: coarse) {
    /* Larger touch targets */
    .wsscd-discount-type-card {
        min-height: calc(var(--wsscd-nav-height) * 1.5);
    }
    
    input[type="checkbox"],
    input[type="radio"] {
        width: var(--wsscd-icon-medium);
        height: var(--wsscd-icon-medium);
    }
    
    .wsscd-button {
        min-height: var(--wsscd-button-height-large);
        min-width: var(--wsscd-badge-number-width);
    }

    /* Better spacing for touch */
    .wsscd-tier-row {
        padding: var(--wsscd-spacing-md);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .wsscd-wizard-navigation,
    .wsscd-button {
        display: none;
    }
    
    .wsscd-discount-type-card {
        break-inside: avoid;
    }
    
    .wsscd-preview-table {
        border: var(--wsscd-border-width) solid var(--wsscd-color-text);
    }
    
    .wsscd-preview-table th,
    .wsscd-preview-table td {
        border: var(--wsscd-border-width) solid var(--wsscd-color-text);
    }
}

/* ==========================================================================
   Accessibility Improvements
   ========================================================================== */

/* Focus styles for discount-specific components */
.wsscd-discount-type-card:focus {
    outline: var(--wsscd-border-width-focus) solid transparent;
    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wsscd-color-primary);
}

/* Note: Generic input/select/textarea focus styles are defined in _forms.css */

/* ==========================================================================
   Responsive Layout
   ========================================================================== */

/* Responsive layout is handled by wizard-fullscreen.css */
/* Removed duplicate/conflicting responsive rules that were causing sidebar positioning issues */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wsscd-discount-type-card {
        border-width: var(--wsscd-border-width-accent-thin);
    }
    
    .wsscd-discount-type-card.selected {
        border-width: var(--wsscd-border-width-accent-thin);
        box-shadow: 0 0 0 var(--wsscd-border-width-thick) currentColor;
    }

    .wsscd-tier-row {
        border-width: var(--wsscd-border-width-thick);
    }
}

/* Reduced motion support */
/* Reduced-motion handled globally by _variables.css CSS variables */

/* ==========================================================================
   RTL Support
   ========================================================================== */

[dir="rtl"] .wsscd-discount-type-card::before {
    right: auto;
    left: 0;
}

[dir="rtl"] .wsscd-wizard-step--discounts .wsscd-input-prefix {
    border-left: none;
    border-right: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: 0 var(--wsscd-radius-md) var(--wsscd-radius-md) 0;
}


/* ==========================================================================
   Loading States & Messages
   ========================================================================== */

/* Loading states handled by shared _components.css and wizard-steps.css */

/* ==========================================================================
   Customer Targeting & Restrictions
   ========================================================================== */

/* Field helper tooltip styles handled by shared _components.css */

/* Tooltip styles handled by shared _components.css and tooltips.css */

/* Responsive adjustments already handled in previous media queries */

/* =============================================================================
   Conditional Rule Visibility
   ============================================================================= */

/**
 * Hide discount rules that don't apply to the selected discount type
 * Applied via JavaScript when discount type changes
 */
.wsscd-conditional-rule.wsscd-rule-hidden {
    display: none !important;
    opacity: 0;
    transition: opacity var(--wsscd-transition-base) ease-out;
}

/**
 * Smooth transition when showing conditional rules
 */
.wsscd-conditional-rule {
    transition: opacity var(--wsscd-transition-base) ease-in;
}

/* =============================================================================
   Free Shipping Section
   ============================================================================= */

/**
 * Free Shipping Enable Section
 */
.wsscd-free-shipping-enable-section {
    padding: var(--wsscd-padding-compact);
}

.wsscd-free-shipping-enable-row {
    display: flex;
    align-items: flex-start;
    gap: var(--wsscd-spacing-md);
}

.wsscd-free-shipping-enable-text {
    display: flex;
    flex-direction: column;
    gap: var(--wsscd-spacing-xs);
}

.wsscd-free-shipping-enable-title {
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
    cursor: pointer;
}

.wsscd-free-shipping-enable-description {
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-muted);
    line-height: 1.4;
}

/**
 * Free Shipping Configuration Wrapper
 */
.wsscd-free-shipping-config-wrapper {
    margin-top: var(--wsscd-spacing-lg);
    padding-top: var(--wsscd-spacing-lg);
    border-top: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
}

.wsscd-free-shipping-config-wrapper.wsscd-hidden {
    display: none;
}

/**
 * Free Shipping Section Title
 */
.wsscd-free-shipping-section-title {
    display: flex;
    align-items: center;
    gap: var(--wsscd-spacing-sm);
    font-size: var(--wsscd-font-size-small);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
    margin-bottom: var(--wsscd-spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wsscd-free-shipping-section-title .dashicons {
    font-size: var(--wsscd-font-size-large);
    width: 16px;
    height: 16px;
    color: var(--wsscd-color-primary);
}

/**
 * Shipping Methods List (Checkboxes)
 * Note: Uses .wsscd-user-roles-checkboxes and .wsscd-role-checkbox classes for chip-style
 */
#wsscd-shipping-methods-list {
    margin-top: var(--wsscd-spacing-md);
    padding: var(--wsscd-spacing-md);
    background: var(--wsscd-color-surface);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-radius-md);
}

#wsscd-shipping-methods-list.wsscd-hidden {
    display: none;
}

.wsscd-shipping-methods-loading {
    display: flex;
    align-items: center;
    gap: var(--wsscd-spacing-sm);
    padding: var(--wsscd-spacing-md);
    color: var(--wsscd-color-text-muted);
    font-size: var(--wsscd-font-size-small);
}

.wsscd-shipping-methods-loading .spinner {
    float: none;
    margin: 0;
}

.wsscd-shipping-methods-empty {
    padding: var(--wsscd-spacing-lg);
    text-align: center;
    color: var(--wsscd-color-text-muted);
    font-size: var(--wsscd-font-size-small);
}

.wsscd-shipping-methods-error {
    color: var(--wsscd-color-danger);
    padding: var(--wsscd-spacing-lg);
    text-align: center;
    font-size: var(--wsscd-font-size-small);
}

/**
 * Free Shipping Note
 */
.wsscd-free-shipping-note {
    display: flex;
    align-items: flex-start;
    gap: var(--wsscd-spacing-sm);
    margin-top: var(--wsscd-spacing-lg);
    padding: var(--wsscd-spacing-md);
    background: var(--wsscd-color-surface);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    border-left: 3px solid var(--wsscd-color-primary);
    border-radius: var(--wsscd-radius-md);
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-muted);
}

.wsscd-free-shipping-note.wsscd-hidden {
    display: none;
}

.wsscd-free-shipping-note .dashicons {
    flex-shrink: 0;
    font-size: var(--wsscd-font-size-large);
    width: 16px;
    height: 16px;
    color: var(--wsscd-color-primary);
}

/* ==========================================================================
   User Role Targeting Styles
   Also used by Free Shipping method selector for consistent UI
   ========================================================================== */

/**
 * User Roles Mode Selector
 * Card-style radio selector pattern
 */
.wsscd-user-roles-mode-section {
    margin-bottom: var(--wsscd-spacing-lg);
}

.wsscd-user-roles-mode-row {
    display: flex;
    flex-direction: column;
    gap: var(--wsscd-spacing-md);
}

.wsscd-user-roles-mode-field {
    display: flex;
    align-items: center;
    gap: var(--wsscd-spacing-xs);
}

.wsscd-user-roles-mode-field .wsscd-field-label {
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
    margin: 0;
}

.wsscd-user-roles-mode-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wsscd-spacing-md);
}

.wsscd-user-roles-mode-option {
    flex: 1;
    min-width: 140px;
    cursor: pointer;
}

.wsscd-user-roles-mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wsscd-user-roles-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wsscd-spacing-xs);
    padding: var(--wsscd-spacing-lg);
    background: var(--wsscd-color-white);
    border: 2px solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-md);
    transition: all var(--wsscd-transition-base) ease;
    text-align: center;
}

.wsscd-user-roles-mode-card:hover {
    border-color: var(--wsscd-color-border-dark);
    background: linear-gradient(to bottom, var(--wsscd-color-white), var(--wsscd-color-surface-light));
}

.wsscd-user-roles-mode-option input[type="radio"]:checked + .wsscd-user-roles-mode-card {
    border-color: var(--wsscd-color-primary);
    background: var(--wsscd-color-primary-bg);
}

.wsscd-user-roles-mode-option input[type="radio"]:focus-visible + .wsscd-user-roles-mode-card {
    outline: 2px solid var(--wsscd-color-primary);
    outline-offset: 2px;
}

.wsscd-user-roles-mode-card .wsscd-icon {
    font-size: var(--wsscd-font-size-xxl);
    width: 20px;
    height: 20px;
    color: var(--wsscd-color-primary);
}

.wsscd-user-roles-mode-card strong {
    font-size: var(--wsscd-font-size-base);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
}

.wsscd-user-roles-mode-card .wsscd-mode-description {
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-muted);
    line-height: 1.4;
}

/**
 * User Roles Selection Wrapper
 */
.wsscd-user-roles-selection-wrapper {
    margin-top: var(--wsscd-spacing-lg);
    padding-top: var(--wsscd-spacing-lg);
    border-top: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
}

.wsscd-user-roles-selection-wrapper.wsscd-hidden {
    display: none;
}

.wsscd-user-roles-section-title {
    display: flex;
    align-items: center;
    gap: var(--wsscd-spacing-xs);
    margin: 0 0 var(--wsscd-spacing-md) 0;
    font-size: var(--wsscd-font-size-base);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
}

.wsscd-user-roles-section-title .wsscd-icon {
    font-size: var(--wsscd-font-size-large);
    width: 16px;
    height: 16px;
    color: var(--wsscd-color-primary);
}

/**
 * Role/Method Checkboxes - Modern Chip/Pill Style
 * Used by User Roles and Free Shipping method selection
 */
.wsscd-user-roles-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wsscd-spacing-sm);
    margin-bottom: var(--wsscd-spacing-md);
}

.wsscd-role-checkbox {
    position: relative;
    display: inline-block;
}

.wsscd-role-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wsscd-role-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--wsscd-color-white);
    border: 2px solid var(--wsscd-color-border-light);
    border-radius: 999px; /* Pill shape */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: var(--wsscd-font-size-base);
    font-weight: var(--wsscd-font-weight-medium);
    text-align: center;
    white-space: nowrap;
    color: var(--wsscd-color-text-secondary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    user-select: none;
}

/* Checkmark icon - hidden by default */
.wsscd-role-label::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover state */
.wsscd-role-label:hover {
    border-color: var(--wsscd-color-primary);
    background: var(--wsscd-color-primary-bg);
    color: var(--wsscd-color-text);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Selected/Checked state */
.wsscd-role-checkbox input[type="checkbox"]:checked + .wsscd-role-label {
    background: var(--wsscd-color-primary);
    border-color: var(--wsscd-color-primary);
    color: var(--wsscd-color-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    padding-left: 14px;
}

/* Show checkmark when checked */
.wsscd-role-checkbox input[type="checkbox"]:checked + .wsscd-role-label::before {
    width: 16px;
    opacity: 1;
    transform: scale(1);
}

/* Focus states */
.wsscd-role-checkbox input[type="checkbox"]:focus + .wsscd-role-label {
    outline: none;
}

.wsscd-role-checkbox input[type="checkbox"]:focus-visible + .wsscd-role-label {
    outline: 2px solid var(--wsscd-color-primary);
    outline-offset: 2px;
}

/* Active/pressed state */
.wsscd-role-label:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wsscd-role-label,
    .wsscd-role-label::before {
        transition: none;
    }

    .wsscd-role-label:hover {
        transform: none;
    }
}

/**
 * Responsive Adjustments for User Roles & Chips
 */
@media (max-width: 782px) {
    .wsscd-user-roles-mode-selector {
        flex-direction: column;
    }

    .wsscd-user-roles-mode-card {
        padding: var(--wsscd-spacing-md) var(--wsscd-spacing-lg);
    }

    .wsscd-user-roles-checkboxes {
        justify-content: flex-start;
    }

    /* Slightly smaller chips on mobile */
    .wsscd-role-label {
        padding: 8px 14px;
        font-size: var(--wsscd-font-size-small);
    }

    .wsscd-role-checkbox input[type="checkbox"]:checked + .wsscd-role-label {
        padding-left: 12px;
    }

    .wsscd-role-label::before {
        height: 14px;
    }

    .wsscd-role-checkbox input[type="checkbox"]:checked + .wsscd-role-label::before {
        width: 14px;
    }
}




/*
 * Pool-compatibility gate
 *
 * Applied dynamically by discounts-orchestrator.js based on the
 * Products step selection mode. Strategies that need a deterministic
 * pool (bundle, BXGY) are hard-blocked when the pool is runtime-
 * evaluated (random_products, smart_selection); strategies whose
 * intent is unclear with a runtime pool (BOGO, spend_threshold) get
 * a softer warning treatment. The orchestrator sets `title` on each
 * gated card; native browser tooltip surfaces the message on hover.
 */

.wsscd-discount-type-card--pool-incompatible {
    cursor: not-allowed;
    opacity: 0.45;
    filter: grayscale(60%);
    pointer-events: auto; /* Keep clickable so the orchestrator can show a notification */
}

.wsscd-discount-type-card--pool-incompatible:hover {
    border-color: var(--wsscd-severity-danger, #d63638);
    background-color: rgba(214, 54, 56, 0.04);
}

.wsscd-discount-type-card--pool-warn {
    border-color: var(--wsscd-severity-warning, #dba617);
}

.wsscd-discount-type-card--pool-warn::after {
    content: '!';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wsscd-font-size-small);
    font-weight: var(--wsscd-font-weight-bold);
    color: var(--wsscd-color-white);
    background: var(--wsscd-severity-warning, #dba617);
    border-radius: 50%;
    pointer-events: none;
}


/* ---------------------------------------------------------------------- */
/* Delivery section (auto-apply vs. code-required)                        */
/* Mode-card visuals (border, hover, selected, icon, content) are         */
/* provided by the shared .wsscd-schedule-type-card rules in              */
/* partials/step-schedule-recurring.css which is loaded alongside this    */
/* file on every wizard page. We only add: the grid wrapper, the          */
/* code-fields configuration block, and the Pro accordion / callout.      */
/* ---------------------------------------------------------------------- */

.wsscd-step-delivery {
    --wsscd-delivery-gap: var(--wsscd-spacing-base);
    --wsscd-delivery-gap-tight: var(--wsscd-spacing-md);
    --wsscd-delivery-radius: var(--wsscd-radius-md);
    --wsscd-delivery-accent: var(--wsscd-color-primary);
    --wsscd-delivery-surface-muted: var(--wsscd-color-surface, #f6f7f7);
    --wsscd-delivery-border: var(--wsscd-color-border, #dcdcde);
}

/* Mode selector — Auto-apply | Requires code (always 2-up). */
.wsscd-step-delivery__modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wsscd-delivery-gap-tight);
    margin: 0 0 var(--wsscd-delivery-gap);
}

/* Mode card: icon on the LEFT, title + subtitle stacked on the right. */
.wsscd-delivery-mode {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--wsscd-spacing-md);
    padding: var(--wsscd-spacing-base);
    background: var(--wsscd-color-white);
    border: var(--wsscd-border-width) solid var(--wsscd-delivery-border);
    border-radius: var(--wsscd-delivery-radius);
    cursor: pointer;
    transition: border-color var(--wsscd-transition-fast) ease,
                background var(--wsscd-transition-fast) ease;
}

.wsscd-delivery-mode > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wsscd-delivery-mode:hover {
    border-color: var(--wsscd-color-border-dark, #c3c4c7);
}

.wsscd-delivery-mode.is-selected,
.wsscd-delivery-mode:has(input[type="radio"]:checked) {
    border-color: var(--wsscd-delivery-accent);
    background: var(--wsscd-color-primary-bg, rgba(34, 113, 177, 0.06));
}

.wsscd-delivery-mode__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--wsscd-radius-md);
    background: var(--wsscd-color-primary-alpha-10, rgba(34, 113, 177, 0.10));
    color: var(--wsscd-delivery-accent);
}

.wsscd-delivery-mode__icon svg,
.wsscd-delivery-mode__icon .wsscd-icon {
    color: var(--wsscd-delivery-accent);
}

.wsscd-delivery-mode__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wsscd-delivery-mode__title {
    font-size: var(--wsscd-font-size-medium);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
    line-height: 1.3;
}

.wsscd-delivery-mode__subtitle {
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-muted, #50575e);
    line-height: 1.4;
}

/* Code-required configuration block — quiet card that appears when active. */
.wsscd-step-delivery .wsscd-code-fields {
    display: none;
    padding: var(--wsscd-delivery-gap);
    margin-top: var(--wsscd-delivery-gap-tight);
    background: var(--wsscd-delivery-surface-muted);
    border: var(--wsscd-border-width) solid var(--wsscd-delivery-border);
    border-left: 3px solid var(--wsscd-delivery-accent);
    border-radius: var(--wsscd-delivery-radius);
}

.wsscd-step-delivery .wsscd-code-fields[data-active="1"] {
    display: block;
}

.wsscd-step-delivery .wsscd-code-fields__visibility-note {
    margin: 0 0 var(--wsscd-delivery-gap);
    padding: var(--wsscd-spacing-sm-large) var(--wsscd-spacing-md);
    background: var(--wsscd-color-warning-bg, #fff8e5);
    border-left: 3px solid var(--wsscd-color-warning, #f0b849);
    border-radius: var(--wsscd-radius-sm);
    color: var(--wsscd-color-text);
    font-size: var(--wsscd-font-size-small);
    line-height: 1.5;
}

/* 2-column rows; collapses to single column on narrow admin viewports. */
.wsscd-step-delivery .wsscd-code-fields__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wsscd-delivery-gap);
    align-items: start;
}

.wsscd-step-delivery .wsscd-code-fields__row + .wsscd-code-fields__row {
    margin-top: var(--wsscd-delivery-gap);
}

.wsscd-step-delivery .wsscd-code-fields__row > .wsscd-field-group,
.wsscd-step-delivery .wsscd-code-fields__row > .wsscd-pro-section {
    margin: 0;
    min-width: 0;
}

.wsscd-step-delivery .wsscd-code-fields .wsscd-field {
    width: 100%;
    box-sizing: border-box;
}

.wsscd-step-delivery .wsscd-code-fields .wsscd-field:focus {
    border-color: var(--wsscd-delivery-accent);
    box-shadow: var(--wsscd-ring-focus);
    outline: 0;
}

/* Pro section — collapsed accordion with a chevron that rotates on open. */
.wsscd-step-delivery .wsscd-pro-section {
    margin: 0;
    padding: 0;
    background: var(--wsscd-color-white);
    border: var(--wsscd-border-width) solid var(--wsscd-delivery-border);
    border-radius: var(--wsscd-delivery-radius);
    overflow: hidden;
    transition: border-color var(--wsscd-transition-fast) ease,
                box-shadow var(--wsscd-transition-fast) ease;
}

.wsscd-step-delivery .wsscd-pro-section[open] {
    border-color: var(--wsscd-color-border-dark, #c3c4c7);
    box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-step-delivery .wsscd-pro-section__toggle {
    display: flex;
    align-items: center;
    gap: var(--wsscd-spacing-sm);
    padding: var(--wsscd-spacing-sm-large) var(--wsscd-spacing-md);
    font-size: var(--wsscd-font-size-medium);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.wsscd-step-delivery .wsscd-pro-section__toggle::-webkit-details-marker {
    display: none;
}

.wsscd-step-delivery .wsscd-pro-section__toggle::after {
    content: "";
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--wsscd-color-text-muted, #50575e);
    border-bottom: 2px solid var(--wsscd-color-text-muted, #50575e);
    transform: rotate(45deg);
    transition: transform var(--wsscd-transition-base) ease;
}

.wsscd-step-delivery .wsscd-pro-section[open] .wsscd-pro-section__toggle::after {
    transform: rotate(-135deg);
}

.wsscd-step-delivery .wsscd-pro-section__toggle:hover {
    background: var(--wsscd-delivery-surface-muted);
}

.wsscd-step-delivery .wsscd-pro-section__toggle:focus-visible {
    outline: 2px solid var(--wsscd-delivery-accent);
    outline-offset: -2px;
}

.wsscd-step-delivery .wsscd-pro-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--wsscd-delivery-gap-tight);
    padding: var(--wsscd-delivery-gap-tight) var(--wsscd-spacing-md);
    border-top: var(--wsscd-border-width) solid var(--wsscd-delivery-border);
}

/* Pro upsell callout. */
.wsscd-step-delivery .wsscd-pro-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wsscd-delivery-gap-tight);
    padding: var(--wsscd-spacing-sm-large) var(--wsscd-spacing-md);
    background: var(--wsscd-color-warning-bg, #fff8e5);
    border: 1px solid var(--wsscd-color-warning-light-border, #f0d68c);
    border-left: 3px solid var(--wsscd-color-warning, #f0b849);
    border-radius: var(--wsscd-radius-sm);
}

.wsscd-step-delivery .wsscd-pro-callout p {
    margin: 0;
    flex: 1 1 240px;
    font-size: var(--wsscd-font-size-medium);
    color: var(--wsscd-color-text);
}

/* Inline radios for the single-use enforcement group. */
.wsscd-step-delivery .wsscd-radio-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--wsscd-spacing-xs);
    margin-right: var(--wsscd-spacing-base);
    font-size: var(--wsscd-font-size-medium);
    color: var(--wsscd-color-text);
    cursor: pointer;
}

.wsscd-step-delivery .wsscd-radio-inline input[type="radio"] {
    margin: 0;
}

@media ( max-width: 720px ) {
    .wsscd-step-delivery__modes,
    .wsscd-step-delivery .wsscd-code-fields__row {
        grid-template-columns: 1fr;
    }
}