/*
 * buttons.css — Single source of truth for all button variants
 *
 * CATALOGUE:
 *   .btn                  — Primary (yellow fill)
 *   .btn-secondary        — Secondary (yellow outline)
 *   .btn-outline          — Ghost (gray outline)
 *   .btn-small            — Size modifier (combine with above)
 *   .btn-cta-remind       — Remind pill (white + yellow border + bell icon)
 *   .btn-cta-remind--tba  — TBA variant (dashed border)
 *   .btn-cta-remind--done — Subscribed state (teal fill)
 *   .btn-cta-remind--compact — Icon-only circle (40px)
 *   .btn-cta-go           — Submit/GO (yellow fill, inline)
 *   .btn-remind-icon      — Round icon button (44px circle)
 *   .mini-remind-btn      — Small pill remind (inline lists)
 *   .mini-remind-go       — Small GO submit (inline lists)
 *   .detail-action-btn    — Ghost action (full-width, gray border)
 *   .share-btn            — Share row button (gray border)
 *   .btn-verify           — Verify/confirm (yellow fill)
 *   .push-optin-btn       — Push notification opt-in (yellow fill)
 *   .btn-logout           — Danger/destructive (red outline)
 */


/* ─── PRIMARY ─────────────────────────────────────────────── */

.btn {
    display: inline-block;
    background: var(--brand);
    color: var(--black);
    padding: 0.625rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-base);
    transition: all 0.15s;
    border: none;
    cursor: pointer;
}
.btn:hover {
    background: var(--brand-hover);
    transform: translateY(-1px);
}

.btn-small {
    padding: 0.35rem 1rem;
    font-size: var(--text-sm);
    border-radius: 6px;
}
.btn-small:not(.btn-secondary) {
    color: var(--white);
}


/* ─── SECONDARY / OUTLINE ─────────────────────────────────── */

.btn-secondary {
    background: transparent;
    border: 1px solid var(--brand);
    color: var(--brand);
    margin-left: 1rem;
}
.btn-secondary:hover {
    background: var(--brand);
    color: var(--black);
}

.btn-outline {
    border: 1px solid var(--gray);
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: var(--text-sm);
}


/* ─── CTA CONTEXT OVERRIDES ───────────────────────────────── */

.cta .btn {
    padding: 0.875rem 2rem;
    font-size: var(--text-base);
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(254, 190, 16, 0.35);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.cta .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 190, 16, 0.5);
}
.cta .btn-secondary {
    border-color: var(--gray-light);
    color: var(--gray);
    box-shadow: none;
}
.cta .btn-secondary:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: transparent;
    box-shadow: none;
    transform: none;
}
.cta .btn + .btn {
    margin-left: 1rem;
}


/* ─── REMIND PILL (main subscribe CTA) ───────────────────── */

.btn-cta-remind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 10px 24px;
    background: var(--white);
    color: var(--black);
    border: 1.5px solid var(--brand);
    border-radius: 24px;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.btn-cta-remind:hover {
    background: var(--brand-light);
    border-color: var(--brand-hover);
}
.btn-cta-remind:active { transform: scale(0.98); }
.btn-cta-remind:disabled { opacity: 0.7; cursor: wait; }
.btn-cta-remind svg { flex-shrink: 0; }

/* TBA — event date not set yet */
.btn-cta-remind--tba { border-style: dashed; }
.btn-cta-remind--tba:hover { border-style: solid; }

/* Done — already subscribed */
.btn-cta-remind--done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 10px 24px;
    background: var(--teal);
    color: #fff;
    border: 1.5px solid var(--teal);
    border-radius: 24px;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

/* Compact — icon-only circle */
.btn-cta-remind--compact {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
}
.btn-cta-remind--compact svg { margin: 0; }

@media (prefers-color-scheme: dark) {
    .btn-cta-remind,
    .btn-cta-remind--tba { color: var(--black); }
}


/* ─── GO BUTTON (inline form submit) ─────────────────────── */

.btn-cta-go {
    padding: 0.65rem 1.25rem;
    background: var(--brand);
    color: var(--black);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: var(--text-base);
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.btn-cta-go:hover { background: var(--brand-hover); }
.btn-cta-go:disabled { opacity: 0.7; cursor: wait; }

@media (prefers-color-scheme: dark) {
    .btn-cta-go { color: var(--black); }
}


/* ─── ICON BUTTON (round, 44px) ──────────────────────────── */

.btn-remind-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white, #f5f5f5);
    border: 2px solid var(--gray-light, #e0e0e0);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}
.btn-remind-icon.subscribed {
    background: var(--teal);
    border-color: var(--teal);
    cursor: pointer;
}


/* ─── MINI REMIND (inline lists, smaller pill) ───────────── */

.mini-remind-btn {
    padding: 6px 14px;
    border-radius: 18px;
    border: 1.5px solid var(--brand);
    background: var(--white);
    color: var(--black);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    font-family: inherit;
    white-space: nowrap;
}
.mini-remind-btn:hover {
    background: var(--brand-light);
    border-color: var(--brand-hover);
}
.mini-remind-btn.subscribed {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
    cursor: default;
}

.mini-remind-go {
    padding: 6px 12px;
    background: var(--brand);
    color: var(--black);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: var(--text-sm);
    cursor: pointer;
    font-family: inherit;
}


/* ─── GHOST ACTIONS ──────────────────────────────────────── */

/* Full-width action row button (detail page) */
.detail-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--gray-light);
    border-radius: 10px;
    background: var(--white);
    color: var(--gray);
    font-size: var(--text-base);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 150ms, background 150ms;
    margin-bottom: var(--space-sm);
}
.detail-action-btn:hover { border-color: var(--gray); background: var(--gray-bg); }
.detail-action-btn:active { transform: scale(0.98); }

/* Share row buttons */
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--gray-light);
    border-radius: 10px;
    background: var(--white);
    color: var(--black);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.share-btn:hover { border-color: var(--gray); background: var(--gray-bg); }
.share-btn:active { transform: scale(0.97); }
.share-whatsapp { color: #25D366; border-color: #25D366; }
.share-whatsapp:hover { background: #25D366; color: #fff; }
.share-x { font-weight: 700; }
.share-native { color: var(--gray); }


/* ─── YELLOW FILL UTILITIES ──────────────────────────────── */

/* PIN / magic link verify */
.btn-verify {
    padding: 0.6rem 1.25rem;
    background: var(--brand);
    color: var(--black);
    border: none;
    border-radius: 8px;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.btn-verify:hover { opacity: 0.9; }
.btn-verify:disabled { opacity: 0.5; cursor: wait; }

/* Push notification opt-in */
.push-optin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    background: var(--brand);
    color: var(--black);
    border: none;
    border-radius: 8px;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.push-optin-btn:hover { opacity: 0.9; }
.push-optin-btn:disabled { opacity: 0.5; cursor: wait; }


/* ─── DANGER ─────────────────────────────────────────────── */

.btn-logout {
    display: block;
    width: 100%;
    padding: 0.75rem;
    margin-top: 1rem;
    text-align: center;
    color: var(--error);
    border: 1px solid var(--error);
    background: transparent;
    border-radius: 8px;
    font-weight: 600;
    font-size: var(--text-base);
    text-decoration: none;
    cursor: pointer;
}
.btn-logout:hover { background: rgba(220, 38, 38, 0.08); }