/**
 * Step Schedule
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/wizard/step-schedule.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
 */

/* ==========================================================================
   Schedule Step Variables
   ========================================================================== */

.wsscd-wizard-step--schedule {
    --wsscd-schedule-accent: var(--wsscd-color-primary);
    --wsscd-schedule-highlight: var(--wsscd-color-primary-alpha-10);
}

/* Layout handled by wizard-fullscreen.css + sidebar.css.
   Dead descendant rules removed — sidebar is a sibling of the step-class
   element, not a descendant. */

/* ==========================================================================
   Campaign Period - New Horizontal Layout
   ========================================================================== */

/* Start Type Toggle */
.wsscd-period-start-toggle {
    display: flex;
    align-items: center;
    gap: var(--wsscd-spacing-md);
    margin-bottom: var(--wsscd-spacing-xl);
}

.wsscd-period-start-toggle__label {
    font-size: var(--wsscd-font-size-base);
    font-weight: var(--wsscd-font-weight-medium);
    color: var(--wsscd-color-text);
}

.wsscd-toggle-buttons {
    display: flex;
    background: var(--wsscd-color-surface);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-md);
    padding: var(--wsscd-spacing-xxs);
}

.wsscd-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--wsscd-spacing-xs);
    padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-md);
    border-radius: var(--wsscd-radius-sm);
    font-size: var(--wsscd-font-size-small);
    font-weight: var(--wsscd-font-weight-medium);
    color: var(--wsscd-color-text-muted);
    cursor: pointer;
    transition: var(--wsscd-transition-all);
    border: none;
    background: transparent;
}

.wsscd-toggle-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wsscd-toggle-btn:hover {
    color: var(--wsscd-color-text);
    background: var(--wsscd-color-surface-dark);
}

.wsscd-toggle-btn--active {
    background: var(--wsscd-color-primary);
    color: var(--wsscd-color-white);
    box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-toggle-btn--active:hover {
    background: var(--wsscd-color-primary-dark);
    color: var(--wsscd-color-white);
}

.wsscd-toggle-btn .wsscd-icon {
    font-size: var(--wsscd-icon-small);
}

/* Horizontal Date Range */
.wsscd-date-range {
    display: flex;
    align-items: stretch;
    gap: var(--wsscd-spacing-md);
    margin-bottom: var(--wsscd-spacing-lg);
}

/* Date Box - Card-style containers; equal height in both states */
.wsscd-date-range .wsscd-date-box {
    display: flex;
    flex-direction: column;
}

.wsscd-date-box {
    flex: 1;
    min-width: 0;
    background: var(--wsscd-color-background);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-lg);
    padding: var(--wsscd-spacing-base);
    position: relative;
    transition: var(--wsscd-transition-all);
}

.wsscd-date-box:hover {
    box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-date-box--start:hover {
    border-color: var(--wsscd-color-success);
}

.wsscd-date-box--end:hover {
    border-color: var(--wsscd-color-primary);
}

.wsscd-date-box:focus-within {
    border-color: var(--wsscd-color-primary);
    box-shadow: var(--wsscd-ring-focus);
}

/* Start box - green accent */
.wsscd-date-box--start {
    border-left: var(--wsscd-border-width-accent) solid var(--wsscd-color-success);
}

/* End box - primary accent; same border radius as Start card */
.wsscd-date-box--end {
    border-left: var(--wsscd-border-width-accent) solid var(--wsscd-color-primary);
    border-radius: var(--wsscd-radius-lg);
}

/* Immediate state styling */
.wsscd-date-box--immediate {
    background: linear-gradient(135deg, rgba(0, 163, 42, 0.05) 0%, var(--wsscd-color-background) 100%);
}

/* Indefinite end date styling */
.wsscd-date-box--indefinite {
    border-style: dashed;
    border-left-style: solid;
}

/* Date Box Label */
.wsscd-date-box__label {
    display: flex;
    align-items: center;
    gap: var(--wsscd-spacing-xs);
    margin-bottom: var(--wsscd-spacing-md);
    font-size: var(--wsscd-font-size-small);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wsscd-date-box--start .wsscd-date-box__label {
    color: var(--wsscd-color-success-dark);
}

.wsscd-date-box--end .wsscd-date-box__label {
    color: var(--wsscd-color-primary);
}

.wsscd-date-box__label .wsscd-icon {
    font-size: var(--wsscd-icon-small);
}

/* Immediate State Display - same min height as scheduled (date + gap + time rows) */
.wsscd-date-range .wsscd-date-box__immediate {
    min-height: calc(46px + var(--wsscd-spacing-sm) + 46px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wsscd-spacing-xs);
    text-align: center;
}

.wsscd-date-box__immediate-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wsscd-color-success);
}

.wsscd-date-box__immediate-icon .wsscd-icon {
    width: 24px;
    height: 24px;
}

.wsscd-date-box__date-text {
    display: block;
    font-size: var(--wsscd-font-size-xxl);
    font-weight: var(--wsscd-font-weight-bold);
    color: var(--wsscd-color-success);
    line-height: 1.2;
}

.wsscd-date-box__time-text {
    display: block;
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-muted);
}

/* Scheduled State Inputs - equal content height for start and end boxes */
.wsscd-date-range .wsscd-date-box__scheduled,
.wsscd-date-range .wsscd-date-box__content {
    min-height: calc(46px + var(--wsscd-spacing-sm) + 46px);
    display: flex;
    flex-direction: column;
    gap: var(--wsscd-spacing-sm);
}

.wsscd-date-box__date,
.wsscd-date-box__time {
    position: relative;
}

/* Date range: single border on box; inputs/trigger use transparent border so error can turn it red. */
.wsscd-date-range .wsscd-date-box .wsscd-date-input,
.wsscd-date-range .wsscd-date-box .wsscd-time-trigger {
    border: var(--wsscd-border-width) solid transparent;
    box-shadow: none;
}

.wsscd-date-range .wsscd-date-box .wsscd-date-input:hover,
.wsscd-date-range .wsscd-date-box .wsscd-date-input:focus,
.wsscd-date-range .wsscd-date-box .wsscd-time-trigger:hover:not(.wsscd-time-trigger--disabled),
.wsscd-date-range .wsscd-date-box .wsscd-time-trigger:focus-within {
    border-color: transparent;
    box-shadow: none;
}

/* Schedule step error: date input border red; time trigger keeps transparent, inner input border red */
.wsscd-date-range .wsscd-date-box .wsscd-date-input.error {
    border-color: var(--wsscd-color-danger);
    box-shadow: none;
    background-color: transparent;
}

.wsscd-date-range .wsscd-date-box .wsscd-time-trigger.error {
    padding: 0;
    border-color: transparent;
    box-shadow: none;
    background-color: transparent;
}

.wsscd-date-range .wsscd-date-box .wsscd-time-trigger.error .wsscd-time-trigger__input {
    border: var(--wsscd-border-width) solid var(--wsscd-color-danger);
}

.wsscd-date-range .wsscd-date-box .wsscd-date-input.error:hover {
    border-color: var(--wsscd-color-danger);
    box-shadow: none;
    background-color: transparent;
}

.wsscd-date-range .wsscd-date-box .wsscd-time-trigger.error:hover .wsscd-time-trigger__input,
.wsscd-date-range .wsscd-date-box .wsscd-time-trigger.error:focus-within .wsscd-time-trigger__input {
    border-color: var(--wsscd-color-danger);
}

.wsscd-date-range .wsscd-date-box .wsscd-date-input.error:focus {
    border-color: var(--wsscd-color-danger);
    box-shadow: none;
}

/* Date Input */
.wsscd-date-input {
    width: 100%;
    height: 46px;
    padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-md);
    padding-right: 46px;
    font-size: var(--wsscd-font-size-large);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-text);
    background: var(--wsscd-color-surface);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-md);
    cursor: pointer;
    transition: var(--wsscd-transition-all);
}

.wsscd-date-input:hover {
    border-color: var(--wsscd-color-border-dark);
}

.wsscd-date-input:focus {
    outline: none;
    border-color: var(--wsscd-color-primary);
    box-shadow: var(--wsscd-ring-focus);
}

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

.wsscd-date-box--end .wsscd-date-input::placeholder {
    font-size: var(--wsscd-font-size-small);
}

/* Calendar Button inside date input (fixed top so it stays aligned when error message appears below) */
.wsscd-date-box__calendar-btn {
    position: absolute;
    right: var(--wsscd-spacing-xs);
    top: 23px; /* Half of 46px input height so centered on first row only */
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--wsscd-radius-sm);
    color: var(--wsscd-color-text-muted);
    cursor: pointer;
    transition: var(--wsscd-transition-all);
}

.wsscd-date-box__calendar-btn:hover {
    background: var(--wsscd-color-primary-bg);
    color: var(--wsscd-color-primary);
}

/* Time Dropdown (custom time picker: editable input + dropdown button) */
.wsscd-time-dropdown-wrap {
    position: relative;
    width: 100%;
}

.wsscd-time-trigger {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 46px;
    background: var(--wsscd-color-surface);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-md);
    transition: var(--wsscd-transition-all);
}

.wsscd-time-trigger:hover:not(.wsscd-time-trigger--disabled) {
    border-color: var(--wsscd-color-border-dark);
}

.wsscd-time-trigger:focus-within {
    outline: none;
    border-color: var(--wsscd-color-primary);
    box-shadow: var(--wsscd-ring-focus);
}

/* When inside date range date box, time trigger has no border (date box provides single border) */
.wsscd-date-range .wsscd-date-box .wsscd-time-trigger {
    background: transparent;
}

.wsscd-time-trigger__input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-md);
    font-size: var(--wsscd-font-size-base);
    font-weight: var(--wsscd-font-weight-medium);
    color: var(--wsscd-color-text);
    background: transparent;
    border: none;
    border-radius: var(--wsscd-radius-md);
    letter-spacing: 0.02em;
}

.wsscd-time-trigger__input::placeholder {
    color: var(--wsscd-color-text-muted);
}

.wsscd-time-trigger__input:focus {
    outline: none;
}

.wsscd-time-trigger__input--placeholder {
    color: var(--wsscd-color-text-muted);
    font-weight: var(--wsscd-font-weight-normal);
}

.wsscd-time-trigger__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 46px;
    flex-shrink: 0;
    padding: 0;
    margin: 0 -2px 0 0;
    background: transparent;
    border: none;
    border-radius: var(--wsscd-radius-sm);
    color: var(--wsscd-color-text-muted);
    cursor: pointer;
    transition: var(--wsscd-transition-all);
}

.wsscd-time-trigger__btn:hover:not(:disabled) {
    background: var(--wsscd-color-primary-bg);
    color: var(--wsscd-color-primary);
}

.wsscd-time-trigger__btn:focus {
    outline: none;
    color: var(--wsscd-color-primary);
}

.wsscd-time-trigger__btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.wsscd-time-trigger__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.wsscd-time-trigger__btn:hover:not(:disabled) .wsscd-time-trigger__icon {
    opacity: 1;
}

.wsscd-time-trigger--open .wsscd-time-trigger__icon {
    transform: rotate(180deg);
}

.wsscd-time-trigger--disabled {
    background: var(--wsscd-color-surface-dark);
}

.wsscd-time-trigger--disabled .wsscd-time-trigger__input {
    color: var(--wsscd-color-text-muted);
    cursor: not-allowed;
}

/* Time dropdown panel (positioned in body) */
.wsscd-time-dropdown-panel {
    display: none;
    position: absolute;
    z-index: 100002;
    max-height: 220px;
    overflow-y: auto;
    padding: var(--wsscd-spacing-xs);
    background: var(--wsscd-color-surface);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-md);
    box-shadow: var(--wsscd-shadow-md);
}

.wsscd-time-option {
    display: block;
    width: 100%;
    padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-md);
    font-size: var(--wsscd-font-size-base);
    color: var(--wsscd-color-text);
    background: transparent;
    border: none;
    border-radius: var(--wsscd-radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}

.wsscd-time-option:hover {
    background: var(--wsscd-color-primary-bg);
    color: var(--wsscd-color-primary);
}

.wsscd-time-option[aria-selected="true"] {
    background: var(--wsscd-color-primary-bg);
    color: var(--wsscd-color-primary);
    font-weight: var(--wsscd-font-weight-semibold);
}

.wsscd-time-dropdown-wrap--disabled .wsscd-time-trigger {
    background: var(--wsscd-color-surface-dark);
    color: var(--wsscd-color-text-muted);
}

/* Date/time error (outside date-range): date input border red; time trigger inner input border red */
.wsscd-date-input.error {
    border-color: var(--wsscd-color-danger);
    background-color: var(--wsscd-color-surface);
}

.wsscd-time-trigger.error {
    padding: 0;
    border-color: var(--wsscd-color-border);
    background-color: var(--wsscd-color-surface);
}

.wsscd-time-trigger.error .wsscd-time-trigger__input {
    border: var(--wsscd-border-width) solid var(--wsscd-color-danger);
}

.wsscd-date-input.error:hover {
    border-color: var(--wsscd-color-danger);
}

.wsscd-date-input.error:focus {
    border-color: var(--wsscd-color-danger);
    box-shadow: none;
}

.wsscd-time-trigger.error:hover .wsscd-time-trigger__input,
.wsscd-time-trigger.error:focus-within .wsscd-time-trigger__input {
    border-color: var(--wsscd-color-danger);
}

/* Error message below field: persistent, subtle */
.wsscd-date-box .wsscd-field-error,
.wsscd-time-trigger + .wsscd-field-error {
    margin-top: var(--wsscd-spacing-sm);
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-danger);
    display: block;
}

/* Clear End Date Button */
.wsscd-date-box__clear {
    position: absolute;
    top: var(--wsscd-spacing-sm);
    right: var(--wsscd-spacing-sm);
    z-index: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--wsscd-radius-full);
    color: var(--wsscd-color-text-muted);
    cursor: pointer;
    transition: var(--wsscd-transition-all);
}

.wsscd-date-box__clear:hover {
    background: var(--wsscd-color-danger-bg);
    color: var(--wsscd-color-danger);
}

.wsscd-date-box__clear .wsscd-icon {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: currentColor;
}

/* Arrow Connector */
.wsscd-date-range__connector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 var(--wsscd-spacing-xs);
}

.wsscd-date-range__arrow {
    font-size: var(--wsscd-font-size-xxl);
    color: var(--wsscd-color-text-muted);
    font-weight: var(--wsscd-font-weight-normal);
}

/* Compact Duration Bar */
.wsscd-duration-bar {
    display: flex;
    align-items: center;
    gap: var(--wsscd-spacing-sm);
    padding: var(--wsscd-spacing-md) var(--wsscd-spacing-lg);
    background: var(--wsscd-color-primary-bg);
    border: var(--wsscd-border-width) solid var(--wsscd-color-primary-light-border);
    border-radius: var(--wsscd-radius-md);
    margin-bottom: var(--wsscd-spacing-md);
}

.wsscd-duration-bar__icon {
    color: var(--wsscd-color-primary);
    flex-shrink: 0;
}

.wsscd-duration-bar__text {
    font-size: var(--wsscd-font-size-medium);
    font-weight: var(--wsscd-font-weight-semibold);
    color: var(--wsscd-color-primary);
}

.wsscd-duration-bar__separator {
    color: var(--wsscd-color-text-muted);
}

.wsscd-duration-bar__hint {
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-muted);
}

/* Subtle Timezone */
.wsscd-timezone-subtle {
    display: flex;
    align-items: center;
    gap: var(--wsscd-spacing-xs);
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-muted);
}

.wsscd-timezone-subtle .wsscd-icon {
    font-size: var(--wsscd-icon-small);
}

/* Responsive - Stack vertically on small screens */
@media (max-width: 768px) {
    .wsscd-date-range {
        flex-direction: column;
    }

    .wsscd-date-range__connector {
        padding: var(--wsscd-spacing-sm) 0;
    }

    .wsscd-date-range__arrow {
        transform: rotate(90deg);
    }

    .wsscd-period-start-toggle {
        flex-direction: column;
        align-items: flex-start;
    }

    .wsscd-duration-bar {
        flex-wrap: wrap;
    }

    .wsscd-duration-bar__separator {
        display: none;
    }

    .wsscd-duration-bar__hint {
        flex-basis: 100%;
        margin-top: var(--wsscd-spacing-xs);
    }
}

@media screen and (max-width: 600px) {
	.wsscd-date-range {
		flex-direction: column;
	}

	.wsscd-date-box {
		padding: var(--wsscd-spacing-md, 12px);
	}
}