/* ═══════════════════════════════════════════════════════════════════════════
   RECIPE BOOK SCREEN — image-map over RecipeBlankRightSide.webp
   Same left-nav pattern as home/leaderboard: ButtonsLeft (11.85% left),
   image anchored to right edge (88.15%).

   Canvas: 932.2 × 431.6 (iPhone landscape reference)
   Image:  1754 × 897  →  x: 11.85% + (img_x/1754)×88.15%
                           y: (img_y/897)×100%

   Debug: document.getElementById('screen-recipes').classList.add('rb-debug')
═══════════════════════════════════════════════════════════════════════════ */

#screen-recipes {
  background: url("../assets/Recipes/RecipeBlankRightSide.webp") right top / 88.15% 100% no-repeat;
  overflow: hidden;
  filter: brightness(1.2);
}

/* ── Scrollable content panels ────────────────────────────────────────────── */

/*  Drink list (left column of image)
    img: x≈5-295, y≈95-820  →  1754×897
    left  = 11.85% + (5/1754)×88.15%   = 12.1%
    top   = 95/897                      = 10.6%
    width = (290/1754)×88.15%          = 14.6%
    height= (725/897)                   = 80.8%                              */
.rb-drink-list {
  position: absolute;
  left:   12.1%;
  top:    10.6%;
  width:  14.6%;
  height: 80.8%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

/*  Drink details / name panel (center-left, below filter tabs)
    img: x≈295-910, y≈155-395
    left  = 11.85% + (295/1754)×88.15% = 26.7%
    top   = 155/897                     = 17.3%
    width = (615/1754)×88.15%          = 30.9%
    height= (240/897)                   = 26.8%                              */
.rb-drink-detail {
  position: absolute;
  left:   26.7%;
  top:    17.3%;
  width:  30.9%;
  height: 26.8%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

/*  Ingredients area
    img: x≈295-910, y≈400-600
    left  = 26.7%
    top   = 400/897 = 44.6%
    height= 200/897 = 22.3%                                                  */
.rb-ingredients {
  position: absolute;
  left:   26.7%;
  top:    44.6%;
  width:  30.9%;
  height: 22.3%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

/*  Notes area
    img: x≈295-910, y≈605-760
    top   = 605/897 = 67.4%
    height= 155/897 = 17.3%                                                  */
.rb-method {
  position: absolute;
  left:   26.7%;
  top:    67.4%;
  width:  30.9%;
  height: 17.3%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

/* ── Font zones ───────────────────────────────────────────────────────────── */
/*
   Zone A — Drink list items:      Cinzel
   Zone B — Drink detail/name:     Playfair Display
   Zone C — Ingredients & Method:  Cormorant Garamond
   Zone D — Filter tabs:           Cinzel
   Zone E — Form labels/dropdowns: Raleway
*/

.rb-drink-list,
.rb-drink-detail,
.rb-ingredients,
.rb-method {
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  padding: 4px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,0.4) transparent;
}

.rb-drink-list    { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.03em; }
.rb-drink-detail  { font-family: 'Playfair Display', serif; font-size: 11px; }
.rb-ingredients,
.rb-method        { font-family: 'Cormorant Garamond', serif; font-size: 13px; font-weight: 400; }

/* ── Drink list items ─────────────────────────────────────────────────────── */

.rb-drink-item {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
.rb-drink-item:hover  { background: rgba(255,255,255,0.06); }
.rb-drink-item.active { background: rgba(212,175,55,0.15); color: #D4AF37; font-weight: 700; }

/* ── Dropdowns ────────────────────────────────────────────────────────────── */

.rb-dropdown {
  position: absolute;
  /* center column, same left as drink-detail */
  left:   36.7%;    /* shifted right of label icons */
  width:  19.0%;
  background: rgba(30,20,10,0.85);
  border: 1px solid rgba(212,175,55,0.30);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  z-index: 3;
  -webkit-appearance: none;
  appearance: none;
}

/*  Category dropdown: img y≈163-200
    top = 163/897 = 18.2%   height = 37/897 = 4.1%                          */
#rb-category-dropdown { top: 18.2%; height: 4.1%; }

/*  Glassware dropdown: img y≈208-245
    top = 208/897 = 23.2%                                                    */
#rb-glassware-dropdown { top: 23.2%; height: 4.1%; }

/* ── WG checkboxes ────────────────────────────────────────────────────────── */

/*  Right column "NO ACCESS / WG1 / WG2 / WG3" section
    img: x≈1355-1395 (checkbox left edge)
    left = 11.85% + (1355/1754)×88.15% = 79.9%                              */
.rb-wg-check {
  position: absolute;
  left:   79.9%;
  width:   1.5%;
  z-index: 3;
  cursor: pointer;
  accent-color: #D4AF37;
}
/*  img y coords: WG1≈575, WG2≈615, WG3≈655
    top = y/897                                                               */
#rb-wg1 { top: 64.1%; height: 2.5%; }
#rb-wg2 { top: 68.6%; height: 2.5%; }
#rb-wg3 { top: 73.1%; height: 2.5%; }

/* ── Hit zones ────────────────────────────────────────────────────────────── */

.rb-hit {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0; margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 4px;
  z-index: 4;
  transition: transform 0.07s ease, background 0.1s ease;
  transform-origin: center center;
  font-size: 0;
  color: transparent;
}
.rb-hit:active { transform: scale(0.95); }

.rb-hit.filter-tab.active {
  box-shadow: inset 0 -2px 0 0 rgba(212,175,55,0.80);
  background: rgba(212,175,55,0.10);
}

#rb-btn-save:active   { filter: brightness(1.3); }
#rb-btn-cancel:active { opacity: 0.75; }
#rb-btn-reset:active  { opacity: 0.75; }

/* Back button
   img: x≈28-88, y≈20-68
   left = 11.85%+(28/1754)×88.15% = 13.3%  top = 20/897 = 2.2%
   w    = (60/1754)×88.15% = 3.0%           h   = 48/897 = 5.3%             */
#rb-btn-back {
  left:  13.3%;
  top:    2.2%;
  width:  3.0%;
  height: 5.3%;
}

/* Filter tabs row  img y≈93-148  top=10.4% height=6.1%
   All Drinks:  x≈295-455  → left=26.7%  w=8.0%
   Classics:    x≈458-618  → left=34.9%  w=8.0%
   Popular:     x≈621-781  → left=43.1%  w=8.0%
   Shots:       x≈784-925  → left=51.2%  w=7.1%
   Tiki:        x≈928-1078 → left=58.3%  w=7.5%
   WG1:         x≈1081-1215→ left=65.9%  w=6.7%
   WG2:         x≈1218-1350→ left=72.7%  w=6.6%
   WG3:         x≈1353-1490→ left=79.4%  w=6.9%
   > more:      x≈1493-1640→ left=86.4%  w=7.4%                             */
.rb-hit.filter-tab[data-filter="all"]     { left:26.7%; top:10.4%; width:8.0%; height:6.1%; }
.rb-hit.filter-tab[data-filter="Classic"] { left:34.9%; top:10.4%; width:8.0%; height:6.1%; }
.rb-hit.filter-tab[data-filter="Popular"] { left:43.1%; top:10.4%; width:8.0%; height:6.1%; }
.rb-hit.filter-tab[data-filter="Shot"]    { left:51.2%; top:10.4%; width:7.1%; height:6.1%; }
.rb-hit.filter-tab[data-filter="Tiki"]    { left:58.3%; top:10.4%; width:7.5%; height:6.1%; }
.rb-hit.filter-tab[data-filter="WG1"]     { left:65.9%; top:10.4%; width:6.7%; height:6.1%; }
.rb-hit.filter-tab[data-filter="WG2"]     { left:72.7%; top:10.4%; width:6.6%; height:6.1%; }
.rb-hit.filter-tab[data-filter="WG3"]     { left:79.4%; top:10.4%; width:6.9%; height:6.1%; }

/* Bottom action buttons  img y≈820-880  top=91.4% height=6.7%
   Reset:       x≈295-540  → left=26.7%  w=12.3%
   Cancel:      x≈550-830  → left=39.5%  w=14.1%
   Save Recipe: x≈840-1730 → left=53.9%  w=44.8%                           */
#rb-btn-reset  { left:26.7%; top:91.4%; width:12.3%; height:6.7%; }
#rb-btn-cancel { left:39.5%; top:91.4%; width:14.1%; height:6.7%; }
#rb-btn-save   { left:53.9%; top:91.4%; width:44.8%; height:6.7%; }

/* ── Debug ────────────────────────────────────────────────────────────────── */
#screen-recipes.rb-debug .rb-hit           { outline: 2px solid rgba(255,200,0,0.8);   background: rgba(255,200,0,0.08); }
#screen-recipes.rb-debug .rb-drink-list    { outline: 2px solid rgba(0,200,255,0.8);   background: rgba(0,200,255,0.05); }
#screen-recipes.rb-debug .rb-drink-detail  { outline: 2px solid rgba(100,255,100,0.8); background: rgba(100,255,100,0.05); }
#screen-recipes.rb-debug .rb-ingredients   { outline: 2px solid rgba(255,100,255,0.8); background: rgba(255,100,255,0.05); }
#screen-recipes.rb-debug .rb-method        { outline: 2px solid rgba(255,150,50,0.8);  background: rgba(255,150,50,0.05); }
#screen-recipes.rb-debug .rb-dropdown      { outline: 2px solid rgba(150,150,255,0.8); }
#screen-recipes.rb-debug .rb-wg-check      { outline: 2px solid rgba(255,255,255,0.8); }