/* Styles */
.fsubs-shell{
  --fsubs-ink:#10233f;
  --fsubs-muted:#5f6f86;
  --fsubs-line:rgba(16,35,63,.12);
  --fsubs-brand:#0f6cbd;
  --fsubs-brand-2:#1f9cf0;
  --fsubs-accent:#f97316;
  --fsubs-bg:linear-gradient(180deg,#f4f8fc 0%,#ffffff 45%,#eef5fb 100%);
  max-width:1200px;
  margin:0 auto;
  padding:32px 20px 56px;
  color:var(--fsubs-ink);
}
.fsubs-hero{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);
  gap:24px;
  padding:34px;
  margin-bottom:24px;
  border-radius:28px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.72), transparent 34%),
    linear-gradient(135deg, rgba(15,108,189,.10) 0%, rgba(249,115,22,.12) 100%),
    var(--fsubs-bg);
  border:1px solid var(--fsubs-line);
  box-shadow:0 20px 60px rgba(16,35,63,.10);
}
.fsubs-eyebrow{
  display:inline-block;
  margin-bottom:12px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fsubs-brand);
}
.fsubs-hero__title{
  margin:0 0 14px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.02;
  letter-spacing:-.03em;
}
.fsubs-hero__subtitle{
  margin:0;
  max-width:58ch;
  font-size:1.03rem;
  line-height:1.75;
  color:var(--fsubs-muted);
}
.fsubs-hero__trust{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:12px;
}
.fsubs-trust-pill{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.9);
  color:var(--fsubs-ink);
  font-weight:700;
  box-shadow:0 8px 20px rgba(16,35,63,.06);
}
.fsubs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.fsubs-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  border:1px solid var(--fsubs-line);
  border-radius:24px;
  padding:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.96) 100%);
  box-shadow:0 16px 36px rgba(16,35,63,.08);
  position:relative;
  overflow:hidden;
}
.fsubs-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--fsubs-brand),var(--fsubs-accent));
}
.fsubs-card h3{margin:0;font-size:1.5rem;line-height:1.1}
.fsubs-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.fsubs-plan-kicker{
  display:block;
  margin-bottom:8px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fsubs-muted);
}
.fsubs-price-block{display:flex;align-items:flex-end;gap:8px}
.fsubs-price-main{font-size:2.2rem;line-height:1;letter-spacing:-.04em}
.fsubs-price-interval{color:var(--fsubs-muted);font-weight:600;padding-bottom:4px}
.fsubs-chip-trial{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(249,115,22,.12);
  color:#b45309;
  font-size:.76rem;
  font-weight:800;
  white-space:nowrap;
}
.fsubs-excerpt{margin:0;color:var(--fsubs-muted);line-height:1.7}
.fsubs-meta{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.fsubs-meta li{display:flex;align-items:flex-start;gap:10px;color:var(--fsubs-ink)}
.fsubs-meta li::before{
  content:"";
  width:10px;
  height:10px;
  margin-top:7px;
  flex:0 0 auto;
  border-radius:999px;
  background:linear-gradient(135deg,var(--fsubs-brand),var(--fsubs-accent));
}
.fsubs-content{color:var(--fsubs-muted);line-height:1.7}
.fsubs-content p:last-child{margin-bottom:0}
.fsubs-content ul{margin:0;padding-left:18px}
.fsubs-card__actions{display:grid;gap:12px;margin-top:auto}
.fsubs-primary-cta,
.fsubs-card .button.fsubs-primary-cta,
.fsubs-card .button.fsubs-manage-subscription{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  border:none;
  border-radius:16px;
  background:linear-gradient(135deg,var(--fsubs-brand) 0%, var(--fsubs-brand-2) 48%, var(--fsubs-accent) 100%);
  color:#fff !important;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 18px 34px rgba(15,108,189,.22);
}
.fsubs-primary-cta:hover,
.fsubs-card .button.fsubs-manage-subscription:hover{transform:translateY(-1px);filter:brightness(1.02)}
.fsubs-secondary-link{color:var(--fsubs-brand);font-weight:700;text-decoration:none}
.fsubs-my{border:1px solid #e3e3e3;border-radius:12px;padding:16px;background:#fff}
.fsubs-table{width:100%;border-collapse:collapse}
.fsubs-table th,.fsubs-table td{border-bottom:1px solid #eee;padding:8px;text-align:left}

/* Estilos para planes suscritos */
.fsubs-card-subscribed{
  border-color:rgba(16,185,129,.45);
  background:linear-gradient(180deg,rgba(240,253,244,.96) 0%,#ffffff 100%);
  box-shadow:0 16px 32px rgba(16,185,129,.10);
}
.fsubs-badge-active{
  display:inline-block;
  background:#10b981;
  color:#fff;
  font-size:.75rem;
  padding:4px 10px;
  border-radius:12px;
  margin-left:8px;
  font-weight:600;
  vertical-align:middle;
}
.fsubs-subscription-info{
  background:#f0fdf4;
  border:1px solid #10b981;
  border-radius:12px;
  padding:12px;
  margin:12px 0;
}
.fsubs-subscription-info p{margin:6px 0;font-size:.9rem;color:#065f46}
.fsubs-trial-active{
  background:#fef3c7;
  border:1px solid #f59e0b;
  border-radius:10px;
  padding:10px;
  color:#92400e;
}
.fsubs-active-since,.fsubs-next-billing{font-size:.85rem}
.fsubs-view-subscription{
  width:100%;
  text-align:center;
  background:#f3f4f6;
  color:#374151;
  border:1px solid #d1d5db;
}
.fsubs-view-subscription:hover{background:#e5e7eb;color:#1f2937}

.fsubs-theme-microbilling .fsubs-hero__title{
  font-family:"Trebuchet MS","Segoe UI",sans-serif;
  max-width:15ch;
}

.fsubs-theme-microbilling .fsubs-trust-pill{
  background:rgba(255,255,255,.92);
}

.fsubs-theme-microbilling .fsubs-card{
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(244,251,248,.98) 100%);
}

.fsubs-theme-microbilling .fsubs-price-main{
  font-size:2.35rem;
}

.fsubs-theme-microbilling .fsubs-chip-trial{
  background:rgba(245,158,11,.14);
  color:#b45309;
}

/* Estilos para tabla de suscripciones en My Account */
.shop_table_responsive.my_account_orders td[data-title] {vertical-align: middle}
.shop_table_responsive.my_account_orders .button {margin: 2px}
.fsubs-cancel-btn {font-size: 13px !important;padding: 6px 12px !important}

@media (max-width: 820px) {
  .fsubs-shell{padding:24px 16px 40px}
  .fsubs-hero{grid-template-columns:1fr;padding:24px;border-radius:24px}
}

/* Responsive para botones en tabla */
@media (max-width: 768px) {
  .shop_table_responsive td {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .shop_table_responsive .button {
    flex: 1;
    min-width: 120px;
  }
}