/*
 * Product steps on the legacy checkout (app/Support/ProductSteps): the
 * blocks a product draws itself — item cards, the payroll counter, service
 * groups, the province popup, intro and quiz screens. Cards reuse the plan
 * cards' .list-group-radio look; these rules add only what is new. Colours
 * come from the e-residence theme tokens, with neutral fallbacks for the
 * sites that do not load it.
 */

.product-step-muted {
    color: var(--color-brand-muted, #6b7280);
    font-size: 14px;
    line-height: 1.5;
}

/* item cards (checkbox variant of the plan cards) */
.list-group.product-step-cards {
    max-width: unset;
}
.product-step-cards .list-group-item {
    position: relative;
}
/* The price sits top-right as on the plan cards; that rule ships inside the
   radio component, which a step without plans (accounting) never renders. */
.product-step-cards .euro-sum {
    position: absolute;
    z-index: 1;
    top: 20px;
    right: 20px;
}
html[lang="he"] .product-step-cards .euro-sum {
    right: unset;
    left: 20px;
}
html[lang="he"] .product-step-cards .list-group-item {
    padding-right: 1rem !important;
    padding-left: 6rem;
}
/* The package block of a step product reads right-to-left in Arabic and
   Hebrew (order-form.blade.php): the plan cards' price moves to the left and
   the room kept for it with it. */
[dir="rtl"] .list-group-radio .list-group-item {
    padding-right: 1rem !important;
    padding-left: 6rem !important;
}
[dir="rtl"] .list-group-radio .euro-sum {
    right: unset;
    left: 20px;
}
.product-step-price {
    font-weight: 600;
}
.product-step-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* Cards of a row are one height, like bricks, with the price on the bottom
   line: a title that wraps to three lines no longer leaves its neighbours
   short. */
.product-step-cards-grid > div {
    display: flex;
}
.product-step-cards-grid .list-group-item {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-step-cards-grid .product-step-price {
    margin-top: auto !important;
    padding-top: 4px;
}
.product-step-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--color-brand-gold, #ffc107);
    color: var(--color-brand-ink, #1a1a18);
}

/* payroll counter */
.product-step-counter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid var(--color-line, #dee2e6);
    border-radius: 12px;
    background: #fff;
}
.product-step-counter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.product-step-counter-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-line-strong, #6c757d);
    background: #fff;
    font-size: 20px;
    line-height: 1;
}
.product-step-counter-btn:disabled {
    opacity: .4;
}
.product-step-counter-value {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
}

/* one-time service groups */
.product-step-group {
    border: 1px solid var(--color-line, #dee2e6);
    border-radius: 12px;
    background: #fff;
    padding: 12px 16px;
}
.product-step-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
}
.product-step-group summary::-webkit-details-marker {
    display: none;
}
.product-step-group summary::after {
    content: '▾';
    margin-left: 8px;
    transition: transform .15s;
}
.product-step-group[open] summary::after {
    transform: rotate(180deg);
}
.product-step-group-count {
    margin-left: auto;
    margin-right: 8px;
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    background: var(--color-brand-primary, #0d6efd);
    color: #fff;
}

/* lead description and thank-you screens */
.product-step-lead {
    padding: 24px;
    border: 1px solid var(--color-line, #dee2e6);
    border-radius: 12px;
    background: #fff;
}
.product-step-done {
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    margin: 30px 0;
    background-color: var(--color-brand-surface, #f8f9fa);
}
.product-step-done-title {
    font-size: 1.25rem;
    margin-bottom: 20px;
}
.product-step-done-text {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* province popup */
.product-step-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .6);
}
.product-step-popup {
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 32px;
    border-radius: 12px;
    background: #fff;
}

/* quiz */
.product-step-quiz {
    margin-bottom: 24px;
}
.product-step-progress {
    height: 6px;
    margin-bottom: 24px;
    border-radius: 999px;
    background: var(--color-line, #e9ecef);
    overflow: hidden;
}
.product-step-progress-fill {
    height: 100%;
    background: var(--color-brand-primary, #0d6efd);
    transition: width .2s;
}
.product-step-quiz-title {
    font-size: 1.75rem;
    margin-bottom: 16px;
}
.product-step-quiz-question {
    font-size: 1.35rem;
    margin-bottom: 20px;
}
.product-step-quiz-options {
    display: grid;
    gap: 10px;
}
.product-step-quiz-option {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--color-line, #dee2e6);
    border-radius: 12px;
    background: #fff;
    text-align: left;
    font-weight: 500;
}
.product-step-quiz-option:hover {
    border-color: var(--color-line-strong, #6c757d);
}
.product-step-quiz-option.selected {
    border-color: var(--color-brand-primary, #0d6efd);
    box-shadow: 0 0 0 2px var(--color-brand-primary, #0d6efd);
    background: var(--color-brand-sky, #f0f6ff);
}
[dir="rtl"] .product-step-quiz-option {
    text-align: right;
}

/* The quiz's way back reads as a quiet text link, not a browser-blue one. */
.product-step-back {
    color: var(--color-brand-ink, #1a1a18);
    text-decoration: none;
}
.product-step-back:hover,
.product-step-back:focus {
    color: var(--color-brand-ink, #1a1a18);
    text-decoration: underline;
}