:root{
  /* ===== Light (default) ===== */
  --mv-text: #111827;
  --mv-muted: #6b7280;

  --mv-border: rgba(17,24,39,.14);
  --mv-border2: rgba(17,24,39,.18);

  --mv-surface: #ffffff;
  --mv-surface2: #f7f8fb;

  --mv-field: #ffffff;
  --mv-field-hover: #fbfbfd;

  --mv-panel: #f2f3f6;

  --mv-accent: rgba(255,140,0,.95);
  --mv-accent-soft: rgba(255,140,0,.22);

  --mv-shadow: 0 10px 30px rgba(17,24,39,.10);
  --mv-shadow2: 0 18px 50px rgba(17,24,39,.14);
}

/* (Optional) dark-mode auto support */
@media (prefers-color-scheme: dark){
  :root{
    --mv-text: rgba(255,255,255,.92);
    --mv-muted: rgba(255,255,255,.70);

    --mv-border: rgba(255,255,255,.12);
    --mv-border2: rgba(255,255,255,.18);

    --mv-surface: rgba(255,255,255,.05);
    --mv-surface2: rgba(255,255,255,.03);

    --mv-field: rgba(0,0,0,.18);
    --mv-field-hover: rgba(0,0,0,.22);

    --mv-panel: rgba(0,0,0,.10);

    --mv-accent: rgba(255,140,0,.90);
    --mv-accent-soft: rgba(255,140,0,.18);

    --mv-shadow: 0 10px 30px rgba(0,0,0,.22);
    --mv-shadow2: 0 30px 80px rgba(0,0,0,.55);
  }
}

/* ========== Base reset inside card (theme-safe) ========== */
.mvimo-card, .mvimo-card *{
  box-sizing: border-box !important;
}

.mvimo-card{
  margin: 10px 5px 10px 5px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--mv-border);
  background: linear-gradient(180deg, var(--mv-surface), var(--mv-surface2));
  box-shadow: 0 0px 3px rgba(0, 0, 0, .22);
  color: var(--mv-text);
}

/* Head */
.mvimo-head{ text-align:center; margin-bottom: 12px; }
.mvimo-title{ font-weight: 900; font-size: 14px; letter-spacing:.2px; color: var(--mv-text); }
.mvimo-sub{ margin-top:6px; font-size:12px; color: var(--mv-muted); }

.mvimo-group{ margin-top: 10px; }

.mvimo-label{
  display:block;
  font-weight: 700;
  font-size: 14px;
  margin: 10px 0 8px;
  letter-spacing: .2px;
  color: black;
}
.mvimo-req{ color: var(--mv-accent); font-weight: 900; }

/* ========== Fields (fix contrast + alignment) ========== */
.mvimo-select,
.mvimo-input,
.mvimo-codebtn,
.mvimo-modal-searchinp{
  -webkit-appearance: none !important;
  appearance: none !important;
  font: inherit !important;
  height: 44px !important;
  min-height: 44px !important;
  line-height: 1.2 !important;
  border-radius: 12px !important;
  outline: none !important;
}

/* Inputs + Select */
.mvimo-select,
.mvimo-input,
.mvimo-modal-searchinp{
  width: 100%;
  padding: 0 12px !important;
  border: 1px solid var(--mv-border2) !important;
  background: var(--mv-field) !important;
  color: rgb(0 0 0 / 92%) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.mvimo-select:hover,
.mvimo-input:hover,
.mvimo-modal-searchinp:hover{
  background: var(--mv-field-hover) !important;
}

.mvimo-select:focus,
.mvimo-input:focus,
.mvimo-modal-searchinp:focus{
  border-color: rgba(255,140,0,.55) !important;
  box-shadow: 0 0 0 3px var(--mv-accent-soft) !important;
  background: var(--mv-field) !important; /* ✅ light stays light */
}

/* ✅ Fix select dropdown options (Windows/Chrome) */
.mvimo-select option,
.mvimo-select optgroup{
  background: #ffffff;
  color: #111827;
}
@media (prefers-color-scheme: dark){
  .mvimo-select option,
  .mvimo-select optgroup{
    background: #0b0f18;
    color: #ffffff;
  }
}

/* ========== Row: country code + phone (perfect align) ========== */
.mvimo-row{
  display:flex !important;
  gap:12px !important;
  align-items: stretch !important;
  flex-wrap:nowrap !important;
}

.mvimo-codewrap{
  position: relative;
  flex: 0 0 132px;
  min-width: 120px;
}

/* Country code button - reset theme button look */
.mvimo-codebtn{
  width: 100% !important;
  padding: 0 10px !important;
  border: 1px solid var(--mv-border2) !important;
  background: var(--mv-field) !important;
  color: var(--mv-text) !important;
  cursor:pointer !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;

  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mvimo-codebtn:hover{ background: var(--mv-field-hover) !important; }
.mvimo-codebtn:focus{
  border-color: rgba(255,140,0,.55) !important;
  box-shadow: 0 0 0 3px var(--mv-accent-soft) !important;
}

.mvimo-codeflag{
  width: 22px !important;
  flex: 0 0 22px !important;
  text-align:center !important;
  font-size: 16px !important;
}
.mvimo-codedial{
  font-weight: 900 !important;
  font-size: 13px !important;
  flex: 1 1 auto !important;
  text-align:center !important;
  white-space: nowrap !important;
	color: black;
}
.mvimo-codecaret{
  opacity:.65 !important;
  flex: 0 0 auto !important;
}

/* Phone input takes remaining width */
.mvimo-phone{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Phone number formatting */
.mvimo-input[name="mv_imo_number"]{
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

/* Help text */
.mvimo-help{
  font-size: 12px;
  color: rgb(20 20 20 / 70%);
  margin-top: 10px;
  line-height: 1.45;
}

/* ========== Panels show/hide ========== */
.mvimo-panel{
  border-radius: 14px;
  border: 1px solid var(--mv-border);
  background: var(--mv-panel);
  padding: 0 14px;
  margin-top: 10px;

  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .28s ease, opacity .22s ease, transform .22s ease, padding .22s ease;
}
.mvimo-panel.is-open{
  padding: 14px;
  max-height: 360px;
  opacity: 1;
  transform: translateY(0);
}

/* Error box */
.mvimo-error{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(220,38,38,.10);
  border: 1px solid rgba(220,38,38,.28);
  color: #991b1b;
  font-size: 13px;
}
@media (prefers-color-scheme: dark){
  .mvimo-error{
    background: rgba(220,38,38,.14);
    border: 1px solid rgba(220,38,38,.40);
    color: #020202;
  }
}

/* ========== Modal ========== */
html.mvimo-lock, body.mvimo-lock{ overflow:hidden !important; }
.mvimo-modal[hidden]{ display:none !important; }

.mvimo-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
}

.mvimo-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

/* Light modal */
.mvimo-modal-box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(560px, calc(100% - 24px));
  max-height: min(78vh, 680px);

  border-radius: 18px;
  border: 1px solid var(--mv-border);
  background: #ffffff;
  box-shadow: var(--mv-shadow2);

  overflow: hidden;
  display:flex;
  flex-direction: column;

  color: #111827;
}
@media (prefers-color-scheme: dark){
  .mvimo-modal-box{
    background: rgba(26,30,43,.98);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.92);
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
  }
}

.mvimo-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
@media (prefers-color-scheme: dark){
  .mvimo-modal-head{ border-bottom: 1px solid rgba(255,255,255,.08); }
}

.mvimo-modal-title{
  font-weight: 900;
  letter-spacing: .2px;
}

.mvimo-modal-close{
  border: 1px solid rgba(17,24,39,.14);
  background: rgba(17,24,39,.04);
  color: inherit;
  border-radius: 12px;
  width: 40px;
  height: 36px;
  cursor: pointer;
}
.mvimo-modal-close:hover{
  background: rgba(255,140,0,.10);
  border-color: rgba(255,140,0,.35);
}
@media (prefers-color-scheme: dark){
  .mvimo-modal-close{
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.18);
  }
}

.mvimo-modal-search{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
@media (prefers-color-scheme: dark){
  .mvimo-modal-search{ border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* Search input is already styled above via .mvimo-modal-searchinp */
.mvimo-modal-searchinp{
  border: 1px solid rgba(17,24,39,.14) !important;
  background: #ffffff !important;
}
@media (prefers-color-scheme: dark){
  .mvimo-modal-searchinp{
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(0,0,0,.20) !important;
  }
}

.mvimo-modal-list{
  overflow:auto;
  padding: 6px 0;
  max-height: calc(78vh - 120px);
}

/* Scrollbar */
.mvimo-modal-list::-webkit-scrollbar{ width: 10px; }
.mvimo-modal-list::-webkit-scrollbar-thumb{
  background: rgba(17,24,39,.12);
  border-radius: 10px;
}
.mvimo-modal-list::-webkit-scrollbar-thumb:hover{ background: rgba(17,24,39,.20); }
@media (prefers-color-scheme: dark){
  .mvimo-modal-list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); }
  .mvimo-modal-list::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.20); }
}

.mvimo-modal-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  cursor:pointer;
  border-bottom: 1px solid rgba(17,24,39,.06);
}
.mvimo-modal-item:last-child{ border-bottom:none; }
.mvimo-modal-item:hover{ background: rgba(255,140,0,.08); }
@media (prefers-color-scheme: dark){
  .mvimo-modal-item{ border-bottom: 1px solid rgba(255,255,255,.06); }
}

.mvimo-modal-left{
  display:flex;
  gap:10px;
  align-items:center;
  min-width: 0;
}
.mvimo-modal-flag{ width: 22px; text-align:center; }
.mvimo-modal-name{
  font-weight: 800;
  font-size: 13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mvimo-modal-iso{ font-size: 12px; opacity:.75; }
.mvimo-modal-dial{ font-weight: 900; }

/* ========== Mobile ========== */
@media (max-width: 520px){
  .mvimo-card{ padding: 14px; }

  .mvimo-codewrap{
    flex: 0 0 112px;
    min-width: 104px;
  }
  .mvimo-codecaret{ display:none; }

  /* Fullscreen modal */
  .mvimo-modal-box{
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .mvimo-modal-list{
    max-height: calc(100vh - 120px);
  }
}


/* ===== Gap fix: country code & phone input spacing ===== */
.mvimo-card .mvimo-row{
  gap: 16px !important;           /* main gap */
}

.mvimo-card .mvimo-codewrap{
  margin-right: 0 !important;     /* ensure no weird collapse */
}

/* Fallback for themes that break flex-gap */
.mvimo-card .mvimo-codewrap + .mvimo-phone{
  margin-left: 16px !important;   /* fallback gap */
}

/* Optional: make phone a bit more spacious */
@media (max-width: 520px){
  .mvimo-card .mvimo-row{ gap: 12px !important; }
  .mvimo-card .mvimo-codewrap + .mvimo-phone{ margin-left: 12px !important; }
}