.board-border-pattern {
    background-color: var(--board-bg, #f8fafc);
    border: 12px solid #fff;
    box-shadow: 0 0 0 1px #cbd5e1, inset 0 0 0 2px var(--board-accent, #60a5fa), inset 0 0 0 6px color-mix(in srgb, var(--board-accent, #60a5fa) 30%, transparent);
    position: relative;
}

.board-border-pattern::before,
.board-border-pattern::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    background-image: linear-gradient(135deg, #60a5fa 25%, transparent 25%), linear-gradient(225deg, #60a5fa 25%, transparent 25%);
    background-size: 24px 24px;
    background-position: center;
}

.board-border-pattern::before {
    top: -12px;
}

.board-border-pattern::after {
    bottom: -12px;
    transform: rotate(180deg);
}

.board-vertical-pattern::before,
.board-vertical-pattern::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    background-image: linear-gradient(135deg, #60a5fa 25%, transparent 25%), linear-gradient(45deg, #60a5fa 25%, transparent 25%);
    background-size: 24px 24px;
    background-position: center;
}

.board-vertical-pattern::before {
    left: -12px;
}

.board-vertical-pattern::after {
    right: -12px;
    transform: rotate(180deg);
}

.nastaliq-text {
    font-family: 'IranNastaliq', 'Vazirmatn', serif;
    line-height: 1.9;
}

.ys-wizard-step {
    display: none;
}

.ys-wizard-step.active {
    display: block;
}

.ys-wizard-progress-bar {
    transition: width .4s ease;
}

.ys-board-preview-vertical {
    aspect-ratio: 16 / 11;
    max-width: 600px;
    margin: 0 auto;
    --board-accent: #7b2c83;
    --board-bg: #f5f3fa;
}

.ys-board-order-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1280px) {
    .ys-board-order-layout {
        flex-direction: row;
        gap: 2rem;
    }

    .ys-board-order-form {
        width: 41.666667%;
    }

    .ys-board-order-preview {
        position: sticky;
        top: 6rem;
        width: 58.333333%;
    }
}

.ys-board-sample-card {
    transition: transform .25s ease, box-shadow .25s ease;
}

.ys-board-sample-card:not(:disabled):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.ys-board-option--disabled {
    cursor: not-allowed;
    opacity: .62;
}

.ys-ceremony-time-input {
    direction: ltr;
    text-align: left;
    padding-right: 2.75rem;
    padding-left: 1rem;
}

.ys-ceremony-time-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}