/* ==========================================================================
   Drink Details page (extracted from Pages/DrinkDetails.cshtml)
   ========================================================================== */

/* Modern responsive card layout */
.drink-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Side padding matches .app-bottom-nav's 8px so the card uses as much width as the rest of the
     app's edge-to-edge chrome, instead of a wider inset that just wastes space on small screens. */
  padding: 0 8px 2rem;
}

.drink-page .page-header {
  width: 100%;
  max-width: 1200px;
}

/* Keep the "Brand - Name" title on one line, full text, no "…" — a small inline script
   (see DrinkDetails.cshtml) shrinks the font-size just enough to fit instead. overflow:hidden
   stays only as a no-JS fallback so an unshrunk long title clips instead of wrapping. */
.drink-page .page-header__title {
  white-space: nowrap;
  overflow: hidden;
}



.drink-card {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  background: linear-gradient(180deg, var(--color-neutral-0) 0%, var(--color-primary-50) 100%);
  border-radius: 14px;
  box-shadow: 0 10px 30px var(--color-shadow-sm);
  overflow: hidden;
  border: 1px solid var(--color-shadow-primary);
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  padding: 20px;
  align-items: start;
  color: var(--color-primary-900, #0a4150);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}

/* Left column (images + nutrition) */
.drink-media-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.drink-main-image {
  width:100%;
  aspect-ratio: 1 / 1;
  background: var(--color-primary-50);
  border-radius: 10px;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--color-shadow-sm);
}
.drink-main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

/* Highlight when drink was added by a user */
.drink-main-image--user-added {
  border-radius: 12px;
  border: 3px solid var(--color-category-user-added);
  background: linear-gradient(180deg, var(--color-category-user-added-bg), rgba(255,255,255,0.0));
  box-shadow: 0 10px 28px var(--color-category-user-added-shadow);
  transform: scale(1.02);
}

.drink-main-image__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--color-primary-600);
  color: var(--color-neutral-0);
  padding: 8px 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  z-index: 10;
}
.drink-main-image__badge i { font-size: 1.15rem; }
.drink-main-image__badge-text { font-size: 0.95rem; }

/* Centered badge variant */
.drink-main-image__badge--centered {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 1.05rem;
  background: var(--color-primary-600);
}

/* Carousel container � fixed-height so every image lives in the same box */
.drink-carousel {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-primary-50);
  border: 1px solid var(--color-shadow-sm);
}
.drink-carousel .carousel-inner {
  height: 320px;
  background: var(--color-primary-50);
}
.drink-carousel .carousel-item {
  height: 100%;
}
.drink-carousel .carousel-item .drink-img-slot {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}
.drink-carousel .carousel-item .drink-img-slot > img:not([alt="DrinkInTheWeeds"]) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Logo inside the no-photo slot � sized to fill the large carousel slot */
.drink-carousel .carousel-item > .drink-img-slot > img[alt="DrinkInTheWeeds"] {
  width: auto;
  height: auto;
  max-height: 160px;
  object-fit: contain;
}
/* Diagonal text scaled up for the large slot */
.drink-carousel .carousel-item > .drink-img-slot > p {
  font-size: 1.4rem;
}

/* Scrollable thumbnail strip */
.drink-carousel-thumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-overlay-dark-light) transparent;
}
.drink-carousel-thumbs::-webkit-scrollbar { height: 4px; }
.drink-carousel-thumbs::-webkit-scrollbar-thumb {
  background: var(--color-overlay-dark-light);
  border-radius: 4px;
}
.drink-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--color-primary-50);
  padding: 0;
  transition: border-color 0.15s;
}
.drink-thumb.active,
.drink-thumb:hover {
  border-color: var(--color-primary-500, #1a96b0);
  outline: none;
}
.drink-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* Right column (content) */
.drink-content {
  display:flex;
  flex-direction: column;
  gap:12px;
}
.drink-brand {
  margin:0;
  font-size:1.6rem;
  font-weight:800;
  color:var(--color-primary-900, #0a4150);
}
.drink-title {
  margin:0;
  font-size:1.6rem;
  font-weight:800;
  color:var(--color-primary-900, #0a4150);
  display:flex;
  gap:12px;
  align-items:center;
}
.drink-sub {
  color:var(--color-primary-700, #157d94);
  font-size:0.95rem;
  display:flex;
  gap:8px;
  align-items:center;
}

/* Header row: title block + actions toolbar */
.drink-header-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
}

/* Actions */
.drink-actions {
  display:flex;
  gap:6px 8px; /* tighter row-gap than column-gap — these buttons wrap to their own rows on mobile */
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-shadow-primary);
  padding: 8px 12px;
  border-radius:8px;
  color:var(--color-primary-900, #0a4150);
  font-weight:600;
}

/* Tag stack */
.tag-stack-column { display:flex; flex-direction:column; gap:8px; align-items:flex-start; min-width: 120px; max-width:100%; }

/* compact badge sizing (add into existing <style> block) */
:root {
  --badge-height: 28px;        /* controls visual height */
  --badge-font-size: 0.78rem; /* controls text size */
  --badge-padding-x: 8px;     /* horizontal padding */
  --badge-min-width: 56px;    /* minimum width to keep pill shape */
}

/* apply consistent sizing while preserving inline width */
.tag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: left;
  height: var(--badge-height);
  line-height: 1;
  font-size: var(--badge-font-size);
  padding: 0 var(--badge-padding-x); /* vertical padding is driven by height */
  min-width: var(--badge-min-width);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 999px;
  box-shadow: 0 6px 14px var(--color-shadow-primary);
  box-sizing: border-box; /* ensure padding doesn't inflate height */
  max-width: 100%;
}

/* even smaller variant when needed */
.tag-badge.compact {
  --badge-height: 22px;
  --badge-font-size: 0.72rem;
  --badge-padding-x: 6px;
  --badge-min-width: 44px;
}

/* Details grid */
.drink-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
  margin-top: 6px;
  color:var(--color-primary-800, #116578);
  font-size:0.95rem;
}
.drink-details > div {
  word-break: break-word;
}
.drink-section-title {
  grid-column: 1/-1;
  margin-top: 12px;
  margin-bottom: 6px;
  color:var(--color-primary-600, #1a96b0);
  font-weight:800;
  font-size:1rem;
}

/* Responsive — mirrors the desktop image-left/details-right split all the way down to phone
   widths (per design direction), shrinking the image column instead of stacking it above the
   content like most other pages do. The media column stretches to match the (now much shorter,
   since the title text lives in the page header, not repeated here) content column, so the image
   gets as much vertical room as the row allows, with the thumbnail strip trailing at its bottom. */
@media (max-width: 980px) {
  .drink-card { grid-template-columns: 160px 1fr; padding:10px; gap:10px; align-items: stretch; }
  .drink-media-column { height: 100%; }
  .drink-carousel { display: flex; flex-direction: column; flex: 1 1 auto; }
  .drink-carousel .carousel-inner { flex: 1 1 auto; height: auto; min-height: 220px; }
  .drink-header-row { gap: 6px; }
}

@media (max-width: 640px) {
  /* Same 8px side spacing as .app-bottom-nav — the card itself now provides all the inset, since
     .drink-page's own side padding is 8px too. */
  .drink-card { grid-template-columns: 130px 1fr; padding:8px; gap:8px; align-items: stretch; }
  .drink-carousel .carousel-inner { min-height: 190px; }
  .drink-header-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .drink-actions { width: 100%; gap: 4px 6px; }
  .drink-actions .btn-ghost { padding: 6px 10px; }
}

/* "..." overflow dropdown next to the list-toggle buttons */
.drink-actions__more { padding-left: 0.5rem; padding-right: 0.5rem; }
.drink-actions__menu { min-width: 180px; border-radius: 0.75rem; }

/* "Marked Tried — want to review it?" prompt */
.tried-prompt-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
}

.tried-prompt-modal__panel {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 380px;
    padding: var(--spacing-5);
}

.tried-prompt-modal__header {
    font-weight: var(--font-weight-semibold);
    font-size: 1.05rem;
    margin-bottom: var(--spacing-4);
}

.tried-prompt-modal__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.tried-prompt-modal__note {
    margin-top: var(--spacing-3);
}