/* FinBangla Universal Calculator UI — v1.5 (select clipping fix)
   - Keeps v1.1 rules intact
   - Adds robust SELECT fixes: height/line-height/padding + appearance reset
   - Works whether <select> has .fb-input class or just lives inside .fb-field
*/

.finbangla-ui {
  --fb-brand-1: #6366f1;
  --fb-brand-2: #3b82f6;
  --fb-success-1: #22c55e;
  --fb-success-2: #16a34a;
  --fb-amber-1: #fbbf24;
  --fb-amber-2: #f59e0b;
  --fb-surface: #ffffff;
  --fb-bg: #f8fafc;
  --fb-border: #e2e8f0;
  --fb-border-strong: #d1d5db;
  --fb-text: #0b1220;
  --fb-muted: #64748b;
  --fb-radius: 12px;
  --fb-shadow: 0 6px 24px rgba(2,6,23,.06);
}

/* Card */
.finbangla-ui.fb-card,
#fb-sanchaya.finbangla-ui.fb-card,
#fb-dps.finbangla-ui.fb-card {
  background: var(--fb-surface);
  border: 1px solid var(--fb-border);
  border-radius: 16px;
  box-shadow: var(--fb-shadow);
  padding: 16px;
}

/* Grid of inputs */
.finbangla-ui .fb-grid,
#fb-sanchaya.finbangla-ui .fb-grid,
#fb-dps.finbangla-ui .fb-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px){
  .finbangla-ui .fb-grid,
  #fb-sanchaya.finbangla-ui .fb-grid,
  #fb-dps.finbangla-ui .fb-grid{ grid-template-columns: 1fr; }
}

/* Input group wrapper */
.finbangla-ui .fb-field,
#fb-sanchaya.finbangla-ui .fb-field,
#fb-dps.finbangla-ui .fb-field{
  display: flex; flex-direction: column;
  background: var(--fb-bg);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius);
  padding: 10px;
  font-weight: 600;
}

/* Labels + help */
.finbangla-ui .fb-field > span,
.finbangla-ui .fb-field label,
#fb-sanchaya.finbangla-ui .fb-field > span,
#fb-sanchaya.finbangla-ui .fb-field label,
#fb-dps.finbangla-ui .fb-field > span,
#fb-dps.finbangla-ui .fb-field label{ font-weight:700; }

.finbangla-ui .fb-hint,
#fb-sanchaya.finbangla-ui .fb-hint,
#fb-dps.finbangla-ui .fb-hint{ opacity:.75; font-weight:500; }

/* Inputs/selects — handle both .fb-input class and plain elements inside .fb-field */
.finbangla-ui .fb-input,
#fb-sanchaya.finbangla-ui .fb-input,
#fb-dps.finbangla-ui .fb-input,
.finbangla-ui .fb-field input,
.finbangla-ui .fb-field select,
#fb-sanchaya.finbangla-ui .fb-field input,
#fb-sanchaya.finbangla-ui .fb-field select,
#fb-dps.finbangla-ui .fb-field input,
#fb-dps.finbangla-ui .fb-field select{
  padding: 10px 12px !important;
  border: 1px solid var(--fb-border-strong) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-weight: 600 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.3 !important;
  min-height: 44px !important;
}

/* Robust SELECT fix (prevents top-half clipping on desktop/mobile/tablet) */
.finbangla-ui select.fb-input,
#fb-sanchaya.finbangla-ui select.fb-input,
#fb-dps.finbangla-ui select.fb-input,
.finbangla-ui .fb-field select,
#fb-sanchaya.finbangla-ui .fb-field select,
#fb-dps.finbangla-ui .fb-field select{
  height: 44px !important;          /* unify box height */
  line-height: 1.3 !important;      /* ensure text has room */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  font-size: 16px !important;       /* avoids iOS zoom and clipping */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  background-image: none !important; /* keep native arrow to avoid misalign issues */
}

/* Focus ring for both inputs and selects */
.finbangla-ui .fb-input:focus,
#fb-sanchaya.finbangla-ui .fb-input:focus,
#fb-dps.finbangla-ui .fb-input:focus,
.finbangla-ui .fb-field input:focus,
.finbangla-ui .fb-field select:focus,
#fb-sanchaya.finbangla-ui .fb-field input:focus,
#fb-sanchaya.finbangla-ui .fb-field select:focus,
#fb-dps.finbangla-ui .fb-field input:focus,
#fb-dps.finbangla-ui .fb-field select:focus{
  outline: 2px solid #a5b4fc !important;
  border-color: var(--fb-brand-1) !important;
}

/* Actions + buttons */
.finbangla-ui .fb-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.finbangla-ui .fb-btn{
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #111;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.finbangla-ui .fb-btn:hover{ background:#f8fafc; }
.finbangla-ui .fb-btn:active{ transform: translateY(1px); }

.finbangla-ui .fb-btn-primary{
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--fb-brand-1);
  background: linear-gradient(135deg,var(--fb-brand-1),var(--fb-brand-2));
  color: #fff; cursor: pointer; font-weight: 800;
}
.finbangla-ui .fb-btn-success{
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--fb-success-2);
  background: linear-gradient(135deg,var(--fb-success-1),var(--fb-success-2));
  color: #fff; cursor: pointer; font-weight: 800;
}

/* Language pills */
.finbangla-ui .lang-pill{
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--fb-border);
  background: #f1f5f9;
  color: #0b1220;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(2,6,23,0.05);
}
.finbangla-ui .lang-pill.active{
  background: linear-gradient(135deg,var(--fb-brand-1),var(--fb-brand-2));
  color: #fff;
  border-color: var(--fb-brand-1);
  box-shadow: 0 2px 8px rgba(79,70,229,.25);
}

/* Result tiles */
.finbangla-ui .fb-result-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 900px){
  .finbangla-ui .fb-result-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .finbangla-ui .fb-result-grid{ grid-template-columns: 1fr; }
}
.finbangla-ui .fb-result-tile{
  background: var(--fb-bg);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius);
  padding: 10px;
}

/* Titles */
.finbangla-ui .fb-title{font-size: 22px;  margin:0; letter-spacing:.2px; line-height:1.25; word-break:break-word; }
@media (max-width:640px){ .finbangla-ui .fb-title{ font-size:20px; } }