/* Opening Hours (Full) — kabdalis2 design system.
   view.js adds .ohf to the wrapper at runtime (and .b-card when the card
   background is enabled). CSS targets the actual save()/runtime DOM classes so
   styling lands identically in the editor preview and on the front end. */

.kabdalis-opening-hours-full.ohf{ width:100%; margin:0; }
.kabdalis-opening-hours-full.ohf.b-card{ padding:var(--card-pad); }
.opening-hours-full-container{ display:flex; flex-direction:column; gap:16px; }

/* Filter strip */
.opening-hours-full-filters{ display:flex; flex-direction:column; gap:10px; }
.ohf-filter-panel{
    display:flex; flex-direction:column; gap:14px; padding:18px;
    border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.ohf-filter-header{
    display:flex; align-items:center; gap:6px;
    font-family:var(--font-mono); font-size:.66rem;
    text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.ohf-filter-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ohf-filter-group{ display:flex; flex-direction:column; gap:8px; }
.ohf-filter-group > label{ font-size:.78rem; color:var(--ink-soft); }
.ohf-date-group{ gap:10px; }
.ohf-date-label{
    display:flex; flex-direction:column; gap:5px;
    font-size:.78rem; color:var(--ink-soft);
}
.ohf-filter-input{
    padding:9px 11px; border:1px solid var(--line);
    border-radius:var(--radius-sm);
    background:var(--surface); color:var(--ink);
    font:inherit; font-size:.88rem;
}
.ohf-filter-input:focus{
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ohf-tags-group{ flex-direction:row; flex-wrap:wrap; }
.ohf-tags-group > label{ flex:0 0 100%; }
.ohf-tags-container{ display:flex; flex-wrap:wrap; gap:8px; }
.ohf-tag-chip{
    padding:6px 12px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface);
    font-size:.8rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.ohf-tag-chip:hover{ border-color:var(--accent); color:var(--accent); }
.ohf-tag-chip.is-active{
    background:color-mix(in srgb, var(--accent) 12%, transparent);
    border-color:var(--accent); color:var(--accent);
}
.ohf-filter-actions{ display:flex; gap:10px; justify-content:flex-end; }
.ohf-btn{
    padding:9px 16px; border-radius:999px; border:1px solid var(--line);
    font-size:.85rem; font-weight:600; cursor:pointer;
}
.ohf-btn.primary,
.ohf-btn.ohf-apply-button{
    background:var(--accent); color:var(--on-accent); border-color:var(--accent);
}
.ohf-btn.secondary{ background:var(--surface); color:var(--ink); }

/* Day cards */
.opening-hours-full-days{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:14px;
}
.ohf-day-card{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden;
}
.ohf-day-header{
    padding:13px 16px;
    font-family:var(--font-display); font-weight:var(--display-w);
    font-size:1.05rem; color:var(--ink);
    border-bottom:1px solid var(--line); background:var(--surface2);
}
.ohf-day-date{
    font-family:var(--font-mono); font-size:.62rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    margin-top:3px;
}
.ohf-period-body{ display:flex; flex-direction:column; gap:14px; padding:16px; }

/* Section bodies need their own inset — they sit directly on the card, so
   without this the rows/events run flush to the card border. */
.ohf-day-card > .ohf-section{ padding:14px 16px; }
.ohf-day-card > .ohf-section + .ohf-section{ border-top:1px solid var(--line); }
.ohf-section{ display:flex; flex-direction:column; gap:4px; }
.ohf-section-heading{
    font-family:var(--font-mono); font-size:.62rem;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--muted); margin-bottom:4px;
}

/* Opening rows */
.ohf-opening-hours-list{ display:flex; flex-direction:column; }
.ohf-opening-row{
    display:flex; align-items:center;
    gap:10px; padding:9px 0;
    border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.ohf-opening-row:first-child{ border-top:0; }
.ohf-opening-icon{
    flex:0 0 auto; color:var(--muted);
    display:grid; place-items:center;
}
/* Icon markup from getIconMarkupForPlace(): an .oh-icon box holding either a FA
   glyph or a custom lift SVG (.ohf-svg-icon). Without an explicit size the inline
   SVG falls back to its 302px viewBox and renders huge — constrain both here. */
.ohf-opening-icon .oh-icon{
    display:grid; place-items:center;
    width:24px; height:24px; color:var(--accent);
}
.ohf-opening-icon .oh-icon i{ font-size:1rem; }
.ohf-opening-icon .ohf-svg-icon{ width:20px; height:20px; display:block; }
.ohf-opening-details{
    flex:1; min-width:0;
    display:flex; align-items:baseline; justify-content:space-between;
    gap:10px; flex-wrap:wrap;
}
.ohf-opening-name{ font-weight:600; color:var(--ink); }
.ohf-opening-time{ color:var(--muted); font-size:.92rem; white-space:nowrap; }
.ohf-opening-description{ flex:0 0 100%; color:var(--ink-soft); font-size:.85rem; }

/* Event cards */
.ohf-events-list{ display:flex; flex-direction:column; gap:8px; }
.ohf-event-card{
    display:flex; flex-direction:column; gap:1px;
    padding:9px 12px; border-radius:var(--radius-sm);
    background:var(--surface2); border-left:3px solid var(--accent);
}
/* Optional event thumbnail — without a size cap the raw <img> renders at its
   natural resolution and blows out the card. */
.ohf-event-image-wrapper{
    width:100%; aspect-ratio:16 / 9; overflow:hidden;
    border-radius:var(--radius-sm); background:var(--surface); margin-bottom:6px;
}
.ohf-event-image{ width:100%; height:100%; object-fit:cover; display:block; }
.ohf-event-content{ display:flex; flex-direction:column; gap:1px; }
.ohf-event-top{ display:flex; flex-direction:column; gap:1px; }
.ohf-event-time{ color:var(--muted); font-size:.82rem; }
.ohf-event-title{ font-weight:600; color:var(--ink); }
.ohf-event-description{ color:var(--ink-soft); font-size:.85rem; margin-top:2px; }
/* Event tag chips — rendered as bare spans by view.js; give them the same
   token-driven pill look as the filter tag chips (read-only, so no hover). */
.ohf-event-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ohf-event-tag{
    padding:2px 9px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface);
    font-size:.72rem; font-weight:600; color:var(--ink-soft);
}

/* Load-more — centering wrapper; the .ohf-btn inside is the actual button. */
.opening-hours-full-load-more{ display:flex; justify-content:center; margin-top:2px; }
.opening-hours-full-load-more:empty{ display:none; }

/* States */
.ohf-loading, .ohf-empty, .ohf-error{
    padding:18px; text-align:center; color:var(--muted);
}
.ohf-loading-inline, .ohf-empty-tags{ font-size:.8rem; color:var(--muted); }
.ohf-spinner{
    display:inline-block; width:14px; height:14px; vertical-align:-2px;
    border:2px solid color-mix(in srgb, var(--muted) 35%, transparent);
    border-top-color:var(--accent); border-radius:50%;
    animation:ohf-spin .7s linear infinite;
}
@keyframes ohf-spin{ to{ transform:rotate(360deg); } }

/* Density — Compact tightens the rhythm; Comfortable is the default above. */
.opening-hours-full-container.density-compact{ gap:12px; }
.density-compact .opening-hours-full-days{ gap:10px; }
.density-compact .ohf-day-header{ padding:10px 14px; font-size:.98rem; }
.density-compact .ohf-day-card > .ohf-section{ padding:11px 14px; }
.density-compact .ohf-opening-row{ padding:7px 0; }

@media (max-width:680px){
    .opening-hours-full-days{ grid-template-columns:1fr; }
    .ohf-filter-grid{ grid-template-columns:1fr; }
}

/* Reduced motion — slow the loading spinner (don't stop it; it signals work). */
@media (prefers-reduced-motion: reduce){
    .ohf-spinner{ animation-duration:1.4s; }
}