/* doc-project | projet/assets/css/admin-order-workshop-advice-modal.css | styles dedies a la modal admin Conseil atelier avec categories deroulantes, cartes options moteurs avec images, clic carte limite au cochage, etat selected compatible sans selecteur has, note atelier, statut AJAX non bloquant et footer annuler envoyer au client pour reponses individuelles cote suivi */

.admin-order-workshop-advice-modal[hidden] {
    display: none !important;
}

.admin-order-workshop-advice-modal {
    position: fixed;
    inset: 0;
    z-index: 1320;
    display: grid;
    place-items: center;
    padding: 24px;
}

.admin-order-workshop-advice-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(5px);
}

.admin-order-workshop-advice-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(940px, 100%);
    max-height: min(880px, calc(100vh - 48px));
    overflow: hidden;
    border-radius: 26px;
    background: #fbf8f3;
    box-shadow: 0 34px 100px rgba(15, 23, 42, 0.36);
}

.admin-order-workshop-advice-modal__header,
.admin-order-workshop-advice-modal__footer {
    padding: 22px 24px;
    background: #ffffff;
}

.admin-order-workshop-advice-modal__header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(95, 60, 27, 0.12);
}

.admin-order-workshop-advice-modal__header h2,
.admin-order-workshop-advice-modal__subtitle {
    margin: 0;
}

.admin-order-workshop-advice-modal__subtitle {
    margin-top: 6px;
    color: var(--muted);
}

.admin-order-workshop-advice-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(95, 60, 27, 0.16);
    border-radius: 999px;
    background: #f7f1e8;
    color: #5f3c1b;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
}

.admin-order-workshop-advice-modal__form {
    display: grid;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
}

.admin-order-workshop-advice-modal__body {
    min-height: 0;
    overflow: auto;
    padding: 22px 24px;
}

.admin-order-workshop-advice-category {
    margin-bottom: 14px;
    border: 1px solid rgba(95, 60, 27, 0.12);
    border-radius: 20px;
    background: #ffffff;
}

.admin-order-workshop-advice-category summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    color: #3e2717;
    font-weight: 900;
}

.admin-order-workshop-advice-category summary strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #f7f1e8;
    color: #5f3c1b;
    font-size: 13px;
}

.admin-order-workshop-advice-category__items {
    display: grid;
    gap: 12px;
    padding: 0 16px 16px;
}

.admin-order-workshop-advice-item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(95, 60, 27, 0.12);
    border-radius: 18px;
    background: #fbf8f3;
    cursor: pointer;
}

.admin-order-workshop-advice-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-order-workshop-advice-item__check {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(95, 60, 27, 0.32);
    border-radius: 8px;
    background: #ffffff;
}

.admin-order-workshop-advice-item input:checked + .admin-order-workshop-advice-item__check {
    background: #5f3c1b;
    border-color: #5f3c1b;
    box-shadow: inset 0 0 0 5px #ffffff;
}

.admin-order-workshop-advice-item.is-selected {
    border-color: rgba(95, 60, 27, 0.34);
    background: #f7f1e8;
}

.admin-order-workshop-advice-item__media {
    width: 82px;
    height: 62px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(95, 60, 27, 0.12);
    background: #ffffff;
}

.admin-order-workshop-advice-item__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.admin-order-workshop-advice-item__content {
    display: grid;
    gap: 4px;
}

.admin-order-workshop-advice-item__content span {
    color: var(--muted);
    font-size: 13px;
}

.admin-order-workshop-advice-item__content em {
    color: #5f3c1b;
    font-style: normal;
    font-weight: 900;
}

.admin-order-workshop-advice-note {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    font-weight: 800;
}

.admin-order-workshop-advice-note textarea {
    width: 100%;
    border: 1px solid rgba(95, 60, 27, 0.14);
    border-radius: 16px;
    padding: 12px;
    font: inherit;
}

.admin-order-workshop-advice-modal__status {
    margin: 14px 0 0;
    color: #5f3c1b;
    font-weight: 800;
}

.admin-order-workshop-advice-modal__status.is-error {
    color: #b42318;
}

.admin-order-workshop-advice-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(95, 60, 27, 0.12);
}

body.admin-page--workshop-advice-modal-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    .admin-order-workshop-advice-modal {
        padding: 10px;
    }

    .admin-order-workshop-advice-modal__dialog {
        max-height: calc(100vh - 20px);
        border-radius: 20px;
    }

    .admin-order-workshop-advice-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-order-workshop-advice-item__media {
        grid-column: 1 / -1;
        width: 100%;
        height: 140px;
    }
}