/* ==========================================================================
   Component: button  (<x-site.button>)
   --------------------------------------------------------------------------
   .btn  +  one variant  (--primary --aqua --ghost --light --outline-light --whatsapp)
         +  one size     (--sm --md --lg)      optional: --block
   Stadium pills — the logo's م loop. Flat: solid fill or a 1.5px outline,
   no shadow; hover only deepens the colour. primary (deep ink + aqua dot)
   is reserved for booking.
   ========================================================================== */

.btn {
    --btn-bg: var(--primary);
    --btn-fg: var(--on-primary);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    min-height: 44px;
    border: 1.5px solid var(--btn-border);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

.btn:hover  { color: var(--btn-fg); }
.btn:active { transform: scale(0.98); }

.btn .icon  { font-size: 1.2em; }
.btn .dot   { --dot-size: 11px; transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring); }
.btn:hover .dot { background: var(--dot-color); transform: scale(1.15); }   /* the dot fills in — booking feels "ready" */
.btn__end   { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__end { transform: translateX(-4px); }   /* RTL: arrows point left, so nudge left */

/* ── Sizes ───────────────────────────────────────────────────────────────── */
.btn--sm    { min-height: 40px; padding: 0.4em 1.2em; font-size: var(--fs-sm); }
.btn--md    { padding: 0.75em 1.7em; font-size: var(--fs-base); }
.btn--lg    { min-height: 56px; padding: 0.85em 2.2em; font-size: var(--fs-base); }
.btn--block { width: 100%; }

/* ── Variants ────────────────────────────────────────────────────────────── */
.btn--primary       { }
.btn--primary:hover { --btn-bg: var(--primary-hover); }

.btn--aqua          { --btn-bg: var(--second-strong); --btn-fg: #fff; }
.btn--aqua:hover    { --btn-bg: var(--second-text); }

.btn--ghost         { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--ink); }
.btn--ghost:hover   { --btn-bg: var(--ink); --btn-fg: var(--paper); }

.btn--light         { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--light:hover   { --btn-bg: var(--panel); }

.btn--outline-light       { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgb(255 255 255 / 0.7); }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--ink); }

.btn--danger         { --btn-bg: var(--danger); --btn-fg: #fff; }
.btn--danger:hover   { --btn-bg: color-mix(in srgb, var(--danger) 80%, #000); }

.btn--whatsapp       { --btn-bg: var(--whatsapp); --btn-fg: #06331A; }
.btn--whatsapp:hover { --btn-bg: #1EBE5A; }

/* Plain text link with an underline — the design's secondary action */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}
.text-link:hover { color: var(--second-text); }
.text-link .icon { transition: transform var(--dur) var(--ease-out); }
.text-link:hover .icon { transform: translateX(-4px); }