
/* Plugin CSS (scoped with bf- prefixes) */
:root {
  --bg: #ffffff;
  --muted: #6b6b6b;
  --border: #eaeaea;
  --accent: #ff6600;
  --accent-dark: #e05a00;
  --shadow: 0 6px 18px rgba(0,0,0,0.06);
  --radius-lg: 12px;
  --radius-md: 8px;
  --max-w: 1100px;
}
.bf-wrap{max-width:var(--max-w);margin:36px auto;padding:20px;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial}
.bf-hero{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--border);padding:28px;text-align:center}
.bf-hero-title{font-size:28px;font-weight:800}
.bf-accent{color:var(--accent)}
.bf-hero-sub{color:var(--muted);font-size:14px;margin-top:6px}
.bf-hero-controls{margin-top:18px;display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.bf-select-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px;box-shadow:0 3px 8px rgba(0,0,0,0.03);min-width:220px;text-align:left}
.bf-select-card label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:500}
.bf-select-card select{appearance:none;background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px 34px 8px 10px;width:100%;font-size:14px;font-weight:600;color:#222;cursor:pointer;transition:all 0.2s ease;background-image:url('data:image/svg+xml;utf8,<svg fill="%236b6b6b" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M5 7l4 4 4-4z"/></svg>');background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
.bf-select-card select:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,102,0,0.1)}
.bf-main-grid{display:grid;grid-template-columns:1fr 320px;gap:22px;margin-top:24px}
.bf-pricing-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:18px;overflow-x:auto}
.bf-pricing-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.bf-pkg{border:1px solid var(--border);padding:8px 12px;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;background:#fff;transition:all 0.2s ease}
.bf-pkg.bf-selected{background:linear-gradient(180deg,var(--accent),var(--accent-dark));color:#fff;border:none;box-shadow:0 4px 12px rgba(255,102,0,0.3)}
.bf-price-table{min-width:700px}
.bf-price-row{display:grid;grid-template-columns:1fr 120px 120px 120px;align-items:center;border-top:1px solid #f1f1f1;font-size:15px}
.bf-price-row .bf-label{color:var(--muted);padding:8px 6px;white-space:normal;word-wrap:break-word;font-size:15px}
.bf-price-row .bf-cell{padding:8px 6px;text-align:center;font-weight:600;border-left:1px solid #f6f6f6;color:#222;font-size:15px}
.bf-price-row .bf-check{color:#4caf50;font-size:15px}
.bf-price-row .bf-dash{color:#bbb;font-size:15px}
.bf-highlight-basic .bf-price-row .bf-cell:nth-child(2),
.bf-highlight-standard .bf-price-row .bf-cell:nth-child(3),
.bf-highlight-premium .bf-price-row .bf-cell:nth-child(4){background:rgba(255,102,0,0.08);color:var(--accent-dark);font-weight:700}
.bf-summary{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:18px;height:fit-content}
.bf-summary h4{margin:0 0 4px;font-size:16px}
.bf-summary-row{display:flex;justify-content:space-between;margin-top:6px;font-size:14px}
.bf-total{font-weight:800;font-size:20px;color:#111}
.bf-button{display:block;width:100%;text-align:center;margin-top:14px;background:var(--accent);color:#fff;font-weight:700;border:none;border-radius:8px;padding:10px;cursor:pointer}

/* Responsive */
@media (max-width:1024px){.bf-main-grid{grid-template-columns:1fr}.bf-summary{margin-top:20px}}
@media (max-width:768px){body{font-size:15px}.bf-hero-title{font-size:22px}.bf-price-row{grid-template-columns:1fr 90px 90px 90px}.bf-price-table{min-width:600px}}
@media (max-width:480px){body{font-size:14px}.bf-hero-title{font-size:20px}.bf-hero-sub{font-size:13px}.bf-select-card{min-width:100%}.bf-pricing-header{flex-direction:column;align-items:center;text-align:center}.bf-pricing-header h3{margin-bottom:6px}.bf-pricing-header div:last-child{display:flex;justify-content:center;gap:8px;width:100%}.bf-highlight-basic .bf-price-row .bf-cell:nth-child(3),.bf-highlight-basic .bf-price-row .bf-cell:nth-child(4),.bf-highlight-standard .bf-price-row .bf-cell:nth-child(2),.bf-highlight-standard .bf-price-row .bf-cell:nth-child(4),.bf-highlight-premium .bf-price-row .bf-cell:nth-child(2),.bf-highlight-premium .bf-price-row .bf-cell:nth-child(3){display:none}.bf-price-row{grid-template-columns:1fr 1fr}.bf-price-table{min-width:auto;width:100%}.bf-price-row .bf-cell,.bf-price-row .bf-check,.bf-price-row .bf-dash{font-size:14px}.bf-price-row .bf-label{font-size:14px}}
