/* Futuristic theme styling aligned with chatbot colors */
:root{ --bb-primary:#60a5fa; --bb-accent:#0ea5e9; --bb-bg:#0b0f14; --bb-card:#0f172a; --bb-text:#e5f2ff; --bb-muted:#94a3b8; }
body{ background: var(--bb-bg); color: var(--bb-text); }
/* Constrain custom logo while preserving aspect ratio */
.custom-logo{ max-height:56px; width:auto; height:auto; }
.hero{ max-width:1100px; margin:60px auto; padding:0 20px; text-align:center; }
.hero h1{ font-size: clamp(28px,4vw,48px); margin:0 0 10px; }
.hero p{ color: var(--bb-muted); font-size: clamp(14px,2vw,18px); }
.grid{ max-width:1100px; margin:40px auto; padding:0 20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.card{ background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(11,15,20,.9)); border:1px solid rgba(148,163,184,.18); border-radius:16px; padding:20px; box-shadow: 0 30px 60px rgba(0,0,0,.35); backdrop-filter: blur(12px); }
.card h3{ margin-top:0; }

/* Payment widget */
.bb-pay{ display:flex; justify-content:center; padding:40px 20px; }
.bb-card{ width:min(560px,100%); background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(11,15,20,.9)); border:1px solid rgba(148,163,184,.18); border-radius:16px; padding:24px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
#bb-card-element{ background: rgba(2,6,23,.6); border:1px solid rgba(148,163,184,.25); border-radius:10px; padding:12px; margin:12px 0; }
.bb-button{ display:inline-flex; align-items:center; gap:10px; background: linear-gradient(135deg, var(--bb-primary), var(--bb-accent)); color:#0b1220; border:0; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:700; }
.bb-msg{ margin-top:10px; color:var(--bb-muted); min-height:20px; }
/* Form styling */
.bb-form{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:6px; align-items:start; }
.bb-form .bb-field{ display:flex; flex-direction:column; gap:6px; font-size:11px; }
.bb-field span{ background: rgba(0,0,0,0.2); padding:2px 4px; border-radius:4px; }
.bb-form .bb-field.bb-span-2{ grid-column: 1 / -1; }
.bb-form input, .bb-form textarea, .bb-form select{ padding:0px 14px; border:1px solid rgba(148,163,184,.25); border-radius:10px; background: rgba(15,23,42,.6); color: var(--bb-text); min-height:44px; }
.bb-form input::placeholder, .bb-form textarea::placeholder{ color: var(--bb-muted); }
/* Payment section and footer */
.bb-full{ width:100%; justify-content:center; margin-top:10px; display:flex; }
.bb-total{ margin-top:6px; color: var(--bb-text); font-weight:700; }
@media (max-width:600px){ .bb-form{ grid-template-columns: 1fr; } }