.rokto-panel{background:#fff;border:1px solid #e9e9e9;border-radius:16px;padding:clamp(18px,3vw,34px);margin:24px auto;max-width:1050px;box-shadow:0 5px 28px #172b4210}.rokto-panel h2{margin-top:0}.rokto-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.rokto-form label,.rokto-filters label{font-weight:600;font-size:14px;display:grid;gap:7px}.rokto-form input:not([type=checkbox]),.rokto-form select,.rokto-form textarea,.rokto-filters input:not([type=checkbox]),.rokto-filters select{font:inherit;border:1px solid #d1d5db;border-radius:9px;padding:12px;width:100%;background:white;color:#172b42}.rokto-form label:has(textarea),.rokto-check{grid-column:1/-1}.rokto-check{display:flex!important;align-items:center;gap:9px!important;font-weight:400!important}.rokto-panel button{background:#be123c;border:0;border-radius:9px;padding:12px 22px;color:#fff;font-weight:700;cursor:pointer}.rokto-panel button:hover{background:#9f1239}.rokto-filters{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:15px}.rokto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.rokto-card{border:1px solid #e5e7eb;border-radius:14px;padding:20px}.rokto-card h3{margin:8px 0}.rokto-blood{display:inline-grid;place-items:center;color:white;background:#be123c;border-radius:12px;font-size:20px;font-weight:800;width:55px;height:55px}.rokto-alert{background:#f0fdf4;border-left:4px solid #16a34a;padding:14px;margin:12px 0}.rokto-note{color:#626b76;font-size:14px}@media(max-width:740px){.rokto-form,.rokto-filters,.rokto-grid{grid-template-columns:1fr}.rokto-form label:has(textarea),.rokto-check{grid-column:auto}.rokto-panel{margin:16px 0}}

.rokto-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.rokto-filters select,.rokto-form input{max-width:100%;width:100%}.rokto-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px;align-items:end}.rokto-filters label{display:block}.rokto-filters .rokto-check{align-self:center}

/* Tom Select: consistent styling for registration, blood requests and public search. */
.rokto-panel .ts-wrapper, .bh-contact-form .ts-wrapper {width:100%; min-width:0; max-width:100%;font-size:inherit;}
.rokto-panel .ts-wrapper .ts-control {min-height:48px; border:1px solid #d6dfeb; border-radius:10px; padding:10px 13px; background:#fff; box-shadow:none; color:#102840; align-items:center;}
.rokto-panel .ts-wrapper.focus .ts-control {border-color:#c11240;box-shadow:0 0 0 3px rgba(193,18,64,.11);}
.rokto-panel .ts-wrapper .ts-dropdown {border:1px solid #d6dfeb;border-radius:10px;box-shadow:0 14px 32px rgba(16,40,64,.13);overflow:hidden;z-index:100;}
.rokto-panel .ts-dropdown .option {padding:11px 14px;}
.rokto-panel .ts-dropdown .active {background:#fff0f3;color:#9d1236;}
.rokto-panel .ts-wrapper .ts-control > input {width:auto!important;max-width:100%;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;}
.rokto-panel .ts-wrapper.single .ts-control:after {border-color:#526276 transparent transparent;}
.rokto-filters > label, .rokto-form > label {min-width:0;}
@media (max-width:740px){.rokto-panel .ts-wrapper{width:100%;}}

/* BloodHop 2.0: accessible error feedback */
.rokto-alert{background:#f0fdf4!important;border:1px solid #bbf7d0!important;border-left:4px solid #16a34a!important;color:#14532d!important;border-radius:9px;padding:13px 16px;margin:14px 0 20px;line-height:1.5}
.rokto-alert--error{background:#fff1f2!important;border-color:#fecdd3!important;border-left-color:#dc2626!important;color:#991b1b!important}
/* Tom Select control and dropdown should never inherit form INPUT dimensions */
.rokto-panel .ts-wrapper{display:block;position:relative;width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.rokto-panel .ts-wrapper .ts-control{display:flex!important;align-items:center;flex-wrap:wrap;gap:4px;width:100%;min-height:48px!important;height:auto!important;padding:9px 13px!important;border:1px solid #d6dfeb!important;border-radius:10px!important;background:#fff!important;box-shadow:none!important;cursor:pointer}
.rokto-panel .ts-wrapper .ts-control > input, .rokto-panel form .ts-wrapper .ts-control > input:not([type=checkbox]){display:inline-block!important;position:static!important;flex:1 1 45px!important;min-width:35px!important;width:1px!important;height:auto!important;min-height:20px!important;max-width:100%!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;line-height:1.5!important;vertical-align:middle!important}
.rokto-panel .ts-wrapper .ts-control > .item{max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rokto-panel .ts-wrapper.focus .ts-control{border-color:#c11240!important;box-shadow:0 0 0 3px rgba(193,18,64,.12)!important}
.ts-dropdown.bloodhop-ts-dropdown{box-sizing:border-box;max-height:250px!important;overflow-y:auto!important;overflow-x:hidden!important;border:1px solid #d6dfeb!important;border-radius:10px!important;background:#fff!important;box-shadow:0 14px 32px rgba(16,40,64,.16)!important;z-index:10000!important}
.ts-dropdown.bloodhop-ts-dropdown .ts-dropdown-content{max-height:245px!important;overflow-y:auto!important;overscroll-behavior:contain}
.ts-dropdown.bloodhop-ts-dropdown .option{padding:10px 14px!important;line-height:1.5}
.ts-dropdown.bloodhop-ts-dropdown .option.active{background:#fff0f3!important;color:#9d1236!important}
.ts-dropdown.bloodhop-ts-dropdown .option.selected{background:#f4f6fa}
.rokto-form > label,.rokto-filters > label{min-width:0}


/* BloodHop v2.1: solid white Tom Select menus, including dropdowns portalled to body. */
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select,
.ts-dropdown.bloodhop-ts-dropdown,
.ts-dropdown .ts-dropdown-content,
.ts-dropdown .dropdown-input-wrap,
.ts-dropdown input.dropdown-input,
.ts-dropdown .create,
.ts-dropdown .no-results,
.ts-dropdown .optgroup,
.ts-dropdown .optgroup-header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
}
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select,
.ts-dropdown.bloodhop-ts-dropdown {
  isolation: isolate;
  border: 1px solid #d7e0eb !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(15,35,60,.12) !important;
  overflow: hidden !important;
  z-index: 100000 !important;
  color: #10243c !important;
}
.ts-dropdown .ts-dropdown-content {
  max-height: 240px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}
.ts-dropdown .option,
.ts-dropdown .optgroup .option {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #10243c !important;
  padding: 11px 14px !important;
  opacity: 1 !important;
}
.ts-dropdown .option.active,
.ts-dropdown .option:hover,
.ts-dropdown .option.selected.active {
  background: #fff0f4 !important;
  background-color: #fff0f4 !important;
  color: #c41242 !important;
}
.ts-dropdown .option.selected:not(.active) {
  background: #ffffff !important;
  color: #10243c !important;
}
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}
.ts-dropdown input.dropdown-input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #10243c !important;
  padding: 8px 12px !important;
}

/* BloodHop donor account management */
.bh-account-security {border-top:1px solid #e4eaf0;margin-top:2rem;padding-top:1.5rem}
.bh-account-security h3 {margin:0 0 .5rem}