/* Product Master wizard — presentation layer only (v1.0.0 freeze) */

.product-master-wizard {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.product-master-wizard *,
.product-master-wizard *::before,
.product-master-wizard *::after {
    box-sizing: border-box;
}

/* ── Modal width (fit content, centered — no dead space on the right) ── */
.fi-modal-window.product-master-modal,
.fi-modal-window:has(.product-master-wizard) {
    width: 100% !important;
    max-width: min(92vw, 980px) !important;
}

.fi-modal-window.product-master-modal .fi-modal-content,
.fi-modal-window:has(.product-master-wizard) .fi-modal-content,
.fi-modal-window:has(.product-master-wizard) .fi-modal-body,
.fi-modal-window:has(.product-master-wizard) .fi-sc,
.fi-modal-window:has(.product-master-wizard) .fi-section-content-ctn,
.fi-modal-window:has(.product-master-wizard) .product-master-wizard,
.product-master-wizard .fi-fo-field-wrp,
.product-master-wizard .fi-select-input,
.product-master-wizard .fi-input-wrp,
.product-master-wizard .choices,
.product-master-wizard .choices__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
}

/* ── Numbered step headers ── */
.product-master-step.fi-section {
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 0.25rem 0 1rem;
    background: #fff;
    margin-bottom: 0.25rem;
}

.product-master-step > .fi-section-header {
    position: relative;
    padding: 1.25rem 1.5rem 0.75rem 4.25rem !important;
    border-bottom: none;
}

.product-master-step[data-step="1"] > .fi-section-header::before,
.product-master-step[data-step="2"] > .fi-section-header::before,
.product-master-step[data-step="3"] > .fi-section-header::before,
.product-master-step[data-step="4"] > .fi-section-header::before {
    content: attr(data-step);
    position: absolute;
    left: 1.5rem;
    top: 1.25rem;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 2rem;
    text-align: center;
}

.product-master-step .fi-section-header-heading {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.35 !important;
}

.product-master-step .fi-section-header-description {
    margin-top: 0.25rem !important;
    font-size: 0.875rem !important;
    color: #6b7280 !important;
}

.product-master-step > .fi-section-content-ctn {
    padding: 0 1.5rem 0.5rem !important;
}

/* ── Card grids ── */
.product-master-card-grid {
    display: grid;
    gap: 1rem;
    width: 100%;
    align-items: stretch;
}

/* Step 1 — 2×2 on tablet+ (matches mockup) */
.product-master-card-grid--types {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .product-master-card-grid--types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Step 2 — two equal columns */
.product-master-card-grid--departments {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .product-master-card-grid--departments {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Base card ── */
.product-master-card {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.875rem;
    background: #fff;
    text-align: left;
    font-family: inherit;
    appearance: none;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.14s ease;
    cursor: pointer;
}

.product-master-card:hover:not(.is-locked) {
    border-color: #93c5fd;
    background: #f8fbff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.08);
}

.product-master-card.is-selected {
    border-color: #2563eb;
    background: #f0f7ff;
    box-shadow: 0 0 0 1px #2563eb;
}

.product-master-card.is-locked {
    opacity: 0.65;
    cursor: default;
}

.product-master-card-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

label.product-master-card {
    cursor: pointer;
}

/* Step 1 — tall selection cards */
.product-master-card--type {
    flex-direction: column;
    align-items: stretch;
    min-height: 11.5rem;
    padding: 1.375rem 1.25rem 1.25rem;
    text-align: center;
}

.product-master-card--type .product-master-card__icon {
    margin: 0 auto 0.75rem;
}

.product-master-card--type .product-master-card__tags {
    justify-content: center;
}

.product-master-card__check {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.375rem;
    text-align: center;
}

/* Step 2 — compact storage cards */
.product-master-card--department {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.875rem;
    min-height: 5.5rem;
    padding: 1rem 1.125rem;
}

.product-master-card__radio {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    border: 2px solid #d1d5db;
    border-radius: 9999px;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.product-master-card__radio.is-checked {
    border-color: #2563eb;
    background: #2563eb;
    box-shadow: inset 0 0 0 3px #fff;
}

.product-master-card__icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.625rem;
    line-height: 1;
    border-radius: 0.625rem;
    background: #f3f4f6;
}

.product-master-card__icon--sm {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.375rem;
}

.product-master-card.is-selected .product-master-card__icon {
    background: #dbeafe;
}

.product-master-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.product-master-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
}

.product-master-card__description {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.45;
    flex: 1;
}

.product-master-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: auto;
    padding-top: 0.875rem;
}

.product-master-card__tag {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    color: #374151;
    background: #f3f4f6;
    border-radius: 9999px;
    white-space: nowrap;
}

.product-master-card.is-selected .product-master-card__tag {
    background: #dbeafe;
    color: #1e40af;
}

/* Info banner */
.product-master-wizard-note {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.625rem;
    line-height: 1.5;
}

.product-master-wizard-note__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.25rem;
    text-align: center;
}

/* ── Dark mode ── */
.dark .product-master-step.fi-section {
    border-color: #374151;
    background: #111827;
}

.dark .product-master-step .fi-section-header-heading {
    color: #f9fafb !important;
}

.dark .product-master-card {
    border-color: #374151;
    background: #111827;
}

.dark .product-master-card:hover:not(.is-locked) {
    border-color: #3b82f6;
    background: rgba(30, 58, 138, 0.2);
}

.dark .product-master-card.is-selected {
    border-color: #3b82f6;
    background: rgba(30, 58, 138, 0.25);
}

.dark .product-master-card__icon {
    background: #1f2937;
}

.dark .product-master-card.is-selected .product-master-card__icon {
    background: rgba(30, 58, 138, 0.5);
}

.dark .product-master-card__title {
    color: #f9fafb;
}

.dark .product-master-card__description {
    color: #9ca3af;
}

.dark .product-master-card__tag {
    background: #1f2937;
    color: #d1d5db;
}

.dark .product-master-card.is-selected .product-master-card__tag {
    background: rgba(30, 58, 138, 0.5);
    color: #bfdbfe;
}

.dark .product-master-wizard-note {
    color: #bfdbfe;
    background: rgba(30, 58, 138, 0.25);
    border-color: #1d4ed8;
}

.product-master-selling-prices {
    width: 100%;
}