/* ==========================================================================
   HostCS.ro — Buttons
   Angular, clipped-corner shape on purpose — not a generic pill button.
   ========================================================================== */

.btn {
  --cut: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, background-position 0.4s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn svg { width: 17px; height: 17px; flex: none; }

.btn-ghost {
  background: var(--bg-elevated-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}

.btn-ghost:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.btn-block { width: 100%; }
.btn-sm { --cut: 7px; padding: 11px 20px; font-size: 12.5px; }
.btn-lg { --cut: 12px; padding: 16px 30px; font-size: 14.5px; }

/* ---------- Order button — "Comandă acum" (gold, grid-pattern glow, from Uiverse.io by Smit-Prajapati) ---------- */
.btn-order {
  --main-color: #f5b400;
  --main-bg-color: rgba(245, 180, 0, 0.36);
  --pattern-color: rgba(245, 180, 0, 0.073);

  filter: hue-rotate(0deg);
  clip-path: none;

  background: radial-gradient(
      circle,
      var(--main-bg-color) 0%,
      rgba(0, 0, 0, 0) 95%
    ),
    linear-gradient(var(--pattern-color) 1px, transparent 1px),
    linear-gradient(to right, var(--pattern-color) 1px, transparent 1px);
  background-size:
    cover,
    15px 15px,
    15px 15px;
  background-position:
    center center,
    center center,
    center center;
  border-style: solid;
  border-image: radial-gradient(
      circle,
      var(--main-color) 0%,
      rgba(0, 0, 0, 0) 100%
    )
    1;
  border-width: 1px 0 1px 0;
  color: var(--main-color);
  transition: background-size 0.2s ease-in-out, filter 0.3s ease;
}

.btn-order:hover {
  background-size:
    cover,
    10px 10px,
    10px 10px;
  transform: none;
}

.btn-order:active {
  filter: hue-rotate(250deg);
  transform: none;
}

/* ---------- Swap-text button — "Vezi pachetele" / "Client Area" / "Alege jocul" (line-draw + text-slide, from Uiverse.io by Nawsome, recoloured gold) ---------- */
.btn-swap {
  position: relative;
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-swap:hover { transform: none; }
.btn-swap:active { transform: translateY(0); }

.btn-swap::before,
.btn-swap::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 0;
  background: var(--accent-ink);
  transition: width 0.45s cubic-bezier(.35,.1,.25,1);
  pointer-events: none;
}

.btn-swap::before { top: 0; right: 0; }
.btn-swap::after { bottom: 0; left: 0; }

.btn-swap:hover::before,
.btn-swap:hover::after { width: 100%; }

.btn-swap .swap-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.btn-swap .swap-frame::before,
.btn-swap .swap-frame::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 0;
  background: var(--accent-ink);
  transition: height 0.45s cubic-bezier(.35,.1,.25,1);
}

.btn-swap .swap-frame::before { top: 0; right: 0; }
.btn-swap .swap-frame::after { bottom: 0; left: 0; }

.btn-swap:hover .swap-frame::before,
.btn-swap:hover .swap-frame::after { height: 100%; }

.btn-swap .swap-text {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2em;
  vertical-align: middle;
}

.btn-swap .swap-text .swap-a,
.btn-swap .swap-text .swap-b {
  display: block;
  transition: transform 0.35s cubic-bezier(.35,.1,.25,1);
}

.btn-swap .swap-text .swap-b {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.btn-swap:hover .swap-text .swap-a,
.btn-swap:hover .swap-text .swap-b {
  transform: translateY(-100%);
}