/* Ovine Modern IT – realistic buttons (v2.0)
   Raised, glossy, tactile buttons with hover, pressed, focus, loading and disabled states.
   Applies to .btn variants, WordPress block buttons, form submit buttons, calendar days and time slots. */

.btn,
.wp-block-button__link,
.wp-element-button,
button[type="submit"]:not(.btn-reset),
input[type="submit"] {
  --btn-top: #3b82f6;
  --btn-bottom: #1d4ed8;
  --btn-fg: #fff;
  --btn-border: #1e40af;
  --btn-glow: rgba(37, 99, 235, .45);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  min-height: 46px;
  font: inherit;
  font-weight: 800;
  font-size: .98rem;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--btn-fg);
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .28);
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bottom) 100%);
  border: 1px solid var(--btn-border);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -2px 0 rgba(0, 0, 0, .18),
    0 1px 1px rgba(0, 0, 0, .25),
    0 10px 22px -8px var(--btn-glow);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
/* glossy highlight */
.btn::before,
.wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 1px 1px 52% 1px;
  border-radius: 13px 13px 40px 40px / 13px 13px 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .04));
  pointer-events: none;
}
.btn > *, .wp-block-button__link > * { position: relative; }

.btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:not(.btn-reset):hover,
input[type="submit"]:hover {
  text-decoration: none;
  color: var(--btn-fg);
  filter: brightness(1.07) saturate(1.05);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 0 rgba(0, 0, 0, .18),
    0 2px 2px rgba(0, 0, 0, .25),
    0 16px 28px -8px var(--btn-glow);
}
.btn:active,
.wp-block-button__link:active,
.wp-element-button:active,
button[type="submit"]:not(.btn-reset):active,
input[type="submit"]:active {
  transform: translateY(1px);
  filter: brightness(.96);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, .35),
    inset 0 -1px 0 rgba(255, 255, 255, .15),
    0 1px 0 rgba(255, 255, 255, .25);
}
.btn:focus-visible,
.wp-block-button__link:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(37, 99, 235, .55);
}

/* ---- Variants ---- */
.btn-primary { --btn-top: #3b82f6; --btn-bottom: #1d4ed8; --btn-border: #1e40af; --btn-glow: rgba(37, 99, 235, .5); }
.btn-cyan    { --btn-top: #22d3ee; --btn-bottom: #0891b2; --btn-border: #0e7490; --btn-glow: rgba(8, 145, 178, .5); }
.btn-success { --btn-top: #34d399; --btn-bottom: #059669; --btn-border: #047857; --btn-glow: rgba(5, 150, 105, .5); }
.btn-danger  { --btn-top: #f87171; --btn-bottom: #dc2626; --btn-border: #b91c1c; --btn-glow: rgba(220, 38, 38, .45); }
.btn-dark    { --btn-top: #334155; --btn-bottom: #0b1220; --btn-border: #020617; --btn-glow: rgba(2, 6, 23, .5); }
.btn-whatsapp{ --btn-top: #4ade80; --btn-bottom: #16a34a; --btn-border: #15803d; --btn-glow: rgba(22, 163, 74, .55); }

.btn-light {
  --btn-top: #ffffff; --btn-bottom: #dbe4f0; --btn-fg: #0b1220; --btn-border: #b7c3d4; --btn-glow: rgba(255, 255, 255, .35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.btn-light::before { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); }
.btn-light:hover { color: #0b1220; }

.btn-outline {
  --btn-fg: #1d4ed8; --btn-border: #93b4f5; --btn-glow: rgba(37, 99, 235, .25);
  background: #fff; text-shadow: none;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15, 23, 42, .12);
}
.btn-outline::before { display: none; }
.btn-outline:hover { background: #eff6ff; color: #1d4ed8; }

/* ---- Sizes ---- */
.btn-sm { padding: 9px 15px; min-height: 38px; font-size: .88rem; border-radius: 12px; }
.btn-lg { padding: 16px 28px; min-height: 54px; font-size: 1.05rem; border-radius: 16px; }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: 0; width: 42px; min-height: 42px; border-radius: 50%; }
.btn-sm.btn-icon { width: 38px; min-height: 38px; font-size: 1.3rem; line-height: 1; }
.btn .ico { width: 20px; height: 20px; flex: none; }

/* ---- Disabled & loading ---- */
.btn:disabled, .btn[aria-disabled="true"], button[type="submit"]:disabled {
  opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.4);
}
.btn.is-loading, button[type="submit"].is-loading { color: transparent; text-shadow: none; pointer-events: none; }
.btn.is-loading::after, button[type="submit"].is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: ov-spin .7s linear infinite;
}
@keyframes ov-spin { to { transform: rotate(360deg); } }

/* ---- Navigation CTA & floating WhatsApp ---- */
.menu .btn { color: var(--btn-fg); }
.menu .btn-light { color: #0b1220; }
.wa-float {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 58px; min-height: 58px; z-index: 60; border-radius: 50%;
}
.wa-float .ico { width: 28px; height: 28px; }

/* ---- Calendar days: keycap style ---- */
.day {
  font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, #fff, #eef2f8);
  border: 1px solid #cfd8e6; border-radius: 11px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #cfd8e6, 0 4px 8px -4px rgba(15, 23, 42, .25);
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.day:hover:not(:disabled) { transform: translateY(-1px); background: linear-gradient(180deg, #fff, #e0ecff); border-color: #93b4f5; }
.day:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(15, 23, 42, .25); }
.day.selected {
  color: #fff; border-color: #1e40af;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #1e3a8a, 0 8px 16px -6px rgba(37, 99, 235, .6);
}
.day:disabled, .day.disabled { opacity: .38; cursor: not-allowed; box-shadow: none; background: #f1f5f9; transform: none; }
.day:focus-visible, .slot:focus-visible { outline: 3px solid #2563eb55; outline-offset: 2px; }

/* ---- Time slots ---- */
.slot {
  font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; padding: 11px 8px;
  background: linear-gradient(180deg, #fff, #eef2f8);
  border: 1px solid #cfd8e6; border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #cfd8e6, 0 4px 8px -4px rgba(15, 23, 42, .25);
  transition: transform .1s ease, box-shadow .1s ease;
}
.slot:hover:not(:disabled) { transform: translateY(-1px); border-color: #93b4f5; }
.slot:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(15, 23, 42, .25); }
.slot.selected {
  color: #fff; border-color: #020617;
  background: linear-gradient(180deg, #334155, #0b1220);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 0 #020617, 0 8px 16px -6px rgba(2, 6, 23, .6);
}
.slot.taken, .slot:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; box-shadow: none; background: #f1f5f9; }

/* ---- Mobile menu toggle ---- */
.mobile-toggle {
  width: 46px; height: 46px; border-radius: 13px; cursor: pointer; padding: 0; place-items: center;
  background: linear-gradient(180deg, #243b5a, #0f1c2e); border: 1px solid #ffffff2e; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 0 #020617;
}
.mobile-toggle:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }

@media (prefers-reduced-motion: reduce) {
  .btn, .day, .slot, .wp-block-button__link { transition: none; }
  .btn.is-loading::after { animation-duration: 1.6s; }
}