/* Compact, unified style with orange CTA */
:root{
  --brand:#FF7A00; --brand-600:#E56E00;
  --text:#0B1220; --muted:#667085; --stroke:#E4E7EC;
}

.hm-picker-module{
  position:relative; margin:12px auto; border-radius:20px; overflow:hidden;
  color:var(--text); text-align:center;
}

.hm-picker-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(15,82,186,0.35), transparent 60%);
  background-size: cover;
  background-position: center;
  filter: saturate(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hm-picker-card{
  position:relative; overflow:hidden; backdrop-filter:blur(4px);
  background:rgba(255,255,255,.90); border:1px solid rgba(255,255,255,.6);
  border-radius:20px; box-shadow:0 10px 24px rgba(16,24,40,.14);
  padding:12px; display:grid; gap:10px;
}

.hm-picker-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 82, 186, 0.05) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(15, 82, 186, 0.04) 100%);
  pointer-events: none;
}

.hm-picker-tabs,.hm-picker-subtabs{
  display:inline-flex; width:100%; flex-wrap:wrap; gap:4px;
  background:#F2F4F7; padding:4px; border-radius:12px;
}

.hm-picker-tabs {
  width: auto;
  text-align: center;
}

.hm-picker-tab,.hm-picker-subtab{
  border:0; background:transparent; color:var(--muted);
  font-weight:700; font-size:14px; padding:8px 10px; border-radius:10px; cursor:pointer;
  transition:background-color .18s ease,color .18s ease, box-shadow .18s ease; flex:1;
}

.hm-picker-tab.is-active{ background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(16,24,40,.12); }
.hm-picker-subtab.is-active{ background:#FFF1E6; color:#A34700; box-shadow:none; }

.hm-picker-pane{
  display:none; background:#fff; border:1px solid var(--stroke);
  border-radius:12px; padding:10px; gap:4px; box-shadow:none;
}

.hm-picker-pane.is-active {
  display: grid;
}

.hm-picker-subpane {
  display: none;
  gap: clamp(18px, 3vw, 22px);
}

.hm-picker-subpane.is-active {
  display: grid;
}

.hm-picker-grid{ display:grid; gap:2px; }

.hm-picker-grid--pairs {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.hm-picker-grid--pairs > *:last-child:nth-child(odd) {
  grid-column: span 2;
}

.hm-picker-grid--disk {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hm-picker-field select,
.select2-container .select2-selection--single{
  height:36px !important; border-radius:6px !important;
  border:1px solid var(--stroke) !important; background:#fff !important;
  font-weight:700; font-size:15px; color:var(--text) !important;
  padding:0 38px 0 12px !important;
}


.hm-picker-field select {
  appearance: none;
  background-image: url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4 6L8 10L12 6" stroke="%2320395C" stroke-width="1.5" stroke-linecap="round"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.hm-picker-field select:focus,
.select2-container .select2-selection--single:focus{
  border-color:#FFB373 !important; box-shadow:0 0 0 4px rgba(255,122,0,.22) !important; outline:0;
}

.select2-container .select2-selection--single{ display:flex !important; align-items:center; height:46px !important;
  border-radius:12px !important; border:1px solid var(--stroke) !important; background: rgba(255, 255, 255, 0.85) !important; padding:0 12px !important; }
.select2-selection__clear{ display:none !important; }

.select2-container {
  width: 100% !important;
}


/* CTA */
.hm-picker-footer{ display:flex; justify-content:center; padding-top:2px; }
.hm-picker-submit{ width:100%; min-height:36px; border-radius:12px; border:0; color:#fff; font-weight:800; letter-spacing:.2px; text-transform:uppercase;
  background:linear-gradient(180deg,var(--brand),var(--brand-600)); box-shadow:0 8px 20px rgba(255,122,0,.26); }

/* Mobile tweaks */
@media (max-width:960px){ .hm-picker-grid--pairs{ grid-template-columns:1fr; } }

/* Desktop frosted panel (light) */
@media (min-width:1024px){
  .hm-picker-module{ width:100%; }
  /* Легка «хмарка» картки, без жорсткого фото‑оверлею */
  .hm-picker-card{
    max-width:1280px; margin-left:auto; margin-right:auto;
    backdrop-filter: blur(6px);
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.86))
                , radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.96), rgba(255,255,255,.82) 60%, rgba(255,255,255,.78) 100%);
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 28px 80px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.6);
    border-radius: 26px; padding: 16px; gap: 4px;
  }
  /* Прибираємо маску над фоном, щоб не було ефекту «фото на весь екран» */
  .hm-picker-bg{ filter:saturate(.95); }
  .hm-picker-bg::after{ content:none; }

  /* Таби/підтаби — світлі «пігулки», як на вашому скріні */
  .hm-picker-tabs,.hm-picker-subtabs{ width:auto; justify-content:center; background:#F2F4F7; padding:6px; border-radius:14px; gap:2px; }
  .hm-picker-tab,.hm-picker-subtab{ flex:0 0 auto; padding:10px 16px; border-radius:12px; font-weight:800; color:#1d2939; background:transparent; }
  .hm-picker-tab.is-active{ background:#fff; color:#0B1220; box-shadow:0 1px 2px rgba(16,24,40,.06); }
  .hm-picker-subtab.is-active{ background:#FFE7D1; color:#A34700; box-shadow:none; }

  /* Внутрішня панель і сітка: 2 колонки, великі поля */
  .hm-picker-pane{ background:#fff; border:1px solid #EDEFF3; border-radius:18px; padding:14px; gap:4px; box-shadow:none; }
  .hm-picker-grid--pairs{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; }
  .hm-picker-grid--pairs > *:last-child:nth-child(odd){ grid-column: 1 / -1; }

  /* Поля більші, «капсули» */
  .hm-picker-field select,
  .select2-container .select2-selection--single{ height:36px !important; border-radius:14px !important; }

  /* CTA широка, центрована, як на прикладі */
  .hm-picker-footer{ justify-content:center; }
  .hm-picker-submit{ width:min(820px, 100%); min-height:54px; border-radius:14px; box-shadow:0 16px 36px rgba(255,122,0,.22); }
}

.c365qp-alert {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px dashed rgba(15, 82, 186, 0.35);
  color: #0f52ba;
  font-size: 14px;
  line-height: 1.5;
}