/* ============================
   1. Layout global
   ============================ */

.kawa-personnalisation {
    margin-top: 30px;
    margin-bottom: 40px;
    font-family: "Inter", "Helvetica", "Arial", sans-serif;
}

/* ============================
   2. LISTE DES FAMILLES (colonne gauche)
   ============================ */

.kawa-family-item {
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
    padding: 12px 15px;
}

.kawa-family-item:hover {
    background: #f7f7f7;
    border-left-color: #007bff;
}

.kawa-family-item.active {
    background: #e9f2ff;
    border-left-color: #007bff;
    font-weight: 600;
}

/* Align icon & text */
.kawa-family-item strong {
    font-size: 15px;
}

/* Famille obligatoire badge */
.kawa-family-item .badge {
    margin-top: 4px;
}

/* ============================
   3. PANNEAUX FAMILLES (droite)
   ============================ */

.kawa-family-pane {
    display: none;
    animation: fadeIn 0.25s ease-out;
}

.kawa-family-pane.active {
    display: block;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kawa-family-pane h3 {
    margin-bottom: 15px;
    font-weight: 700;
}

.kawa-family-pane .form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

/* ============================
   4. ITEMS
   ============================ */

.kawa-item {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 12px;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.kawa-item:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}

.kawa-item img {
    border-radius: 6px;
    margin-right: 15px;
}

/* Titre item */
.kawa-item-title {
    font-weight: 600;
    font-size: 15px;
}

/* Description item */
.kawa-item-description {
    font-size: 13px;
    color: #666;
    margin-top: 3px;
}

/* ============================
   5. FORM STYLES
   ============================ */

.kawa-personnalisation input[type="text"],
.kawa-personnalisation input[type="number"],
.kawa-personnalisation textarea,
.kawa-personnalisation select {
    border-radius: 6px;
}

/* ============================
   6. Navigation entre familles (facultatif)
   ============================ */

.kawa-nav-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.kawa-nav-buttons .btn {
    padding: 10px 20px;
    font-weight: 600;
}

/* Radios avec image */

/* Container cliquable */
.kawa-radio-option {
    display: block;
    margin-bottom: 12px;
    cursor: pointer;
}

/* On cache le radio natif */
.kawa-radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Card visuelle */
.kawa-radio-card {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    transition: all 0.2s ease;
}

/* Image de l'item */
.kawa-radio-image {
    max-height: 70px;
    border-radius: 6px;
    margin-right: 12px;
}

/* Texte à droite de l'image */
.kawa-radio-text {
    display: flex;
    flex-direction: column;
}

.kawa-radio-title {
    font-weight: 600;
    margin-bottom: 3px;
}

.kawa-radio-description {
    font-size: 13px;
    color: #666;
}

/* État hover */
.kawa-radio-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    border-color: #bbb;
}

/* État sélectionné via :checked */
.kawa-radio-input:checked + .kawa-radio-card {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}


/* ===========================
   Affichage horizontal des radios
   =========================== */

.kawa-radio-container {
    display: flex;
    flex-wrap: wrap;    /* Passe à la ligne si nécessaire */
    gap: 15px;          /* Espacement horizontal et vertical */
    margin-bottom: 20px;
}

/* Chaque option radio devient une “carte” horizontale */
.kawa-radio-option {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: 180px;             /* largeur par item (ajustable) */
}

/* Le label englobe input + card */
.kawa-radio-option input.kawa-radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kawa-radio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #ddd;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    transition: 0.2s ease;
    height: 100%;
    text-align: center;
}

.kawa-radio-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    border-color: #aaa;
}

/* Image en mode horizontal centrée */
.kawa-radio-image {
    max-height: 70px;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* Titre centré */
.kawa-radio-title {
    font-weight: 600;
    margin-bottom: 3px;
    font-size: 14px;
}

/* Sélection visuelle */
.kawa-radio-input:checked + .kawa-radio-card {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}


/* ============================
   7. Responsive
   ============================ */

@media (max-width: 767px) {
    .kawa-personnalisation .list-group-item {
        font-size: 14px;
    }

    .kawa-item {
        padding: 10px;
    }

    .kawa-item img {
        max-height: 40px;
    }
}