/* =========================================
   KREA3 EQUIPEMENT (SCOPED)
========================================= */

.krea3_equipement {

    /* fallback si variables thème absentes */
    --krea3-primary: var(--couleur-principale, #398096);
    --krea3-secondary: var(--couleur-secondaire, #db9b56);
    --krea3-alt: var(--autre-couleur-secondaire, #e2968b);

    --krea3-success: #2ecc71;
    --krea3-success-dark: #1e8449;
    --krea3-warning: #b9770e;
    --krea3-danger: #922b21;

}

/* =========================================
   LAYOUT
========================================= */

.krea3_equipement .krea3-layout {
    display:flex;
    gap:40px;
    align-items:flex-start;
}

.krea3_equipement .krea3-main { width:65%; }

.krea3_equipement .krea3-sidebar {
    width:35%;
    position:sticky;
    top:100px;
}

/* =========================================
   CARDS
========================================= */

.krea3_equipement .krea3-card {
    background:#fff;
    border:1px solid #e5e5e5;
    padding:20px;
    border-radius:12px;
    margin-bottom:20px;
}

/* booking card plus moderne */
.krea3_equipement .krea3-card-booking {
    border:2px solid var(--krea3-primary);
    background:linear-gradient(
        135deg,
        rgba(57,128,150,0.08),
        rgba(57,128,150,0.02)
    );
}

/* =========================================
   TITRES
========================================= */

.krea3_equipement h3 {
    margin-bottom:15px;
}

/* =========================================
   BOUTONS GROS FIX DESIGN)
========================================= */

.krea3_equipement .krea3-btn,
.krea3_equipement .krea3-btn-reserver {
    display:block;
    width:100%;
    padding:14px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    text-align:center;
    font-weight:600;
    transition: all .2s ease;
}

/* bouton principal */
.krea3_equipement .krea3-btn-reserver {
    background: var(--krea3-primary);
    color:#fff;
    margin-bottom: 1rem;
}

.krea3_equipement .krea3-btn-reserver:hover {
    transform: translateY(-1px);
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

/* bouton secondaire */
.krea3_equipement .krea3-btn-secondary {
    background: #0f2b41;
    color:#fff;
}

/* bouton itinéraire */
.krea3_equipement .krea3-directions .krea3-btn {
    background: var(--krea3-secondary);
    color:#fff;
    margin-bottom: 1rem;
}

/* =========================================
   NEXT SLOT
========================================= */

.krea3_equipement .krea3-next-slot {
    margin:15px 0;
    padding:15px;
    border-radius:8px;
    background:#fff;
    border-left:4px solid var(--krea3-primary);
    font-weight:600;
}

/* =========================================
   INFOS LIST
========================================= */

.krea3_equipement .krea3-infos li {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}

.krea3_equipement .krea3-infos svg {
    width:18px;
    height:18px;
}

/* =========================================
   FIX SVG ÉQUIPEMENTS
========================================= */

.krea3-equipement-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* le vrai fix */
.krea3-equipement-item svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;

    flex-shrink: 0;
    display: inline-block;
}

/* optionnel : uniformiser couleur */
.krea3-equipement-item svg path,
.krea3-equipement-item svg circle,
.krea3-equipement-item svg rect {
    fill: currentColor;
}

/* texte */
.krea3-equipement-item span {
    font-size: 14px;
    line-height: 1.2;
}

/* =========================================
   MAP
========================================= */

.krea3_equipement #krea3-map {
    height:220px;
    border-radius:10px;
    overflow:hidden;
}

/* =========================================
   DIRECTIONS
========================================= */

.krea3_equipement .krea3-directions {
    display:grid;
    gap:8px;
    margin-top:10px;
    position:relative;
}

.krea3_equipement .krea3-directions-menu {
    display:none;
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    background:#fff;
    border:1px solid #ddd;
    width:100%;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
    z-index:999;
}

.krea3_equipement .krea3-directions-menu.active,
.krea3_equipement .krea3-directions.is-open .krea3-directions-menu {
    display:block;
}

/* Le template historique utilise un tiret, contrairement aux premiers styles du plugin. */
.krea3-equipement .krea3-directions-menu.active,
.krea3-equipement .krea3-directions.is-open > .krea3-directions-menu,
.krea3_equipement .krea3-directions-menu.active,
.krea3_equipement .krea3-directions.is-open > .krea3-directions-menu {
    display:block !important;
    visibility:visible;
}

.krea3_equipement .krea3-directions-menu a {
    display:block;
    padding:12px;
    color:#333;
    text-decoration:none;
}

.krea3_equipement .krea3-directions-menu a:hover {
    background:#f5f5f5;
}

.krea3_equipement .krea3-directions-menu a:focus-visible,
.krea3_equipement .krea3-directions-toggle:focus-visible {
    outline:3px solid currentColor;
    outline-offset:2px;
}

/* =========================================
   CALENDAR (SAFE)
========================================= */

.krea3_equipement #krea3-calendar-front {
    margin-top:30px;
}

/* slots */
.krea3_equipement .krea3-slot-ok {
    background:#eafaf1 !important;
}

.krea3_equipement .krea3-slot-off {
    background:#f5f5f5 !important;
    opacity:0.6;
}

/* jours */
.krea3_equipement .krea3-day-past {
    background:#eee !important;
}

.krea3_equipement .krea3-day-closed {
    background:#f5f5f5 !important;
}

/* slot en cours (bloqué UX) */
.krea3_equipement-slot-started {
    background: repeating-linear-gradient(
        45deg,
        rgba(0,0,0,0.08),
        rgba(0,0,0,0.08) 6px,
        transparent 6px,
        transparent 12px
    ) !important;

    background-color: #eeeeee !important;
    cursor: not-allowed;
    opacity: 0.7;
}

.krea3_equipement-message-warning {
    background:#fff4e5;
    border-left:4px solid #b9770e;
}

/* =========================================
   LEGEND
========================================= */

.krea3_equipement .krea3-legend {
    display:flex;
    gap:20px;
    margin:20px 0;
    padding:12px;
    background:#f8f9fb;
    border-radius:8px;
}

.krea3_equipement .krea3-legend-item {
    display:flex;
    align-items:center;
    gap:8px;
}

.krea3_equipement .krea3-dot {
    width:14px;
    height:14px;
    border-radius:50%;
}

/* couleurs cohérentes */
.krea3_equipement .krea3-available { background: var(--krea3-success); }
.krea3_equipement .krea3-validated { background: var(--krea3-success-dark); }
.krea3_equipement .krea3-pending   { background: var(--krea3-warning); }
.krea3_equipement .krea3-refused   { background: var(--krea3-danger); }

/* =========================================
   FORM
========================================= */

.krea3_equipement .krea3-form {
    background:#fff;
    padding:20px;
    border:1px solid #eee;
    border-radius:10px;
}

.krea3_equipement .krea3-row input {
    width:100%;
    padding:10px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:900px){

    .krea3_equipement .krea3-layout {
        flex-direction:column;
    }

    .krea3_equipement .krea3-main,
    .krea3_equipement .krea3-sidebar {
        width:100%;
    }

    .krea3_equipement .krea3-sidebar {
        position:relative;
        top:auto;
    }
}