/* Booking buttons.
   Style A "La vela": navy pill, a small CSS candle, two-line label, gold arrow. Inverted on dark grounds.
   Style C "Menú partido": every price row of the menu is a split pill (blue RESERVAR | ivory option + price).
   Hover motion is transform only. */

.btn-vela{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:9px 22px 9px 20px;border-radius:999px;
  background:#10233F;color:#F5EFE4;text-decoration:none;box-shadow:0 14px 30px rgba(16,35,63,.28);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);white-space:nowrap}
.btn-vela:hover,.btn-vela:focus-visible{color:#F5EFE4;transform:translateY(-2px)}
.btn-vela:focus-visible{outline:2px solid #D4A15F;outline-offset:3px}
.vela-flame{flex:none;width:9px;height:16px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:linear-gradient(#F3D49A,#D4A15F 55%,#C98A2E);transform-origin:50% 100%}
.vela-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.vela-main{font-family:'Playfair Display','Noto Serif Thai',serif;font-weight:600;font-size:19px;letter-spacing:0}
.vela-sub{margin-top:5px;font-family:Montserrat,'Noto Sans Thai',sans-serif;font-weight:600;font-size:10px;letter-spacing:.2em;color:#D4A15F}
.vela-arrow{margin-left:6px;color:#D4A15F;font-size:18px;line-height:1;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn-vela:hover .vela-arrow,.btn-vela:focus-visible .vela-arrow{transform:translateX(5px)}

/* Inverted, for the dark lighting act and the navy Visita section. */
.btn-vela--light{background:#F5EFE4;color:#10233F;box-shadow:0 14px 30px rgba(0,0,0,.3)}
.btn-vela--light:hover,.btn-vela--light:focus-visible{color:#10233F}
.btn-vela--light .vela-sub,.btn-vela--light .vela-arrow{color:#8A5A1E}

/* Compact nav version: one line, no subline. */
.btn-vela-nav{min-height:46px;padding:0 20px 0 18px;gap:10px;box-shadow:none}
.btn-vela-nav .vela-main{font-size:16px}

.lt-cta{margin-top:clamp(14px,2.6svh,28px)}
.visit-cta{margin-top:clamp(20px,4svh,40px)}

@media (prefers-reduced-motion:no-preference){
  .vela-flame{animation:vela-flick 2.6s ease-in-out infinite}
}
@keyframes vela-flick{
  0%,100%{transform:scale(1,1) skewX(0)}
  25%{transform:scale(.92,1.08) skewX(-3deg)}
  50%{transform:scale(1.04,.96) skewX(2deg)}
  75%{transform:scale(.96,1.05) skewX(-1.5deg)}
}

/* ---------- Style C: split menu rows ---------- */
.prices li{display:block}
.mrow{display:flex;align-items:stretch;min-height:32px;margin-top:6px;border-radius:999px;text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.mrow:hover,.mrow:focus-visible{transform:translateX(3px)}
.mrow:focus-visible{outline:2px solid #D4A15F;outline-offset:2px}
.mrow-cta{display:flex;align-items:center;padding:0 12px 0 14px;border-radius:999px 0 0 999px;background:#1E5AA8;color:#fff;
  font-family:Montserrat,'Noto Sans Thai',sans-serif;font-weight:600;font-size:11px;letter-spacing:.18em;line-height:1}
.mrow:hover .mrow-cta{background:#2A6CC4}
.mrow-opt{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px 0 12px;
  background:#F5EFE4;border:2px solid #1E5AA8;border-left:0;border-radius:0 999px 999px 0}
.mrow-min{font-family:'Playfair Display',serif;font-size:15px;color:#10233F;line-height:1}
.prices .mrow-opt b{font-family:'Playfair Display',serif;font-weight:500;font-size:17px;line-height:1;color:#C2643F}
.dish .prices{margin-top:8px}

@media (min-width:901px){
  .mrow{min-height:clamp(26px,3.6svh,32px);margin-top:clamp(3px,.7svh,6px)}
  .mrow-cta{font-size:10px;letter-spacing:.16em;padding:0 10px 0 12px}
  .mrow-min{font-size:clamp(13px,1.8svh,15px)}
  .prices .mrow-opt b{font-size:clamp(15px,2svh,17px)}
}
@media (max-width:600px){
  .mrow{min-height:44px;margin-top:8px}
  .mrow-cta{font-size:12px}
  .mrow-min{font-size:17px}
  .prices .mrow-opt b{font-size:19px}
  .cta-row .btn-vela{flex:1 1 100%;justify-content:center}
  .lt-cta,.visit-cta{justify-content:center}
  .btn-vela-nav{padding:0 16px 0 14px;min-height:44px}
}

/* Thai: no tracking on labels, Thai faces are already in the stacks. */
html[lang="th"] .vela-sub,html[lang="th"] .mrow-cta{letter-spacing:0;font-size:12px}
html[lang="th"] .vela-main{font-size:18px}
/* Narrow laptops / landscape tablets: the two menu columns are tight, so the split pill compacts. */
@media (min-width:901px) and (max-width:1180px){
  .mrow-cta{font-size:9px;letter-spacing:.1em;padding:0 8px 0 10px}
  .mrow-opt{padding:0 10px 0 8px;gap:6px}
  .mrow-min{font-size:13px}
  .prices .mrow-opt b{font-size:15px}
  html[lang="th"] .mrow-cta{font-size:11px}
}