/**
 * Konfigo - Front office styles.
 *
 * @author    NextConcept
 * @copyright Since 2026 NextConcept
 * @license   Commercial license
 *
 * Written to sit inside any PrestaShop theme: no resets, no !important, no
 * assumptions about the grid. Every rule is scoped under .konfigo, and the
 * palette comes from custom properties a merchant can override in their own
 * stylesheet without touching this file.
 */

.konfigo {
    --konfigo-border: #e0e4ea;
    --konfigo-border-strong: #c3cbd6;
    --konfigo-accent: #2563eb;
    --konfigo-accent-soft: #eff4ff;
    --konfigo-error: #c0392b;
    --konfigo-muted: #6b7280;
    --konfigo-radius: 6px;
    --konfigo-gap: 1rem;

    margin: 1.5rem 0;
    text-align: start;
}

/* Themes centre or right-align the add-to-cart column; an inherited alignment
   would silently push every label to the wrong side, so each text element
   declares its own - a declared value always beats an inherited one.
   `start` and `end` rather than `left` and `right`, so an Arabic or Hebrew
   shop reads the way it should without a second stylesheet. */
.konfigo-config,
.konfigo-config__title,
.konfigo-config__intro,
.konfigo-field__label,
.konfigo-field__help,
.konfigo-field__error,
.konfigo-choice__label,
.konfigo-pack__title,
.konfigo-pack__intro,
.konfigo-pack__name,
.konfigo-tiers__caption,
.konfigo-tiers__hint,
.konfigo-summary__label,
.konfigo-separator {
    text-align: start;
}

.konfigo-choice__price,
.konfigo-summary__amount,
.konfigo-pack__price {
    text-align: end;
}

/* [hidden] is a low-specificity rule; any theme declaring a display on a span
   or a div would override it and leave a "hidden" field on screen. */
.konfigo [hidden] {
    display: none;
}

.konfigo-config {
    border: 1px solid var(--konfigo-border);
    border-radius: var(--konfigo-radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background: #fff;
}

.konfigo-config__title {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.konfigo-config__intro {
    margin-bottom: 1rem;
    color: var(--konfigo-muted);
    font-size: .9rem;
}

/* ---------- Fields ---------- */

.konfigo-field {
    margin-bottom: var(--konfigo-gap);
    padding-bottom: var(--konfigo-gap);
    border-bottom: 1px solid var(--konfigo-border);
}

.konfigo-field:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.konfigo-field--disabled {
    opacity: .5;
}

/* Native file inputs carry an intrinsic width wider than a phone screen; every
   control is therefore held inside its own column rather than trusted to fit. */
.konfigo input,
.konfigo select,
.konfigo textarea {
    max-width: 100%;
    box-sizing: border-box;
}

.konfigo-field__label {
    display: block;
    margin-bottom: .4rem;
    font-weight: 600;
    font-size: .95rem;
}

.konfigo-required {
    color: var(--konfigo-error);
    margin-left: .15rem;
}

.konfigo-field__price {
    margin-left: .4rem;
    font-weight: 400;
    color: var(--konfigo-accent);
    font-size: .85rem;
}

.konfigo-field__help {
    margin: 0 0 .5rem;
    color: var(--konfigo-muted);
    font-size: .82rem;
}

.konfigo-field__error {
    margin: .4rem 0 0;
    color: var(--konfigo-error);
    font-size: .82rem;
}

.konfigo-field--invalid .konfigo-input,
.konfigo-field--invalid select,
.konfigo-field--invalid textarea {
    border-color: var(--konfigo-error);
}

.konfigo-separator {
    margin: 1.25rem 0 .75rem;
    border-top: 1px solid var(--konfigo-border-strong);
    padding-top: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--konfigo-muted);
}

.konfigo-unit {
    margin-left: .35rem;
    color: var(--konfigo-muted);
    font-size: .85rem;
}

/* ---------- Choices ---------- */

.konfigo-choices {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.konfigo-choice {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .45rem .6rem;
    border: 1px solid var(--konfigo-border);
    border-radius: var(--konfigo-radius);
    cursor: pointer;
    font-weight: 400;
}

.konfigo-choice:hover {
    border-color: var(--konfigo-border-strong);
}

.konfigo-choice__label {
    flex: 1 1 auto;
}

.konfigo-choice__price {
    color: var(--konfigo-accent);
    font-size: .88rem;
    white-space: nowrap;
}

.konfigo-choice__out {
    color: var(--konfigo-error);
    font-size: .78rem;
}

.konfigo-choice__qty {
    width: 4.5rem;
    padding: .2rem .35rem;
    border: 1px solid var(--konfigo-border);
    border-radius: 4px;
}

.konfigo-choice input[type="radio"]:checked ~ .konfigo-choice__label,
.konfigo-choice input[type="checkbox"]:checked ~ .konfigo-choice__label {
    font-weight: 600;
}

/* ---------- Swatches ---------- */

.konfigo-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.konfigo-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    width: 5rem;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    text-align: center;
}

.konfigo-swatch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.konfigo-swatch__visual {
    display: block;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--konfigo-border);
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;
    transition: border-color .15s ease, transform .15s ease;
}

.konfigo-swatch__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.konfigo-swatch input:checked + .konfigo-swatch__visual {
    border-color: var(--konfigo-accent);
    transform: scale(1.06);
}

.konfigo-swatch input:focus-visible + .konfigo-swatch__visual {
    outline: 2px solid var(--konfigo-accent);
    outline-offset: 2px;
}

.konfigo-swatch__name {
    font-size: .76rem;
    line-height: 1.2;
    text-align: center;
}

.konfigo-swatch__name em {
    display: block;
    font-style: normal;
    color: var(--konfigo-accent);
}

.konfigo-swatch--out {
    opacity: .45;
    cursor: not-allowed;
}

/* ---------- Packs ---------- */

.konfigo-pack {
    margin-top: 1rem;
    padding: .9rem;
    border: 1px dashed var(--konfigo-border-strong);
    border-radius: var(--konfigo-radius);
    background: var(--konfigo-accent-soft);
}

.konfigo-pack__title {
    margin: 0 0 .5rem;
    font-size: .98rem;
    font-weight: 600;
}

.konfigo-pack__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.konfigo-pack__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    padding: .4rem .6rem;
    border-radius: 4px;
}

.konfigo-pack__name {
    flex: 1 1 auto;
}

.konfigo-pack__price {
    color: var(--konfigo-accent);
    font-size: .88rem;
}

.konfigo-pack__qty {
    width: 4.5rem;
    padding: .2rem .35rem;
    border: 1px solid var(--konfigo-border);
    border-radius: 4px;
}

.konfigo-pack__item--required .konfigo-pack__name::after {
    content: " *";
    color: var(--konfigo-error);
}

/* ---------- Pack discount scale ---------- */

/* The scale is a table because it is one: two columns a customer reads across.
   Compact enough to sit above the items without pushing the add-to-cart
   button below the fold. */
.konfigo-tiers {
    margin: 0 0 .7rem;
}

.konfigo-tiers__table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    font-size: .85rem;
}

.konfigo-tiers__caption {
    caption-side: top;
    padding: 0 0 .3rem;
    color: var(--konfigo-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.konfigo-tiers__table th,
.konfigo-tiers__table td {
    padding: .3rem .6rem;
    border-bottom: 1px solid var(--konfigo-border);
}

.konfigo-tiers__table th {
    font-weight: 600;
    color: var(--konfigo-muted);
    text-align: start;
}

.konfigo-tiers__table tr:last-child td {
    border-bottom: 0;
}

.konfigo-tiers__pct {
    text-align: end;
    font-weight: 600;
    color: var(--konfigo-accent);
}

/* The bracket in force. The left bar reads at a glance and survives a theme
   that repaints table rows; colour alone would not be enough anyway, so the
   row also carries aria-current for a screen reader. */
.konfigo-tiers__row.konfigo-tier--active td {
    background: var(--konfigo-accent-soft);
    box-shadow: inset 3px 0 0 0 var(--konfigo-accent);
}

.konfigo-tiers__hint {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: var(--konfigo-accent);
}

/* ---------- Summary ---------- */

.konfigo-summary {
    margin-top: 1rem;
    padding: .75rem .9rem;
    background: var(--konfigo-accent-soft);
    border-radius: var(--konfigo-radius);
    font-size: .88rem;
}

.konfigo-summary__lines {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
}

.konfigo-summary__lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .12rem 0;
}

.konfigo-summary__amount {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.konfigo-summary__total {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding-top: .45rem;
    border-top: 1px solid var(--konfigo-border-strong);
    font-weight: 600;
}

.konfigo-actions {
    margin-top: .75rem;
    text-align: end;
}

.konfigo-global-error {
    margin-top: .75rem;
}

/* ---------- Designer ---------- */

.konfigo-designer {
    margin-bottom: 1.25rem;
}

.konfigo-designer__stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: #f5f6f8;
    border: 1px solid var(--konfigo-border);
    border-radius: var(--konfigo-radius);
    overflow: hidden;
    touch-action: none;
}

.konfigo-designer__base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.konfigo-layer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    border: 1px dashed transparent;
    transform-origin: center center;
}

.konfigo-layer:hover {
    border-color: var(--konfigo-border-strong);
}

.konfigo-layer.is-selected {
    border-color: var(--konfigo-accent);
}

.konfigo-layer.is-empty .konfigo-layer__content {
    opacity: .45;
}

.konfigo-layer__content {
    width: 100%;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    user-select: none;
}

.konfigo-layer--image .konfigo-layer__content {
    height: 100%;
}

.konfigo-layer__handle {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--konfigo-accent);
    border: 2px solid #fff;
    opacity: 0;
    transition: opacity .12s ease;
}

.konfigo-layer.is-selected .konfigo-layer__handle {
    opacity: 1;
}

/* The designer canvas keeps a left-to-right coordinate system in every
   language: the artwork does not flip because the interface does. */
.konfigo-designer__stage {
    direction: ltr;
}

.konfigo-layer__handle--resize {
    right: -7px;
    bottom: -7px;
    cursor: nwse-resize;
}

.konfigo-layer__handle--rotate {
    left: 50%;
    top: -22px;
    margin-left: -7px;
    cursor: grab;
}

.konfigo-designer__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
    margin-top: .6rem;
    padding: .6rem;
    border: 1px solid var(--konfigo-border);
    border-radius: var(--konfigo-radius);
    background: #fafbfc;
}

.konfigo-tool {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    font-size: .74rem;
    font-weight: 500;
    color: var(--konfigo-muted);
}

.konfigo-tool__input {
    padding: .25rem .4rem;
    border: 1px solid var(--konfigo-border);
    border-radius: 4px;
    font-size: .85rem;
}

.konfigo-tool--text .konfigo-tool__input {
    min-width: 12rem;
}

.konfigo-tool--number .konfigo-tool__input {
    width: 4.5rem;
}

.konfigo-tool--color .konfigo-tool__input {
    width: 3rem;
    padding: .1rem;
    height: 2rem;
}

.konfigo-tool__button {
    padding: .3rem .55rem;
    border: 1px solid var(--konfigo-border);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
}

/* ---------- Cart and order recap ---------- */

.konfigo-recap__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.konfigo-recap__line {
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    padding: .15rem 0;
    font-size: .85rem;
}

.konfigo-recap__label {
    color: #6b7280;
}

.konfigo-recap__value {
    flex: 1 1 auto;
    text-align: start;
}

.konfigo-recap__price {
    white-space: nowrap;
}

.konfigo-recap__total {
    display: flex;
    justify-content: space-between;
    margin: .4rem 0 0;
    padding-top: .35rem;
    border-top: 1px solid #e0e4ea;
    font-size: .88rem;
}

.konfigo-recap__preview img {
    max-width: 160px;
    height: auto;
    border-radius: 4px;
    margin-bottom: .5rem;
}

/* ---------- Busy state ---------- */

.konfigo-busy {
    opacity: .65;
    pointer-events: none;
}

/* ---------- Small screens ---------- */

@media (max-width: 575px) {
    .konfigo-config {
        padding: .9rem;
    }

    .konfigo-swatch {
        width: 4.25rem;
    }

    .konfigo-swatch__visual {
        width: 2.5rem;
        height: 2.5rem;
    }

    .konfigo-choice {
        flex-wrap: wrap;
    }

    .konfigo-designer__toolbar {
        gap: .4rem;
    }

    .konfigo-tool--text .konfigo-tool__input {
        min-width: 8rem;
    }
}

.konfigo-summary__grand {
    display: flex;
    justify-content: space-between;
    margin: .3rem 0 0;
    font-weight: 700;
    font-size: .95rem;
}

/* Article de pack epuise : le champ est fige, la mention explique pourquoi.
   Sans elle, un champ grise passe pour un bogue. */
.konfigo-pack__out {
    font-size: .82rem;
    color: var(--konfigo-error);
}

.konfigo-pack__qty:disabled {
    background: #f6f7f9;
    color: var(--konfigo-muted);
    cursor: not-allowed;
}