/*
 * OrderMeal Menu Widget — Styles v1.2
 *
 * Apply one theme class to your container div:
 *
 *   class="omw-theme-light"     Clean white cards       (restaurants, cafes)
 *   class="omw-theme-dark"      Dark + gold accent       (bars, fine dining)
 *   class="omw-theme-minimal"   Borderless list          (minimal/modern sites)
 *   class="omw-theme-fresh"     Green + nature feel      (healthy, vegan)
 *   class="omw-theme-bold"      Strong colour headers    (fast food, takeaways)
 *
 * Override any variable in your own stylesheet:
 *
 *   #my-menu {
 *       --omw-accent: #c0392b;
 *       --omw-font:   'Playfair Display', serif;
 *   }
 */

/* Base reset and variables */

[data-om-widget] {
    --omw-font:              -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --omw-accent:            #e85d26;
    --omw-accent2:           #c44d1e;
    --omw-text:              #1a1a1a;
    --omw-text-muted:        #666;
    --omw-bg:                #fff;
    --omw-bg-alt:            #f0f0f0;
    --omw-border:            #e4e4e4;
    --omw-tab-bg:            #f0f0f0;
    --omw-tab-active:        var(--omw-accent);
    --omw-tab-text:          #444;
    --omw-tab-active-text:   #fff;
    --omw-radius:            10px;
    --omw-radius-tab:        7px;
    --omw-item-shadow:       0 1px 4px rgba(0,0,0,0.07);
    --omw-item-shadow-hover: 0 8px 24px rgba(0,0,0,0.13);

    font-family: var(--omw-font);
    color:       var(--omw-text);
    line-height: 1.5;
    box-sizing:  border-box;
}
[data-om-widget] *, [data-om-widget] *::before, [data-om-widget] *::after {
    box-sizing: inherit;
}

/* Loading state */

.omw-loading {
    padding:         48px 24px;
    text-align:      center;
    color:           var(--omw-text-muted);
    font-size:       14px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
}
.omw-spinner {
    display:          inline-block;
    width:            18px;
    height:           18px;
    border:           2px solid var(--omw-border);
    border-top-color: var(--omw-accent);
    border-radius:    50%;
    animation:        omw-spin 0.7s linear infinite;
    flex-shrink:      0;
}
@keyframes omw-spin { to { transform: rotate(360deg); } }

/* Error and empty states */

.omw-error { padding: 16px; color: #c0392b; font-size: 14px; }
.omw-empty { padding: 16px; color: var(--omw-text-muted); font-size: 14px; }

/* Content fade-in */

.omw-section {
    margin-bottom: 36px;
    animation: omw-fadein 0.3s ease both;
}
@keyframes omw-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section title */

.omw-section-title {
    font-size:   20px;
    font-weight: 700;
    margin:      0 0 16px;
    color:       var(--omw-text);
}

/* Opening hours table */

.omw-hours-table    { width: 100%; border-collapse: collapse; font-size: 14px; }
.omw-hours-table tr { transition: background 0.12s; }
.omw-hours-table td { padding: 9px 14px 9px 0; vertical-align: top; }
.omw-day            { font-weight: 600; min-width: 140px; white-space: nowrap; color: var(--omw-text); }
.omw-times          { color: var(--omw-text-muted); }
.omw-time-slot      { white-space: nowrap; display: inline-block; margin-right: 14px; }
.omw-time-slot:last-child { margin-right: 0; }

/* Category tabs */

.omw-tabs-wrap {
    display:       flex;
    align-items:   stretch;
    border-bottom: 2px solid var(--omw-border);
    margin-bottom: 20px;
}
.omw-tabs {
    flex:        1;
    display:     flex;
    gap:         4px;
    padding-bottom: 6px;
    overflow-x:  auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width:   0;
}
.omw-tabs::-webkit-scrollbar { display: none; }

/* Tab scroll arrow buttons */

.omw-tabs-arrow {
    flex-shrink:   0;
    background:    var(--omw-tab-bg);
    border:        none;
    padding:       0 12px;
    cursor:        pointer;
    color:         var(--omw-tab-text);
    font-family:   var(--omw-font);
    transition:    background 0.15s, color 0.15s, opacity 0.15s;
    display:       flex;
    align-items:   center;
    justify-content: center;
    outline:       none;
    border-radius: var(--omw-radius-tab) var(--omw-radius-tab) 0 0;
}
.omw-tabs-arrow:hover:not(:disabled) { background: var(--omw-accent); color: #fff; }
.omw-arrow-icon { display: block; }

/* Tab buttons */

.omw-tab {
    padding:       8px 18px;
    border:        none;
    border-radius: var(--omw-radius-tab) var(--omw-radius-tab) 0 0;
    background:    var(--omw-tab-bg);
    color:         var(--omw-tab-text);
    font-size:     14px;
    font-weight:   600;
    font-family:   var(--omw-font);
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s;
    white-space:   nowrap;
    flex-shrink:   0;
    outline:       none;
}
.omw-tab:hover    { background: var(--omw-accent); color: #fff; }
.omw-tab-active   { background: var(--omw-tab-active); color: var(--omw-tab-active-text); }
.omw-tab:focus-visible { outline: 2px solid var(--omw-accent); outline-offset: 2px; }

/* Category panel */

.omw-category {
    margin-bottom:     32px;
    scroll-margin-top: 16px; /* offset for sticky headers — override in your stylesheet if needed */
}
.omw-category-name {
    font-size:      18px;
    font-weight:    700;
    margin:         0 0 16px;
    padding-bottom: 10px;
    border-bottom:  2px solid var(--omw-border);
    color:          var(--omw-text);
}

/* Item grid — auto-fills columns based on available space */

.omw-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* Item card — vertical layout, image on top */

.omw-item {
    display:        flex;
    flex-direction: column;
    border:         1px solid var(--omw-border);
    border-radius:  var(--omw-radius);
    background:     var(--omw-bg);
    box-shadow:     var(--omw-item-shadow);
    overflow:       hidden;
    transition:     box-shadow 0.18s, transform 0.18s;
}
.omw-item:hover {
    box-shadow: var(--omw-item-shadow-hover);
    transform:  translateY(-2px);
}
.omw-item-img {
    width:       100%;
    height:      170px;
    object-fit:  cover;
    display:     block;
    background:  var(--omw-bg-alt);
    flex-shrink: 0;
}
.omw-item-body {
    flex:           1;
    display:        flex;
    flex-direction: column;
    padding:        14px;
}
.omw-item-name  { font-weight: 700; font-size: 15px; margin-bottom: 4px; line-height: 1.35; }
.omw-item-desc  {
    font-size:   13px;
    color:       var(--omw-text-muted);
    line-height: 1.5;
    margin-bottom: 6px;
    flex:        1;
    overflow:    hidden;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.omw-item-price {
    font-weight: 700;
    font-size:   16px;
    color:       var(--omw-accent);
    margin-top:  auto;
    padding-top: 10px;
}

/* List view — horizontal row layout via omw-list-view class on container */

[data-om-widget].omw-list-view .omw-items {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}
[data-om-widget].omw-list-view .omw-item {
    flex-direction: row;
    align-items:    flex-start;
    gap:            14px;
    overflow:       visible;
}
[data-om-widget].omw-list-view .omw-item-img {
    width:         90px;
    height:        90px;
    border-radius: calc(var(--omw-radius) - 2px);
    flex-shrink:   0;
}
[data-om-widget].omw-list-view .omw-item-body {
    padding:    6px 0;
    flex:       1;
    min-width:  0;
}
[data-om-widget].omw-list-view .omw-item-price {
    margin-top:  6px;
    padding-top: 0;
}
[data-om-widget].omw-list-view .omw-item-desc {
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Stacked hours — centered, large day names as headings */

.omw-hours-stacked {
    text-align: center;
    padding:    4px 0;
}
.omw-hours-stacked .omw-hours-day-group {
    margin-bottom: 24px;
}
.omw-hours-stacked .omw-hours-day-group:last-child { margin-bottom: 0; }
.omw-hours-stacked .omw-hours-day-name {
    font-size:      22px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--omw-accent);
    margin-bottom:  6px;
}
.omw-hours-stacked .omw-hours-day-times {
    color:       var(--omw-text-muted);
    font-size:   14px;
    line-height: 1.8;
}
.omw-hours-stacked .omw-time-slot {
    display:      block;
    margin-right: 0;
}

/* Compact hours — icon + label header, left-aligned day/time list */

.omw-hours-compact { font-size: 14px; }
.omw-hours-compact-header {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 14px;
}
.omw-clock-icon { color: var(--omw-accent); flex-shrink: 0; }
.omw-hours-compact-label {
    font-size:      13px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--omw-text);
}
.omw-hours-compact .omw-hours-day-group {
    padding-left:  28px;
    margin-bottom: 12px;
}
.omw-hours-compact .omw-hours-day-group:last-child { margin-bottom: 0; }
.omw-hours-compact .omw-hours-day-name {
    font-weight:   600;
    color:         var(--omw-text);
    margin-bottom: 2px;
    font-size:     14px;
}
.omw-hours-compact .omw-hours-day-times {
    color:       var(--omw-text-muted);
    font-size:   13px;
    line-height: 1.7;
}
.omw-hours-compact .omw-time-slot {
    display:      block;
    margin-right: 0;
}

/* Dietary badges */

.omw-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.omw-badge  { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: 0.02em; }
.omw-veg    { background: #e8f5e9; color: #2e7d32; }
.omw-vegan  { background: #f3e5f5; color: #7b1fa2; }
.omw-gf     { background: #fff3e0; color: #e65100; }
.omw-spicy  { background: #fce4ec; color: #b71c1c; }

/* THEME: LIGHT — Clean white cards on soft grey */

.omw-theme-light {
    --omw-bg:     #fff;
    --omw-bg-alt: #efefef;
    --omw-border: #e8e8e8;
    --omw-text:   #1a1a1a;
    --omw-tab-bg: #ebebeb;
    background:    #f5f5f5;
    padding:       28px;
    border-radius: var(--omw-radius);
}
.omw-theme-light .omw-section-title,
.omw-theme-light .omw-category-name { color: var(--omw-accent); }
.omw-theme-light .omw-hours-table tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
.omw-theme-light .omw-hours-table tr:hover td { background: rgba(232,93,38,0.04); }

/* THEME: DARK — Dark background with gold accent */

.omw-theme-dark {
    --omw-accent:            #f0a500;
    --omw-accent2:           #d4920a;
    --omw-text:              #f0f0f0;
    --omw-text-muted:        #aaa;
    --omw-bg:                #2a2a2a;
    --omw-bg-alt:            #333;
    --omw-border:            #404040;
    --omw-tab-bg:            #333;
    --omw-tab-text:          #ccc;
    --omw-item-shadow:       0 2px 8px rgba(0,0,0,0.4);
    --omw-item-shadow-hover: 0 8px 28px rgba(0,0,0,0.6);
    background:    #1e1e1e;
    padding:       28px;
    border-radius: var(--omw-radius);
}
.omw-theme-dark .omw-section-title,
.omw-theme-dark .omw-category-name { color: var(--omw-accent); border-color: #404040; }
.omw-theme-dark .omw-item-price    { color: var(--omw-accent); }
.omw-theme-dark .omw-hours-table tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
.omw-theme-dark .omw-hours-table tr:hover td { background: rgba(240,165,0,0.06); }

/* THEME: MINIMAL — No boxes, dividers only, fits any design */

.omw-theme-minimal {
    --omw-border:            #e0e0e0;
    --omw-tab-bg:            transparent;
    --omw-tab-text:          var(--omw-text-muted);
    --omw-item-shadow:       none;
    --omw-item-shadow-hover: none;
}
.omw-theme-minimal .omw-items {
    display:        flex;
    flex-direction: column;
    gap:            0;
}
.omw-theme-minimal .omw-item {
    display:        flex;
    flex-direction: row;
    align-items:    flex-start;
    gap:            14px;
    border:         none;
    border-bottom:  1px solid var(--omw-border);
    border-radius:  0;
    padding:        16px 0;
    background:     transparent;
    box-shadow:     none;
    overflow:       visible;
    transform:      none !important;
}
.omw-theme-minimal .omw-item-img {
    width:         80px;
    height:        80px;
    border-radius: calc(var(--omw-radius) - 2px);
    flex-shrink:   0;
}
.omw-theme-minimal .omw-item-body  { padding: 0; }
.omw-theme-minimal .omw-item-price { margin-top: 6px; padding-top: 0; }
.omw-theme-minimal .omw-item-desc  {
    display:             block;
    -webkit-line-clamp:  unset;
    overflow:            visible;
}
.omw-theme-minimal .omw-category-name {
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--omw-accent);
    border-bottom:  1px solid var(--omw-border);
    padding-bottom: 10px;
    margin-bottom:  0;
}
.omw-theme-minimal .omw-tabs-wrap { border-bottom: 1px solid var(--omw-border); }
.omw-theme-minimal .omw-tab {
    border-radius:  0;
    background:     none;
    border-bottom:  3px solid transparent;
    padding-bottom: 10px;
}
.omw-theme-minimal .omw-tab:hover,
.omw-theme-minimal .omw-tab-active {
    background:          none;
    color:               var(--omw-accent);
    border-bottom-color: var(--omw-accent);
}
.omw-theme-minimal .omw-tabs-arrow { background: transparent; }
.omw-theme-minimal .omw-tabs-arrow:hover:not(:disabled) { background: transparent; color: var(--omw-accent); }
.omw-theme-minimal .omw-hours-table tr:hover td { background: rgba(0,0,0,0.02); }

/* THEME: FRESH — Green tones for healthy eateries */

.omw-theme-fresh {
    --omw-accent:   #2e7d32;
    --omw-accent2:  #1b5e20;
    --omw-bg:       #fff;
    --omw-bg-alt:   #e8f5e9;
    --omw-border:   #c8e6c9;
    --omw-tab-bg:   #e8f5e9;
    --omw-tab-text: #2e7d32;
    background:     #f1f8f2;
    padding:        28px;
    border-radius:  var(--omw-radius);
}
.omw-theme-fresh .omw-section-title,
.omw-theme-fresh .omw-category-name { color: var(--omw-accent); border-color: var(--omw-border); }
.omw-theme-fresh .omw-item-price    { color: var(--omw-accent); }
.omw-theme-fresh .omw-hours-table tr:nth-child(even) td { background: rgba(46,125,50,0.03); }
.omw-theme-fresh .omw-hours-table tr:hover td { background: rgba(46,125,50,0.06); }

/* THEME: BOLD — Strong colour headers for fast food */

.omw-theme-bold {
    --omw-accent:          #c0392b;
    --omw-accent2:         #96281b;
    --omw-bg:              #fff;
    --omw-border:          #eee;
    --omw-tab-bg:          #c0392b;
    --omw-tab-text:        rgba(255,255,255,0.8);
    --omw-tab-active-text: #fff;
    background: #fff;
    padding:    24px;
}
.omw-theme-bold .omw-category-name {
    background:     var(--omw-accent);
    color:          #fff;
    padding:        12px 16px;
    border-radius:  var(--omw-radius);
    border:         none;
    margin-bottom:  16px;
    letter-spacing: 0.02em;
}
.omw-theme-bold .omw-section-title { color: var(--omw-accent); }
.omw-theme-bold .omw-tabs-wrap     { border-bottom: 3px solid var(--omw-accent); }
.omw-theme-bold .omw-tab {
    background:    var(--omw-accent);
    color:         rgba(255,255,255,0.75);
    border-radius: var(--omw-radius-tab) var(--omw-radius-tab) 0 0;
}
.omw-theme-bold .omw-tab-active,
.omw-theme-bold .omw-tab:hover     { background: var(--omw-accent2); color: #fff; }
.omw-theme-bold .omw-tabs-arrow    { background: var(--omw-accent); color: rgba(255,255,255,0.75); }
.omw-theme-bold .omw-tabs-arrow:hover:not(:disabled) { background: var(--omw-accent2); color: #fff; }
.omw-theme-bold .omw-item-price    { color: var(--omw-accent); }
.omw-theme-bold .omw-hours-table tr:hover td { background: rgba(192,57,43,0.04); }

/* Responsive: tablet */

@media (max-width: 640px) {
    .omw-theme-light,
    .omw-theme-dark,
    .omw-theme-fresh,
    .omw-theme-bold { padding: 16px; }

    .omw-items   { gap: 12px; }
    .omw-item-img { height: 150px; }
}

/* Responsive: mobile — single column below ~430px, handled automatically by grid minmax.
   Below 480px we also reduce image height and font sizes. */

@media (max-width: 480px) {
    .omw-section-title { font-size: 17px; }
    .omw-category-name { font-size: 15px; }

    .omw-item-img   { height: 180px; }
    .omw-item-name  { font-size: 14px; }
    .omw-item-desc  { font-size: 12px; }
    .omw-item-price { font-size: 15px; }

    .omw-tab  { font-size: 13px; padding: 7px 12px; }

    .omw-hours-table        { font-size: 13px; }
    .omw-day                { min-width: 100px; }
    .omw-time-slot          { display: block; margin-right: 0; margin-bottom: 2px; }
    .omw-time-slot:last-child { margin-bottom: 0; }

    .omw-theme-minimal .omw-item-img { width: 64px; height: 64px; }
}

/* Responsive: small mobile */

@media (max-width: 360px) {
    .omw-item-name  { font-size: 13px; }
    .omw-item-price { font-size: 14px; }
    .omw-tab        { font-size: 12px; padding: 6px 10px; }

    .omw-theme-minimal .omw-item-img { width: 52px; height: 52px; }
}