/* Base styles for Restaurant Menu Widget */
.menu-widget { width: 100%; padding: 20px; }
.rmw-item { margin-bottom: 15px; padding-bottom: 15px; }

.rmw-header { display:flex; align-items:center; gap:10px; }
.rmw-title { margin:0; }
.rmw-price { margin:0; }
.rmw-separator { flex:1 1 auto; border-bottom-style:dotted; border-bottom-width:1px; border-bottom-color:currentColor; height:0; }

.rmw-description { margin-top:0; font-size:14px; color:#666; }
.rmw-allergens { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:0; }
.rmw-allergens .rmw-allergen { width:20px; height:20px; object-fit:contain; display:inline-block; }


/* ===== Flex baseline fix: title can wrap, separator always visible ===== */
.rmw-header{
  display:flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: nowrap;
}
.rmw-title{
  margin:0;
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.rmw-separator{
  flex: 1 1 0;
  height: 0;
  border-bottom-color: currentColor;
  align-self: baseline;
}
.rmw-price{
  margin:0;
  flex: 0 0 auto;
  white-space: nowrap;
}


.rmw-title{
  grid-column: 1;
  margin: 0;
  min-width: 0;
  line-height: 1.3;
}
.rmw-separator{
  grid-column: 2;
  align-self: end;
  height: 0;
  border-bottom-color: currentColor;
  transform: translateY(0.08em); /* small optical adjustment */
}
.rmw-price{
  grid-column: 3;
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}



.rmw-header{
  display: grid !important;
  grid-template-columns: minmax(0, auto) 1fr auto; /* title | separator | price */
  align-items: center;           /* vertical center for all */
  column-gap: .5rem;
}
.rmw-title{
  grid-column: 1;
  margin: 0;
  min-width: 0;                  /* allow wrapping */
  line-height: 1.3;
}
.rmw-separator{
  grid-column: 2;
  align-self: center;            /* center the dotted leader vertically */
  height: 0;                     /* render via border-bottom */
  border-bottom-color: currentColor;
}
.rmw-price{
  grid-column: 3;
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}


/* ===== Grid solution v3: min width for separator + robust paint ===== */
.rmw-header{
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(24px, 1fr) auto; /* title | separator (>=24px) | price */
  align-items: center;
  column-gap: .5rem;
}
.rmw-title{
  grid-column: 1;
  margin: 0;
  min-width: 0;
  line-height: 1.3;
}
.rmw-separator{
  grid-column: 2;
  align-self: center;
  min-width: 24px;               /* never collapse completely */
  height: 1px;                   /* avoid 0px border rendering issues */
  border-bottom-style: var(--rmw-sep-style, inherit);    /* Elementor still sets style/width/color via selectors */
  border-bottom-width: var(--rmw-sep-width, 1px);
  border-bottom-color: currentColor;
}
.rmw-price{
  grid-column: 3;
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}


/* ===== Separator spacing tweak: ensure visual gap before price ===== */
.rmw-header{ column-gap: .75rem; }
.rmw-separator{ margin-right: .25rem; }
.rmw-price{ padding-left: .25rem; } /* keeps price detached even if theme overrides gaps */

/* ===== Dish Image (widget style controls target these selectors) ===== */
.rmw-image{
  margin: 0 0 10px 0;
  line-height: 0;
}
.rmw-image img{
  display: inline-block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0;
}

/* ===== Menu image layout ===== */
.rmw-row{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rmw-media img{
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.rmw-img-pos-top .rmw-row{
  flex-direction: column;
}
.rmw-img-pos-left .rmw-row{
  flex-direction: row;
  align-items: flex-start;
}
.rmw-content{ min-width: 0; }

/* Ensure full width for item content and row */
.rmw-item{ width:100%; display:block; }
.rmw-row{ width:100%; }
.rmw-content{ flex: 1 1 0; width:100%; min-width:0; }

/* ===== Badges next to title ===== */
.rmw-title-wrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rmw-badges{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rmw-badges img{
  display: inline-block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}


/* BADGE GAP FALLBACK */
.rmw-badges{
  gap: var(--badge-gap, 6px);
}
.rmw-badges .rmw-badge + .rmw-badge{
  margin-left: var(--badge-gap, 6px);
}

/* ===== Responsive dish image position via CSS variable ===== */
.rmw-row{
  flex-direction: var(--img-dir, column);
}