/*
 * Mealie Drop Family Theme v0.2.1
 * Recipe-page refinement for Mealie v3.24.x.
 * Loaded after the base and v0.2 catalog layers.
 */

/* ------------------------------------------------------------
   Recipe page shell
   ------------------------------------------------------------ */
.v-card.flat:has(.recipe-step-title) {
  overflow: visible !important;
  background: rgba(255, 252, 247, .58) !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 70px rgba(74, 48, 22, .10), inset 0 1px rgba(255,255,255,.32) !important;
  backdrop-filter: blur(22px) saturate(128%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(128%) !important;
}

.v-theme--dark .v-card.flat:has(.recipe-step-title) {
  background: rgba(10, 14, 13, .62) !important;
  box-shadow: 0 28px 78px rgba(0,0,0,.38), inset 0 1px rgba(255,158,45,.05) !important;
}

.v-card.flat:has(.recipe-step-title):hover {
  transform: none !important;
  border-color: var(--mdf2-line) !important;
}

/* ------------------------------------------------------------
   Recipe hero: info + image as one composed glass block
   ------------------------------------------------------------ */
.v-card.flat:has(.recipe-step-title)
.d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) {
  overflow: hidden !important;
  margin: 10px 10px 0 !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 22px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: var(--mdf2-shadow-hover) !important;
}

.v-card.flat:has(.recipe-step-title)
.d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) > .v-card.flat {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 181, 73, .16), transparent 18rem),
    linear-gradient(145deg, rgba(255,253,249,.96), rgba(255,247,236,.86)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.v-theme--dark .v-card.flat:has(.recipe-step-title)
.d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) > .v-card.flat {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 147, 25, .13), transparent 18rem),
    linear-gradient(145deg, rgba(17,20,18,.94), rgba(11,14,13,.84)) !important;
}

.v-card.flat:has(.recipe-step-title)
.d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) > .v-img {
  border-radius: 0 !important;
  box-shadow: inset 1px 0 rgba(255,255,255,.12) !important;
}

.v-card.flat:has(.recipe-step-title)
.d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) > .v-img .v-img__img {
  filter: saturate(1.035) contrast(1.015) !important;
}

.v-card.flat:has(.recipe-step-title)
.d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) .text-h5.font-weight-regular {
  opacity: 1 !important;
  color: var(--mdf2-text) !important;
  font-size: clamp(1.45rem, 2vw, 2rem) !important;
  font-weight: 760 !important;
  letter-spacing: -.025em !important;
  line-height: 1.16 !important;
}

.v-card.flat:has(.recipe-step-title)
.d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) .v-card-text {
  padding: clamp(20px, 3vw, 36px) !important;
}

.v-card.flat:has(.recipe-step-title)
.d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) .v-card-text > .markdown,
.v-card.flat:has(.recipe-step-title)
.d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) .v-card-text > p {
  color: var(--mdf2-text-soft) !important;
  line-height: 1.65 !important;
}

.v-card.flat:has(.recipe-step-title)
.d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) .v-rating .v-icon {
  color: var(--mdf2-amber) !important;
}

/* Recipe action buttons under hero: stock Mealie uses info-blue here. */
.v-card.flat:has(.recipe-step-title) .fixed-bar .custom-btn-group .v-btn.bg-info,
.v-card.flat:has(.recipe-step-title) .fixed-bar .custom-btn-group .v-btn.text-info,
.v-card.flat:has(.recipe-step-title) .fixed-bar .custom-btn-group .bg-info {
  color: #2b1706 !important;
  background: linear-gradient(135deg, #ffc15c, var(--mdf2-amber), #ff7b08) !important;
  border: 1px solid rgba(163,77,4,.22) !important;
  box-shadow: 0 8px 22px rgba(240,138,23,.22), inset 0 1px rgba(255,255,255,.48) !important;
}

.v-card.flat:has(.recipe-step-title) .fixed-bar .custom-btn-group .v-btn .v-icon {
  color: #2b1706 !important;
}

/* ------------------------------------------------------------
   Main two-column content
   ------------------------------------------------------------ */
.v-card.flat:has(.recipe-step-title) > .v-card-text {
  padding: 26px 22px 32px !important;
}

.v-card.flat:has(.recipe-step-title) > .v-card-text > .v-row > .border-e-thin {
  border-color: rgba(240,138,23,.18) !important;
}

.v-card.flat:has(.recipe-step-title) h2.text-h5 {
  opacity: 1 !important;
  color: var(--mdf2-text) !important;
  font-weight: 760 !important;
  letter-spacing: -.018em !important;
}

.v-card.flat:has(.recipe-step-title) h2.text-h5::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mdf2-amber), var(--mdf2-amber-2));
  box-shadow: 0 4px 12px rgba(240,138,23,.20);
}

/* ------------------------------------------------------------
   Ingredients
   ------------------------------------------------------------ */
.v-card.flat:has(.recipe-step-title)
> .v-card-text > .v-row > .v-col:first-child .v-list-item {
  min-height: 42px !important;
  margin: 4px 0 !important;
  padding: 2px 8px 2px 2px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease !important;
}

.v-card.flat:has(.recipe-step-title)
> .v-card-text > .v-row > .v-col:first-child .v-list-item:hover {
  transform: translateX(2px) !important;
  background: rgba(240,138,23,.065) !important;
  border-color: rgba(240,138,23,.14) !important;
  box-shadow: none !important;
}

.v-card.flat:has(.recipe-step-title)
> .v-card-text > .v-row > .v-col:first-child .v-list-item-title {
  white-space: normal !important;
  line-height: 1.35 !important;
}

.v-card.flat:has(.recipe-step-title)
> .v-card-text > .v-row > .v-col:first-child .v-checkbox .v-selection-control__input {
  color: var(--mdf2-amber) !important;
}

/* Organizers (categories, tags, tools) */
.v-card.flat:has(.recipe-step-title)
> .v-card-text > .v-row > .v-col:first-child .v-card {
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 16px !important;
  background: var(--mdf2-panel-soft) !important;
  box-shadow: 0 10px 28px rgba(74,48,22,.07) !important;
  transform: none !important;
}

.v-card.flat:has(.recipe-step-title)
> .v-card-text > .v-row > .v-col:first-child .v-card-title {
  color: var(--mdf2-text) !important;
  font-weight: 720 !important;
}

.v-card.flat:has(.recipe-step-title)
> .v-card-text > .v-row > .v-col:first-child .v-chip {
  color: var(--mdf2-amber-deep) !important;
  background: linear-gradient(135deg, rgba(255,184,78,.22), rgba(240,138,23,.12)) !important;
  border: 1px solid rgba(240,138,23,.22) !important;
}

.v-theme--dark .v-card.flat:has(.recipe-step-title)
> .v-card-text > .v-row > .v-col:first-child .v-chip {
  color: #ffd8a2 !important;
}

/* ------------------------------------------------------------
   Instruction steps
   ------------------------------------------------------------ */
.v-card.flat:has(.recipe-step-title) .list-group-item > .v-card {
  overflow: hidden !important;
  margin-block: 10px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-left: 4px solid rgba(240,138,23,.72) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(110deg, rgba(255,184,78,.055), transparent 28%),
    var(--mdf2-panel-strong) !important;
  box-shadow: 0 10px 30px rgba(74,48,22,.075) !important;
  transform: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.v-theme--dark .v-card.flat:has(.recipe-step-title) .list-group-item > .v-card {
  background:
    linear-gradient(110deg, rgba(255,158,45,.07), transparent 28%),
    var(--mdf2-panel-strong) !important;
}

.v-card.flat:has(.recipe-step-title) .list-group-item > .v-card.on-hover {
  transform: translateX(3px) !important;
  border-color: rgba(240,138,23,.32) !important;
  border-left-color: var(--mdf2-amber) !important;
  box-shadow: 0 16px 38px rgba(74,48,22,.105), 0 0 0 1px rgba(240,138,23,.06) !important;
}

.v-card.flat:has(.recipe-step-title) .recipe-step-title {
  color: var(--mdf2-text) !important;
  font-size: 1.03rem !important;
  font-weight: 760 !important;
  letter-spacing: -.01em !important;
  padding-inline: 16px !important;
}

.v-card.flat:has(.recipe-step-title) .recipe-step-title::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--mdf2-amber) !important;
  box-shadow: 0 0 0 5px rgba(240,138,23,.11), 0 0 14px rgba(240,138,23,.20) !important;
}

.v-card.flat:has(.recipe-step-title) .list-group-item > .v-card .v-card-text.markdown {
  padding: 10px 18px 17px !important;
  color: var(--mdf2-text-soft) !important;
  line-height: 1.62 !important;
}

.v-card.flat:has(.recipe-step-title) .list-group-item > .v-card .markdown p:last-child {
  margin-bottom: 0 !important;
}

.v-card.flat:has(.recipe-step-title) .list-group-item > .v-card.disabled-card {
  opacity: .50 !important;
  filter: saturate(.55) !important;
  border-left-color: rgba(112,138,82,.58) !important;
}

/* ------------------------------------------------------------
   Recipe comments
   ------------------------------------------------------------ */
.v-container.px-0 > .px-1.my-4.d-print-none:has(> .v-card-title.headline) {
  margin-top: 22px !important;
  padding: 18px 20px 16px !important;
  border: 1px solid var(--mdf2-line) !important;
  border-radius: 20px !important;
  background: var(--mdf2-panel) !important;
  box-shadow: var(--mdf2-shadow) !important;
  backdrop-filter: blur(20px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
}

.v-container.px-0 > .px-1.my-4.d-print-none:has(> .v-card-title.headline) > .v-card-title {
  padding-left: 0 !important;
  color: var(--mdf2-text) !important;
  font-weight: 760 !important;
}

.v-container.px-0 > .px-1.my-4.d-print-none:has(> .v-card-title.headline) .v-textarea .v-field {
  background: var(--mdf2-panel-strong) !important;
  border-radius: 14px !important;
}

.v-container.px-0 > .px-1.my-4.d-print-none:has(> .v-card-title.headline) .v-card.v-card--variant-outlined {
  border-color: var(--mdf2-line) !important;
  border-radius: 14px !important;
  background: var(--mdf2-panel-strong) !important;
  box-shadow: 0 8px 22px rgba(74,48,22,.06) !important;
  transform: none !important;
}

/* ------------------------------------------------------------
   Responsive recipe page
   ------------------------------------------------------------ */
@media (max-width: 959px) {
  .v-card.flat:has(.recipe-step-title) {
    border-radius: 18px !important;
  }

  .v-card.flat:has(.recipe-step-title)
  .d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) {
    margin: 6px 6px 0 !important;
    border-radius: 17px !important;
  }

  .v-card.flat:has(.recipe-step-title) > .v-card-text {
    padding: 18px 12px 24px !important;
  }

  .v-card.flat:has(.recipe-step-title) .list-group-item > .v-card.on-hover {
    transform: none !important;
  }
}

@media (max-width: 600px) {
  .v-card.flat:has(.recipe-step-title)
  .d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) > .v-card.flat,
  .v-card.flat:has(.recipe-step-title)
  .d-flex.justify-end.flex-wrap.align-stretch:has(> .v-img) > .v-img {
    max-width: 100% !important;
    width: 100% !important;
  }

  .v-card.flat:has(.recipe-step-title) .recipe-step-title::before {
    width: 7px;
    height: 7px;
    margin-right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-card.flat:has(.recipe-step-title) .list-group-item > .v-card,
  .v-card.flat:has(.recipe-step-title)
  > .v-card-text > .v-row > .v-col:first-child .v-list-item {
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   v0.2.2 polish: exact Mealie v3.25 RecipeActionMenu + RecipeChips
   ------------------------------------------------------------ */

/* RecipeActionMenu lives outside the main recipe card, so scope to its unique
   sticky toolbar rather than to the recipe card ancestor. */
.fixed-bar .custom-btn-group .v-btn.bg-info,
.fixed-bar .custom-btn-group .v-btn.text-info,
.fixed-bar .custom-btn-group .bg-info {
  color: #2b1706 !important;
  background: linear-gradient(135deg, #ffc15c 0%, var(--mdf2-amber-2) 28%, var(--mdf2-amber) 68%, #ff7b08 100%) !important;
  border: 1px solid rgba(163,77,4,.22) !important;
  box-shadow: 0 8px 22px rgba(240,138,23,.22), inset 0 1px rgba(255,255,255,.48) !important;
}

.fixed-bar .custom-btn-group .v-btn.bg-info .v-icon,
.fixed-bar .custom-btn-group .v-btn.text-info .v-icon,
.fixed-bar .custom-btn-group .bg-info .v-icon {
  color: #2b1706 !important;
}

/* RecipeChips.vue explicitly uses color="accent" + variant="flat". */
.v-card.flat:has(.recipe-step-title)
> .v-card-text > .v-row > .v-col:first-child .v-chip.bg-accent {
  color: var(--mdf2-amber-deep) !important;
  background: linear-gradient(135deg, rgba(255,184,78,.28), rgba(240,138,23,.16)) !important;
  border: 1px solid rgba(240,138,23,.26) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.32), 0 5px 14px rgba(240,138,23,.06) !important;
}

.v-theme--dark
.v-card.flat:has(.recipe-step-title)
> .v-card-text > .v-row > .v-col:first-child .v-chip.bg-accent {
  color: #ffd8a2 !important;
  background: linear-gradient(135deg, rgba(255,158,45,.22), rgba(240,138,23,.11)) !important;
  border-color: rgba(255,158,45,.28) !important;
}