/* Jubaly Reseller Connect — MV IMO Delivery Fields UI
 * Visual/behavioral parity with the hub's own "MV IMO Delivery Fields"
 * product page widget (mv-imo-delivery-modal/assets/mv-imo.css), renamed to
 * the jrc-mvimo-* namespace so it never collides with any theme or plugin
 * class already used on the reseller's storefront.
 */
:root{
  --jrc-mv-border: rgba(255,255,255,.12);
  --jrc-mv-border2: rgba(255,255,255,.18);
  --jrc-mv-dim: rgba(255,255,255,.72);
  --jrc-mv-accent: rgba(255,140,0,.9);
  --jrc-mv-accent-soft: rgba(255,140,0,.18);
}

/* Force border-box everywhere inside this widget so padding/border never
 * add on top of a flex-computed width — some storefront themes don't reset
 * this globally, and without it a narrow "Order Information" sidebar column
 * can squeeze the phone number input down to just a few visible characters. */
.jrc-mvimo-card, .jrc-mvimo-card *,
.jrc-mvimo-modal, .jrc-mvimo-modal *{
  box-sizing: border-box;
}

/* ---------------- Card ---------------- */
/* Deliberately NO border/background/shadow here. The storefront theme
 * already wraps this whole widget in its own "Order Information" box, and
 * the "Enter IMO ID/Number" panel below has its own box too — giving this
 * wrapper a third box of its own nested inside those two reads as a
 * redundant third layer. Two boxes (the theme's own + the inner panel) is
 * the intended look, so this is just a plain, unstyled layout container. */
.jrc-mvimo-card{
  margin: 16px 0 18px;
  color: inherit;
}

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

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

/* Explicit white — not `inherit` — for every field's typed-in text. Some
 * storefront themes set their own global color on bare input/select
 * elements (often a dark, light-mode color) with enough specificity to beat
 * an inherited value; without forcing it here, the text you actually type
 * can end up nearly invisible against this widget's dark background. */
.jrc-mvimo-select,
.jrc-mvimo-input{
  width: 100%;
  border-radius: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: #fff !important;
  caret-color: #fff;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.jrc-mvimo-input::placeholder{
  color: rgba(255,255,255,.45) !important;
  opacity: 1;
}

.jrc-mvimo-select:focus,
.jrc-mvimo-input:focus{
  border-color: rgba(255,140,0,.55);
  box-shadow: 0 0 0 3px var(--jrc-mv-accent-soft);
  background: rgba(0,0,0,.22);
}

.jrc-mvimo-select{
  color: #fff;
  background: rgba(0,0,0,.18);
}
.jrc-mvimo-select option,
.jrc-mvimo-select optgroup{
  background: #0b0f18;
  color: #ffffff;
}

/* Country-code button on its own full-width row, phone number input on its
 * own full-width row directly below — stacked, not side-by-side. This is a
 * deliberate layout choice (matching the reference design), and as a side
 * effect it is immune to the "sidebar too narrow, phone input squeezed to a
 * sliver" problem a side-by-side row would reintroduce on a tight column. */
.jrc-mvimo-row{
  display:flex;
  flex-direction: column;
  gap:10px;
}

.jrc-mvimo-codewrap{
  position: relative;
  width: 100%;
}

.jrc-mvimo-codebtn{
  width: 100%;
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: #fff !important;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.jrc-mvimo-codebtn:focus{
  outline:none;
  border-color: rgba(255,140,0,.55);
  box-shadow: 0 0 0 3px var(--jrc-mv-accent-soft);
}

.jrc-mvimo-codeflag{ flex: 0 0 auto; width: 22px; text-align:center; }
.jrc-mvimo-codedial{ flex: 1 1 auto; text-align:center; font-weight: 900; font-size: 15px; letter-spacing:.2px; }
.jrc-mvimo-codecaret{ flex: 0 0 auto; opacity:.8; }

.jrc-mvimo-phone{
  width: 100%;
}

.jrc-mvimo-input[name="jrc_field_mv_imo_number"]{
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  text-overflow: clip;
  overflow: visible;
}

.jrc-mvimo-help{
  font-size: 12px;
  color: var(--jrc-mv-dim);
  margin-top: 10px;
  line-height: 1.45;
}

/* ---------------- Panels show/hide ---------------- */
.jrc-mvimo-panel{
  border-radius: 14px;
  border: 1px solid var(--jrc-mv-border);
  background: rgba(0,0,0,.10);
  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;
}
.jrc-mvimo-panel.is-open{
  padding: 14px;
  max-height: 360px;
  opacity: 1;
  transform: translateY(0);
}

.jrc-mvimo-error{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(220,38,38,.14);
  border: 1px solid rgba(220,38,38,.40);
  color: #ffd2d2;
  font-size: 13px;
}

/* ---------------- Modal ---------------- */
html.jrc-mvimo-lock, body.jrc-mvimo-lock{ overflow:hidden !important; }

.jrc-mvimo-modal[hidden]{ display:none !important; }

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

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

.jrc-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 rgba(255,255,255,.14);
  background: rgba(12,14,20,.98);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  color: #fff;

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

.jrc-mvimo-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

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

.jrc-mvimo-modal-close{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: #fff !important;
  border-radius: 12px;
  width: 40px;
  height: 36px;
  cursor: pointer;
}
.jrc-mvimo-modal-close:hover{
  background: rgba(255,140,0,.10);
  border-color: rgba(255,140,0,.35);
}

.jrc-mvimo-modal-search{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.jrc-mvimo-modal-searchinp{
  width: 100%;
  border-radius: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: #fff !important;
  caret-color: #fff;
  outline: none;
}
.jrc-mvimo-modal-searchinp::placeholder{
  color: rgba(255,255,255,.45) !important;
  opacity: 1;
}
.jrc-mvimo-modal-searchinp:focus{
  border-color: rgba(255,140,0,.55);
  box-shadow: 0 0 0 3px rgba(255,140,0,.18);
}

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

.jrc-mvimo-modal-list::-webkit-scrollbar{ width: 10px; }
.jrc-mvimo-modal-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 10px;
}
.jrc-mvimo-modal-list::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.20);
}

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

.jrc-mvimo-modal-left{
  display:flex;
  gap:10px;
  align-items:center;
  min-width: 0;
}

.jrc-mvimo-modal-flag{ width: 22px; text-align:center; }
.jrc-mvimo-modal-name{
  font-weight: 800;
  font-size: 13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.jrc-mvimo-modal-iso{ font-size: 12px; opacity:.75; }
.jrc-mvimo-modal-dial{ font-weight: 900; }

/* ---------------- WP-admin context override ----------------
 * The "Fix info & resend" box (JRC_Orders::render_metabox()) renders this
 * same widget inside a plain white WP-admin metabox, not the dark
 * storefront theme it was designed for. Without this, WP-admin's own
 * default input background (white) can win over the dark background this
 * widget normally sets, while the `color: #fff !important` rules above
 * still force the typed text white — leaving white text on a white field,
 * unreadable. `.jrc-mvimo-admin` wraps the widget only in that admin
 * context (see render_metabox()) and re-skins every control to a light,
 * WP-admin-appropriate palette instead. It sets no border/background/shadow
 * on itself, so it adds no extra visible "layer" around the widget.
 */
.jrc-mvimo-admin,
.jrc-mvimo-admin .jrc-mvimo-card{
  color: #1d2327 !important;
}
.jrc-mvimo-admin .jrc-mvimo-label{ color:#1d2327 !important; }
.jrc-mvimo-admin .jrc-mvimo-help{ color:#646970 !important; }
.jrc-mvimo-admin .jrc-mvimo-req{ color:#d63638 !important; }

.jrc-mvimo-admin .jrc-mvimo-select,
.jrc-mvimo-admin .jrc-mvimo-input,
.jrc-mvimo-admin .jrc-mvimo-codebtn{
  background: #fff !important;
  border: 1px solid #8c8f94;
  color: #1d2327 !important;
  caret-color: #1d2327;
}
.jrc-mvimo-admin .jrc-mvimo-input::placeholder{
  color: #8c8f94 !important;
  opacity: 1;
}
.jrc-mvimo-admin .jrc-mvimo-select:focus,
.jrc-mvimo-admin .jrc-mvimo-input:focus,
.jrc-mvimo-admin .jrc-mvimo-codebtn:focus{
  border-color: #2271b1;
  box-shadow: 0 0 0 1px #2271b1;
  background: #fff !important;
}
.jrc-mvimo-admin .jrc-mvimo-select option,
.jrc-mvimo-admin .jrc-mvimo-select optgroup{
  background: #fff !important;
  color: #1d2327 !important;
}
.jrc-mvimo-admin .jrc-mvimo-panel{
  background: #f6f7f7 !important;
  border-color: #dcdcde !important;
}
.jrc-mvimo-admin .jrc-mvimo-error{
  background: #fcf0f1 !important;
  border: 1px solid #d63638 !important;
  color: #8a2424 !important;
}

/* The searchable country-code modal is a floating overlay, so it normally
 * keeps its own dark styling regardless of context (it draws its own dark
 * box, it isn't sitting on the surrounding page's background) — but the
 * <input> INSIDE it is still a real form control, and WP-admin's default
 * input styling (white background) can win over that input's own dark
 * rgba() background the same way it did for the fields above, leaving
 * forced-white search text on a white field. Re-skin the modal to match
 * the rest of the admin box (light, WP-admin-appropriate) so every piece
 * of text inside it — title, search box, country rows — stays legible. */
.jrc-mvimo-admin .jrc-mvimo-modal-box{
  background: #fff !important;
  color: #1d2327 !important;
  border-color: #dcdcde !important;
}
.jrc-mvimo-admin .jrc-mvimo-modal-head{
  border-bottom-color: #dcdcde !important;
}
.jrc-mvimo-admin .jrc-mvimo-modal-title{ color:#1d2327 !important; }
.jrc-mvimo-admin .jrc-mvimo-modal-close{
  background: #f6f7f7 !important;
  border-color: #8c8f94 !important;
  color: #1d2327 !important;
}
.jrc-mvimo-admin .jrc-mvimo-modal-search{
  border-bottom-color: #dcdcde !important;
}
.jrc-mvimo-admin .jrc-mvimo-modal-searchinp{
  background: #fff !important;
  color: #1d2327 !important;
  caret-color: #1d2327 !important;
  border-color: #8c8f94 !important;
}
.jrc-mvimo-admin .jrc-mvimo-modal-searchinp::placeholder{
  color: #8c8f94 !important;
  opacity: 1;
}
.jrc-mvimo-admin .jrc-mvimo-modal-item{
  border-bottom-color: #f0f0f1 !important;
}
.jrc-mvimo-admin .jrc-mvimo-modal-item:hover{
  background: #f6f7f7 !important;
}
.jrc-mvimo-admin .jrc-mvimo-modal-name{ color:#1d2327 !important; }
.jrc-mvimo-admin .jrc-mvimo-modal-iso{ color:#646970 !important; }
.jrc-mvimo-admin .jrc-mvimo-modal-dial{ color:#1d2327 !important; }

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

  .jrc-mvimo-codebtn{
    padding: 12px 14px;
    gap: 8px;
  }

  .jrc-mvimo-modal-box{
    left: 0;
    top: 0;
    transform: none;

    width: 100%;
    height: 100%;
    max-height: 100vh;

    border-radius: 0;
  }

  .jrc-mvimo-modal-list{
    max-height: calc(100vh - 120px);
  }
}