/* ================================================================
   Cabinet Central — Zone Panels
   Slide-in content panels triggered by kitchen zone clicks
   ================================================================ */

/* ---- Overlay ---- */
.zone-overlay {
    position:       fixed;
    inset:          0;
    background:     rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index:        200;
    opacity:        0;
    pointer-events: none;
    transition:     opacity var(--ease-normal);
}
.zone-overlay.is-active {
    opacity:        1;
    pointer-events: all;
}

/* ---- Panel ---- */
.zone-panel {
    position:   fixed;
    top:        0;
    right:      0;
    width:      min(var(--panel-width), 100vw);
    height:     100dvh;
    background: var(--cc-light);
    z-index:    300;
    transform:  translateX(100%);
    transition: transform var(--ease-slow);
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: var(--shadow-lg);
    overscroll-behavior: contain;
}
.zone-panel.is-open {
    transform: translateX(0);
}

/* ---- Close button ---- */
.zone-panel__close {
    position:       sticky;
    top:            var(--space-md);
    float:          right;
    margin:         var(--space-md) var(--space-md) 0 0;
    width:          36px;
    height:         36px;
    border-radius:  50%;
    background:     rgba(0,0,0,.06);
    color:          var(--cc-mid);
    font-size:      1.5rem;
    line-height:    1;
    display:        flex;
    align-items:    center;
    justify-content: center;
    transition:     background var(--ease-fast), color var(--ease-fast);
    z-index:        10;
}
.zone-panel__close:hover {
    background: var(--cc-warm-dark);
    color:      var(--cc-dark);
}

/* ---- Panel chrome ---- */
.panel {
    display:        flex;
    flex-direction: column;
    min-height:     100%;
}
.panel__header {
    background:  var(--zone-color, var(--cc-primary));
    padding:     var(--space-3xl) var(--space-xl) var(--space-xl);
    flex-shrink: 0;
}
.panel__title {
    font-size:   2rem;
    color:       var(--cc-light);
    line-height: 1.15;
}
.panel__subtitle {
    color:      rgba(255,255,255,.75);
    font-size:  0.95rem;
    margin-top: var(--space-sm);
}
.panel__body {
    padding: var(--space-xl);
    flex:    1;
}

/* ---- Loading / error states ---- */
.panel-loading,
.panel-error {
    padding:    var(--space-2xl);
    text-align: center;
    color:      var(--cc-mid);
    font-size:  1rem;
}
.panel-error { color: var(--cc-error); }

/* ---- Zone-specific panel content helpers ---- */

/* Step list (process zone) */
.step-list { display: flex; flex-direction: column; gap: var(--space-lg); }
.step {
    display:     flex;
    gap:         var(--space-md);
    align-items: flex-start;
}
.step__number {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--cc-accent);
    color:           var(--cc-dark);
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-size:       0.9rem;
}
.step__title { font-weight: 700; margin-bottom: var(--space-xs); }
.step__body  { color: var(--cc-mid); font-size: 0.95rem; }

/* Download list */
.download-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.download-item {
    display:         flex;
    align-items:     center;
    gap:             var(--space-md);
    padding:         var(--space-md);
    border:          1px solid var(--cc-warm-dark);
    border-radius:   var(--radius-md);
    text-decoration: none;
    color:           var(--cc-dark);
    transition:      background var(--ease-fast), border-color var(--ease-fast);
}
.download-item:hover {
    background:      var(--cc-warm);
    border-color:    var(--cc-accent);
    text-decoration: none;
}

/* Gallery grid */
.gallery-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-sm);
}
.gallery-item img {
    width:         100%;
    aspect-ratio:  4/3;
    object-fit:    cover;
    border-radius: var(--radius-sm);
}