/*
 * HMVIP Subscriptions — Subscription Buttons (placeholder minimal styles)
 *
 * Este arquivo fornece estilos mínimos para os botões de assinatura exibidos
 * nas páginas de grupos (BuddyBoss/BuddyPress). Pode ser expandido em releases futuras.
 */

.hmvip-root .hmvip-subscription-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hmvip-root .hmvip-subscription-button {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 4px;
    border: 1px solid #0073aa;
    background-color: #0073aa;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
    font-size: 14px;
}

.hmvip-root .hmvip-subscription-button:hover,
.hmvip-root .hmvip-subscription-button:focus {
    background-color: #006298;
    border-color: #006298;
    color: #ffffff;
}

.hmvip-root .hmvip-subscription-button--vip {
    background-color: #8a2be2;
    border-color: #7a22cd;
}

.hmvip-root .hmvip-subscription-button--vip:hover,
.hmvip-root .hmvip-subscription-button--vip:focus {
    background-color: #741ec6;
    border-color: #6a1ab5;
}

/*
 * Fase 2 — estilos mínimos para novos templates e badges
 */

.hmvip-root .hmvip-feature-showcase,
.hmvip-root .hmvip-classic-card,
.hmvip-root .hmvip-minimalist-banner {
    margin: 16px 0;
}

.hmvip-root .hmvip-fs-card,
.hmvip-root .hmvip-cc-card,
.hmvip-root .hmvip-mb-wrap {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 16px;
}

.hmvip-root[data-hmvip-theme="dark"] .hmvip-fs-card,
.hmvip-root[data-hmvip-theme="dark"] .hmvip-cc-card,
.hmvip-root[data-hmvip-theme="dark"] .hmvip-mb-wrap {
    background: #16181d;
    border-color: rgba(255,255,255,.08);
    color: #e9eef5;
}

.hmvip-root .hmvip-fs-title,
.hmvip-root .hmvip-cc-title,
.hmvip-root .hmvip-mb-title {
    margin: 0 0 8px 0;
    font-size: 20px;
    line-height: 1.3;
}

.hmvip-root .hmvip-fs-subtitle,
.hmvip-root .hmvip-cc-subtitle,
.hmvip-root .hmvip-mb-subtitle {
    margin: 0 0 12px 0;
    color: #5b6371;
}

.hmvip-root .hmvip-fs-cta,
.hmvip-root .hmvip-cc-ctas,
.hmvip-root .hmvip-mb-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.hmvip-root .hmvip-subscribe-btn {
    position: relative;
    display: inline-grid;
    grid-auto-flow: row;
    justify-items: center;
    gap: 2px;
    text-decoration: none;
}

.hmvip-root .hmvip-button-label { font-weight: 700; }
.hmvip-root .hmvip-button-sub { font-size: 12px; opacity: .9; }
.hmvip-root .hmvip-price-inline { margin-left: 8px; font-weight: 700; }

.hmvip-root .hmvip-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #fff;
}

/* A11y: contraste adequado para subtítulos em dark mode */
.hmvip-root[data-hmvip-theme="dark"] .hmvip-fs-subtitle,
.hmvip-root[data-hmvip-theme="dark"] .hmvip-cc-subtitle,
.hmvip-root[data-hmvip-theme="dark"] .hmvip-mb-subtitle {
    color: #aeb6c2;
}

/* Responsividade ≥720px: grid 1fr auto nas seções de CTA */
@media (min-width: 720px) {
    .hmvip-root .hmvip-fs-cta,
    .hmvip-root .hmvip-cc-ctas,
    .hmvip-root .hmvip-mb-ctas {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    .hmvip-root .hmvip-fs-card,
    .hmvip-root .hmvip-cc-card,
    .hmvip-root .hmvip-mb-wrap {
        padding: 24px;
    }
}


/* HMVIP Ecosystem — Design Tokens (scoped to .hmvip-root) */
.hmvip-root{
    --hmvip-color-primary:#F22768; /* principal */
    --hmvip-color-bg:#ffffff;
    --hmvip-color-surface:#ffffff;
    --hmvip-color-text:#1C1C1C;
    --hmvip-color-subtext:#5b6371;
    --hmvip-color-border:rgba(0,0,0,0.08);
    --hmvip-gradient-primary:linear-gradient(135deg, #F22768 0%, #C61F56 100%);
    --hmvip-radius-sm:8px; --hmvip-radius-md:12px; --hmvip-radius-lg:16px;
    --hmvip-space-1:4px; --hmvip-space-2:8px; --hmvip-space-3:12px; --hmvip-space-4:16px; --hmvip-space-6:24px; --hmvip-space-8:32px; --hmvip-space-12:48px;
    --hmvip-shadow-1:0 6px 18px rgba(0,0,0,0.08);
    --hmvip-shadow-2:0 12px 28px rgba(0,0,0,0.12);
    --hmvip-focus:#F22768;
    --hmvip-anim-ease:cubic-bezier(.16,1,.3,1);
    --hmvip-anim-fast:150ms; --hmvip-anim-med:250ms;
}
.hmvip-root[data-hmvip-theme="dark"]{
    --hmvip-color-bg:#000000;
    --hmvip-color-surface:#121212;
    --hmvip-color-text:#C7C7C7;
    --hmvip-color-subtext:#C7C7C7;
    --hmvip-color-border:rgba(255,255,255,0.10);
    --hmvip-shadow-1:0 6px 18px rgba(0,0,0,0.35);
    --hmvip-shadow-2:0 12px 28px rgba(0,0,0,0.45);
}

/* Containers (cards/banners) — aplicar tokens e contraste de bordas */
.hmvip-root .hmvip-fs-card,
.hmvip-root .hmvip-cc-card,
.hmvip-root .hmvip-mb-wrap{
    background:var(--hmvip-color-surface);
    color:var(--hmvip-color-text);
    border:1px solid var(--hmvip-color-border);
    border-radius:var(--hmvip-radius-lg);
    box-shadow:var(--hmvip-shadow-1);
}
.hmvip-root .hmvip-fs-title,.hmvip-root .hmvip-cc-title,.hmvip-root .hmvip-mb-title{color:var(--hmvip-color-text)}
.hmvip-root .hmvip-fs-subtitle,.hmvip-root .hmvip-cc-subtitle,.hmvip-root .hmvip-mb-subtitle{color:var(--hmvip-color-subtext)}

/* CTA principal — botão moderno com gradiente, sombra e micro-animações */
.hmvip-root .hmvip-subscribe-btn{
    position:relative;display:inline-grid;grid-auto-flow:row;justify-items:center;gap:2px;text-decoration:none;
    background:var(--hmvip-gradient-primary);
    color:#fff;
    padding:var(--hmvip-space-3) var(--hmvip-space-6);
    border-radius:var(--hmvip-radius-md);
    box-shadow:var(--hmvip-shadow-2);
    transition:transform var(--hmvip-anim-med) var(--hmvip-anim-ease), box-shadow var(--hmvip-anim-med) var(--hmvip-anim-ease), filter var(--hmvip-anim-med) var(--hmvip-anim-ease);
}
.hmvip-root .hmvip-subscribe-btn:hover,
.hmvip-root .hmvip-subscribe-btn:focus-visible{transform:translateY(-1px);filter:brightness(1.02);box-shadow:0 14px 32px rgba(242,39,104,0.25)}
.hmvip-root .hmvip-subscribe-btn:active{transform:translateY(0);filter:brightness(.98)}
.hmvip-root .hmvip-button-label{font-weight:700}
.hmvip-root .hmvip-button-sub{font-size:12px;opacity:.9}

/* Foco visível dentro da paleta HMVIP */
.hmvip-root .hmvip-subscribe-btn:focus-visible{outline:2px solid var(--hmvip-focus); outline-offset:3px; box-shadow:0 0 0 3px rgba(242,39,104,0.25)}
.hmvip-root[data-hmvip-theme="dark"] .hmvip-subscribe-btn:focus-visible{box-shadow:0 0 0 3px rgba(242,39,104,0.35)}

/* Badges — eliminar azul; usar variações da primária */
.hmvip-root .hmvip-badge{position:absolute;top:-10px;right:10px;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#fff}
.hmvip-root .hmvip-badge-discount{background:linear-gradient(135deg, #F22768 0%, #C61F56 100%)}
.hmvip-root .hmvip-badge-popular{background:linear-gradient(135deg, #F22768 0%, #C61F56 100%)}

/* Cards spacing refinado */
.hmvip-root .hmvip-feature-showcase,.hmvip-root .hmvip-classic-card,.hmvip-root .hmvip-minimalist-banner{margin:var(--hmvip-space-8) 0}
.hmvip-root .hmvip-fs-cta,.hmvip-root .hmvip-cc-ctas,.hmvip-root .hmvip-mb-ctas{display:flex;gap:var(--hmvip-space-3);flex-wrap:wrap;align-items:center}

/* Responsividade ≥720px: grid 1fr auto nas CTAs */
@media (min-width:720px){
  .hmvip-root .hmvip-fs-cta,.hmvip-root .hmvip-cc-ctas,.hmvip-root .hmvip-mb-ctas{display:grid;grid-template-columns:1fr auto;align-items:center}
  .hmvip-root .hmvip-fs-card,.hmvip-root .hmvip-cc-card,.hmvip-root .hmvip-mb-wrap{padding:var(--hmvip-space-12)}
}

/* Micro animação opcional para badges */
@keyframes hmvip-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.hmvip-root .hmvip-badge{animation:hmvip-pulse 2.2s ease-in-out infinite}


/* Auto dark mode detection (BuddyX/Global + OS prefers) */
html.dark-mode .hmvip-root,
html.dark .hmvip-root,
body[data-theme*="dark"] .hmvip-root,
html[data-theme*="dark"] .hmvip-root {
    --hmvip-color-bg:#000000;
    --hmvip-color-surface:#121212;
    --hmvip-color-text:#C7C7C7;
    --hmvip-color-subtext:#C7C7C7;
    --hmvip-color-border:rgba(255,255,255,0.10);
    --hmvip-shadow-1:0 6px 18px rgba(0,0,0,0.35);
    --hmvip-shadow-2:0 12px 28px rgba(0,0,0,0.45);
}
@media (prefers-color-scheme: dark) {
    .hmvip-root {
        --hmvip-color-bg:#000000;
        --hmvip-color-surface:#121212;
        --hmvip-color-text:#C7C7C7;
        --hmvip-color-subtext:#C7C7C7;
        --hmvip-color-border:rgba(255,255,255,0.10);
        --hmvip-shadow-1:0 6px 18px rgba(0,0,0,0.35);
        --hmvip-shadow-2:0 12px 28px rgba(0,0,0,0.45);
    }
}