/* Book page action row, share sheet and wishlist button. Text only, no icon fonts. */
.ba-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

.ba-btn {
    --ba-fg: #0f172a; --ba-bg: #fff; --ba-line: #cbd5e1;
    display: inline-flex; align-items: center; gap: .4rem; min-height: 42px;
    padding: .45rem 1.1rem; border-radius: 999px; border: 1px solid var(--ba-line);
    background: var(--ba-bg); color: var(--ba-fg); font-weight: 600; font-size: .95rem; line-height: 1;
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.ba-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }
.ba-btn:active { transform: translateY(0); }
.ba-btn:focus-visible, .ba-chip:focus-visible, .ba-close:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.ba-btn-primary { --ba-fg: #fff; --ba-bg: #0d6efd; --ba-line: #0d6efd; }
.ba-btn[aria-pressed="true"] { --ba-fg: #b91c1c; --ba-bg: #fef2f2; --ba-line: #fca5a5; }
.ba-btn.is-busy { opacity: .6; pointer-events: none; }
.ba-count { min-width: 1.4rem; padding: .15rem .4rem; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: .75rem; text-align: center; }
.ba-count[hidden] { display: none; }

/* share sheet: bottom sheet on phones, centred card from tablet up */
.ba-sheet { border: 0; padding: 0; width: min(100%, 460px); max-width: 100%; border-radius: 20px; background: #fff; color: #0f172a; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); }
.ba-sheet::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.ba-sheet[open] { animation: ba-pop .18s ease-out; }
.ba-sheet-inner { display: grid; gap: .9rem; padding: 1.1rem 1.2rem 1.3rem; margin: 0; }
.ba-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.ba-sheet-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.ba-close { border: 0; background: #f1f5f9; border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; font-weight: 600; cursor: pointer; }

.ba-card { display: flex; gap: .8rem; align-items: center; padding: .6rem; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; }
.ba-card img { width: 54px; height: 72px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #e2e8f0; }
.ba-card-text { display: grid; gap: .15rem; min-width: 0; }
.ba-card-text strong { font-size: .95rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ba-card-text span { font-size: .8rem; color: #64748b; }
.ba-card-price { color: #15803d !important; font-weight: 700; }

.ba-field { display: grid; gap: .3rem; font-size: .8rem; color: #475569; font-weight: 600; }
.ba-field textarea { width: 100%; resize: vertical; padding: .55rem .7rem; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; font-size: .9rem; color: #0f172a; background: #fff; }

.ba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ba-chip { min-height: 44px; padding: .5rem .4rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #0f172a; font-weight: 600; font-size: .85rem; cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; }
.ba-chip:hover { background: #f1f5f9; border-color: #94a3b8; transform: translateY(-1px); }
.ba-chip[data-channel="whatsapp"]:hover { background: #dcfce7; border-color: #22c55e; }
.ba-chip[data-channel="facebook"]:hover { background: #dbeafe; border-color: #3b82f6; }
.ba-chip[data-channel="telegram"]:hover { background: #e0f2fe; border-color: #0ea5e9; }
.ba-chip[hidden] { display: none; }

.ba-qr { display: grid; justify-items: center; gap: .4rem; padding: .8rem; border: 1px dashed #cbd5e1; border-radius: 14px; }
.ba-qr[hidden] { display: none; }
.ba-qr canvas, .ba-qr img, .ba-qr svg { width: 164px; height: 164px; }
.ba-link { border: 0; background: none; color: #0d6efd; font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: underline; }

.ba-copy { display: flex; gap: .5rem; }
.ba-copy input { flex: 1 1 auto; min-width: 0; padding: .5rem .75rem; border: 1px solid #cbd5e1; border-radius: 999px; font-size: .85rem; color: #475569; background: #f8fafc; }
.ba-status { min-height: 1.2rem; margin: 0; text-align: center; font-size: .85rem; font-weight: 600; color: #15803d; }
.ba-status.is-error { color: #b91c1c; }

@keyframes ba-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
    .ba-sheet { width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; }
    .ba-sheet[open] { animation-name: ba-rise; }
    .ba-actions .ba-btn { flex: 1 1 calc(50% - .5rem); justify-content: center; }
    .ba-actions .ba-btn-primary { flex-basis: 100%; }
}
@keyframes ba-rise { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .ba-btn, .ba-chip { transition: none; }
    .ba-sheet[open] { animation: none; }
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ba-btn { --ba-fg: #e2e8f0; --ba-bg: #1e293b; --ba-line: #475569; }
    :root:not([data-theme="light"]) .ba-btn-primary { --ba-fg: #fff; --ba-bg: #2563eb; --ba-line: #2563eb; }
    :root:not([data-theme="light"]) .ba-sheet { background: #0f172a; color: #e2e8f0; }
    :root:not([data-theme="light"]) .ba-card, :root:not([data-theme="light"]) .ba-chip, :root:not([data-theme="light"]) .ba-copy input,
    :root:not([data-theme="light"]) .ba-field textarea { background: #1e293b; color: #e2e8f0; border-color: #334155; }
    :root:not([data-theme="light"]) .ba-close { background: #1e293b; color: #e2e8f0; }
}

.ba-chip[data-channel="messenger"]:hover { background: #ede9fe; border-color: #8b5cf6; }
.ba-hint { margin: 0; font-size: .78rem; color: #64748b; text-align: center; }