/* ============================================================
   OliverDeck — COMPONENT · BUTTONS
   od-btn (7 variants × 3 sizes) + icon-button + button-group.
   States: default / hover / focus-visible / active / disabled /
   loading. Touch target ≥ 44px at default & lg sizes.
   ============================================================ */

.od-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--od-btn-gap);
  font-family: var(--od-font-body);
  font-weight: var(--od-btn-font-weight);
  font-size: 15px;
  padding: var(--od-btn-pad-y) var(--od-btn-pad-x);
  min-height: 44px;
  border-radius: var(--od-btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
  position: relative;
}
.od-btn .material-symbols-outlined { font-size: 18px; }

.od-btn:disabled,
.od-btn[aria-disabled="true"],
.od-btn[data-loading="true"] {
  opacity: var(--od-state-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
}

/* Loading — swap label for a spinner */
.od-btn[data-loading="true"] { color: transparent !important; }
.od-btn[data-loading="true"]::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  color: var(--od-btn-primary-fg);
  animation: od-spin 0.7s linear infinite;
}
.od-btn[data-v="dark"][data-loading="true"]::after,
.od-btn[data-v="outline"][data-loading="true"]::after,
.od-btn[data-v="ghost"][data-loading="true"]::after { color: var(--od-color-text-primary); }
@keyframes od-spin { to { transform: rotate(360deg); } }

/* ---------- VARIANTS ---------- */
.od-btn[data-v="primary"] { background: var(--od-btn-primary-bg); color: var(--od-btn-primary-fg); box-shadow: var(--shadow-sm); }
.od-btn[data-v="primary"]:hover { background: var(--od-btn-primary-bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.od-btn[data-v="primary"]:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

.od-btn[data-v="dark"] { background: var(--od-btn-dark-bg); color: var(--od-btn-dark-fg); }
.od-btn[data-v="dark"]:hover { background: var(--od-btn-dark-bg-hover); transform: translateY(-1px); }
.od-btn[data-v="dark"]:active { transform: translateY(0); }

.od-btn[data-v="outline"] { background: transparent; color: var(--od-color-text-primary); border-color: var(--od-color-border-strong); }
.od-btn[data-v="outline"]:hover { border-color: var(--od-color-brand); background: var(--od-color-brand-subtle); }

.od-btn[data-v="outline-white"] { background: transparent; color: var(--neutral-50); border-color: rgba(255,255,255,0.3); }
.od-btn[data-v="outline-white"]:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }

.od-btn[data-v="ghost"] { background: transparent; color: var(--od-color-text-secondary); }
.od-btn[data-v="ghost"]:hover { background: var(--od-color-hover-tint); color: var(--od-color-text-primary); }

.od-btn[data-v="white"] { background: var(--neutral-0); color: var(--wood-900); }
.od-btn[data-v="white"]:hover { background: var(--od-color-brand-subtle); }

/* ---------- SIZES ---------- */
.od-btn[data-size="sm"] { font-size: 13px; padding: 8px 14px; min-height: 36px; border-radius: 10px; }
.od-btn[data-size="sm"] .material-symbols-outlined { font-size: 16px; }
.od-btn[data-size="lg"] { font-size: 16px; padding: 16px 26px; min-height: 52px; border-radius: 14px; }
.od-btn[data-size="lg"] .material-symbols-outlined { font-size: 20px; }
.od-btn[data-width="full"] { width: 100%; }

/* ---------- ICON BUTTON ---------- */
.od-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--neutral-100);
  color: var(--od-color-text-primary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.od-icon-btn:hover { background: var(--od-color-brand-subtle); }
.od-icon-btn .material-symbols-outlined { font-size: 22px; }
.od-icon-btn[data-size="sm"] { width: 36px; height: 36px; }
.od-icon-btn[data-size="sm"] .material-symbols-outlined { font-size: 18px; }
.od-icon-btn[data-v="ghost"] { background: transparent; }
.od-icon-btn[data-v="ghost"]:hover { background: var(--od-color-hover-tint); }
.od-icon-btn[data-v="round"] { border-radius: 999px; background: var(--neutral-0); box-shadow: var(--shadow-sm); }
.od-icon-btn:disabled { opacity: var(--od-state-disabled-opacity); cursor: not-allowed; }

/* ---------- BUTTON GROUP ---------- */
.od-btn-group { display: inline-flex; }
.od-btn-group .od-btn { border-radius: 0; border-color: var(--od-color-border-strong); }
.od-btn-group .od-btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.od-btn-group .od-btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.od-btn-group .od-btn + .od-btn { margin-left: -1px; }
.od-btn-group .od-btn[aria-pressed="true"] { background: var(--wood-900); color: var(--neutral-50); border-color: var(--wood-900); z-index: 1; }

/* ---------- LINK ---------- */
.od-link { color: var(--od-color-text-link); font-weight: var(--fw-semi); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color var(--dur-base); }
.od-link:hover { color: var(--od-color-text-link-hover); }
.od-link .material-symbols-outlined { font-size: 16px; transition: transform var(--dur-base) var(--ease-out); }
.od-link:hover .material-symbols-outlined { transform: translateX(3px); }