/* mv-frontend.css — precise dashboard + right-side popup styling */
/* ---------- Measurement Vault: Profile Button Card ---------- */
/* Add to: front-end/assets/css/mv-frontend.css */

.mv-image-wrap {
    width: 100%;
    height: 320px;
    background: #cfe9ff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
    border: 2px solid rgba(0, 0, 0, 0.02);
}

.mv-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills perfect, no space */
    display: block;
}


.mv-no-data {
    background: #f4f7fb;
    border: 1px solid #d7e2ef;
    padding: 25px 20px;
    border-radius: 10px;
    text-align: center;
    color: #1e3a5f;
    font-family: "Inter", "Roboto", sans-serif;
    margin: 25px 0;
    animation: fadeIn 0.35s ease;
}

.mv-no-data-icon {
    font-size: 45px;
    margin-bottom: 10px;
    opacity: 0.85;
}

.mv-no-data-text {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Smooth entry animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}


.mv-review-submit-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;              /* space between buttons */
    margin-top: 25px;       /* space above the whole section */
}

.mv-review-submit-wrap .mv-btn {
    padding: 12px 28px;     /* better button padding */
    font-size: 16px;
    border-radius: 6px;
}

/* Optional: make submit button visually stronger */
.mv-submit-large {
    font-weight: 600;
}


/* Make sure the container can hold the overlay */
.mv-panel {
    position: relative;
}

/* Overlay only inside the div */
.mv-loading-overlay {
    position: absolute;   /* important: not full page */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    backdrop-filter: blur(3px);  /* soft blur effect */
}

/* Inner wrapper */
.mv-loading-inner {
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
}

/* Stylish spinning loader */
.mv-spinner {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 5px solid #c7d4e5;     /* outer light ring */
    border-top-color: #1e3a5f;     /* main brand color */
    border-right-color: #3a536e;   /* accent */
    animation: spin 0.9s linear infinite;
    margin: 0 auto 12px;
}

/* Loading text styling */
.mv-loading-text {
    font-size: 17px;
    font-weight: 600;
    color: #1e3a5f;
    font-family: "Inter", "Roboto", sans-serif;
    letter-spacing: 0.3px;
    animation: pulseText 1.5s ease-in-out infinite;
}

/* Spin animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Fade in effect */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

/* Gentle pulsing for text */
@keyframes pulseText {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}


.mv-standard-msg {
    margin-top: 10px;
    font-size: 18px;
    color: #000000;
    text-align: center;           
    padding: 8px 10px;            
    font-weight: 500;
}

.mv-standard-msg .mv-standard-field-name,
.mv-standard-msg .mv-standard-value {
    color: #1e3a5f;               
    font-weight: 700;
}


.mv-popup-footer {
    padding: 12px;
    border-top: 1px solid #eee;
    margin-top: 9px;
    text-align: center;
    font-weight: 600; /* bold */
    color: #000; /* Black text */
    font-size: 16px; /* Increased text size */
}

.mv-popup-footer a {
    color: #1e3a5f;
    font-weight: 700;
    text-decoration: underline;
}

.mv-popup-footer a:hover {
    opacity: 0.8;
}


    /* Scoped styles for the profile box to avoid breaking other UI */
        .mv-profile-box .mv-profile-card {
            padding: 18px;
            border: 1px solid #e6e6e6;
            background: #ffffff;
            max-width: 380px;
            font-family: inherit;
            color: #1f2937;
            box-shadow: 0 0 0 rgba(0,0,0,0); /* keep layout stable */
        }

        .mv-profile-box label.mv-size-label {
            display:block;
            font-weight:700;
            letter-spacing:0.01em;
            margin-bottom:8px;
            text-transform:uppercase;
            font-size:13px;
            color:#222;
        }

        .mv-profile-box select#mv-size-method {
            width:100%;
            padding:10px 12px;
            border:1px solid #ddd;
            border-radius:2px;
            background:#fff;
            margin-bottom:14px;
            font-size:14px;
        }

        .mv-profile-box .mv-cta-wrap {
            display:block;
            margin-bottom:8px;
        }

        .mv-profile-box .mv-cta {
            display:block;
            width:100%;
            text-align:center;
            background:#0b1220; /* dark navy like your screenshot */
            color:#fff;
            border:0;
            padding:12px 14px;
            border-radius:2px;
            font-weight:600;
            font-size:14px;
            cursor:pointer;
            text-transform:uppercase;
            letter-spacing:0.02em;
        }

        .mv-profile-box .mv-legal {
            margin-top:12px;
            font-size:12px;
            line-height:1.45;
            color:#5b6268; /* muted grey */
        }

        .mv-profile-box .mv-legal a {
            color: #0b1220;
            text-decoration: underline;
        }

        /* responsive: do not force width on small screens */
        @media (max-width:480px) {
            .mv-profile-box .mv-profile-card { max-width: 100%; padding:14px; }
        }



.mv-video-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
}

.mv-video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    margin: 5% auto;
    background: #000;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

.mv-video-modal iframe {
    width: 100%;
    height: 500px;
    display: block;
}

.mv-video-close {
    position: absolute;
    top: -35px;
    right: 0;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
}
@media (max-width: 768px) {
    .mv-video-modal iframe {
        height: 300px;
    }
}





/* theme */
:root{
  --navy:#0f1724;
  --muted:#9aa0a6;
  --panel-width:50%; /* exact popup width to match screenshot */
  font-family: "Poppins", "Montserrat", Arial, sans-serif;
}

.mv-step-content h2 {
    text-align: center;
    font-weight: 800;
}

/* Make center card the positioned parent for absolute placement */
.mv-profile-center {
  position: relative; /* added */
  flex: 1 1 880px;
  max-width: 1100px;
  text-align: center;
  margin: 0 auto;
  background: #dcdcdc;
}

/* Re-style the controls to sit top-right inside the card */
.mv-profile-right {
  position: absolute;   /* moved from flow into absolute inside .mv-profile-center */
  top: 22px;
  right: 22px;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  text-align: right;
  background: transparent; /* keep transparent, adjust if you want a box */
  z-index: 5;
}

/* Smaller button sizing to match the compact style */
.mv-profile-right .mv-btn-primary,
.mv-profile-right .mv-btn-secondary {
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
}

/* On small screens, put controls under the card (fallback, so they remain usable) */
@media (max-width: 920px) {
  .mv-profile-right {
    position: static;     /* flow with document */
    width: 100%;
    align-items: center;
    text-align: center;
    margin-top: 18px;
    order: 3;
  }
}


/* root */
#mv-frontend-root { box-sizing:border-box; }

/* ========== DASHBOARD ========= */
.mv-dashboard-wrap { max-width:1200px; margin: 0 auto; background: transparent; padding: 0 12px; }

.mv-dashboard-top { background:#fff; }
.mv-hero { background: var(--navy); padding: 22px 16px; color:#fff; text-align:center; }
.mv-hero h1 { margin:0; font-size:34px; letter-spacing:2px; font-weight:800; }

.mv-shortcuts { display:flex; justify-content:space-between; gap:36px; padding:28px 36px; background:#fff; }
.mv-shortcut { text-align:center; width:120px; }
.mv-icon { width:64px; height:64px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:30px; }
.mv-label { font-size:12px; font-weight:700; color:#111; }

/* profile area */
.mv-logo-circle { width:130px; height:130px; margin:2px auto 8px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(12,16,24,0.05); border:6px solid rgba(16,20,30,0.03); }
.mv-logo-circle img { max-width:100%; height:auto; }
.mv-size-title { font-weight:900; letter-spacing:1px; margin:6px 0 10px; font-size:18px; }

/* EXACT grid: only fields visible in screenshot */
.mv-size-grid { width:100%; border-top:3px solid #111827; background:#fff; padding-top:8px; }
.mv-grid-row { display:flex; gap:12px; padding:6px 10px; border-bottom:1px solid rgba(0,0,0,0.03); }
.mv-grid-cell { flex:1; display:flex; align-items:center; justify-content:space-between; padding:10px 8px; }
.mv-cell-label { text-align:left; color:#222; font-weight:700; width:42%; }
.mv-cell-input input { width:120px; padding:8px; border:2px solid #111827; background:#fff; text-align:center; font-weight:800; }

/* right area */
.mv-profile-status { font-size:13px; color:#222; margin-bottom:12px; }
.mv-profile-controls { display:flex; flex-direction:column; gap:12px; align-items:flex-end; }

/* buttons */
.mv-btn-primary { background:var(--navy); color:#fff; padding:10px 16px; border:none; font-weight:900; text-transform:uppercase; }
.mv-btn-secondary { background:#dcdcdc; color:#222; padding:10px 16px; border:none; font-weight:900; }

/* ========== RIGHT-SIDE POPUP (single column) ========== */
.mv-overlay {
  position:fixed; inset:0; z-index:9999; background: rgba(0,0,0,0.45); display:none;
}

/* single-column panel aligned to right, exact width and full height */
.mv-panel {
  position:absolute; right:0; top:0; height:100vh; width:var(--panel-width);
  background:#f8f7f6; box-shadow: -32px 0 80px rgba(2,8,23,0.55); overflow:auto;
  display:flex; flex-direction:column; align-items:center; padding:36px 28px;
}

/* big logo and title like screenshot */
.mv-circle-logo { width:160px; height:160px; margin-top:12px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; box-shadow:0 12px 36px rgba(12,16,24,0.06); border:8px solid rgba(16,20,30,0.03); }
.mv-circle-logo img { max-width:140px; height:auto; display:block; }

.mv-panel-title { font-weight:900; text-align:center; margin:18px 0 8px; font-size:28px; line-height:1.05; }

/* small paragraph */
.mv-splash-sub { font-size:13px; color:var(--muted); text-align:center; max-width:340px; margin-bottom:22px; }

/* CTA buttons stacked like screenshot */
.mv-left-ctas { display:flex; flex-direction:column; gap:12px; width:100%; align-items:center; }
.mv-left-cta { width:180px; padding:10px 14px; background:var(--navy); color:#fff; border:none; font-weight:800; }

/* close button (top right inside panel) */
.mv-close { position: absolute; right:12px; top:10px; font-size:22px; border:none; background:transparent; cursor:pointer; color:#111; }

/* steps top (small circles) */
.mv-steps-top { display:flex; gap:14px; margin-top:22px; margin-bottom:8px; }
.mv-step { width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#cfcfcf;color:#fff;font-weight:900; }
.mv-step-active { background:var(--navy); }

/* wizard area content (stacked below) */
.mv-wizard { width:100%; margin-top:8px; padding-bottom:36px; }

/* headings */
.mv-wizard h2 { font-size:20px; font-weight:900; margin:6px 8px 12px; text-align:center; }

/* form rows — matching the boxed inputs in screenshot */
.mv-field-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 8px; border-bottom:1px solid rgba(0,0,0,0.02); width:100%; }
.mv-field-row label { width:60%; font-weight:700; text-align:left; padding-left:8px; }
.mv-input { width:110px; padding:12px; border:2px solid #111827; background:#fff; font-weight:800; text-align:center; }

/* select styling so it looks boxed */
select.mv-input { -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:26px; background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%), linear-gradient(to right, #ddd, #ddd); background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 6px 6px, 6px 6px, 1px 1.5em; background-repeat: no-repeat; }

/* measurement list scroller */
.mv-measurements-grid, .mv-review-grid { max-height: 340px; overflow:auto; padding-right:8px; }

/* actions area */
.mv-actions { display:flex; gap:12px; justify-content:center; margin-top:18px; width:100%; }

/* primary button */
.mv-btn.mv-next, .mv-btn.mv-primary { background:var(--navy); color:#fff; padding:10px 26px; border:none; font-weight:900; }

/* ensure panel contents not obscured behind viewport bottom */
.mv-panel { padding-bottom: 48px; }

/* small responsive rule */
@media (max-width: 1024px) {
  .mv-panel { width: 92vw; }
}

/* --- Neck + Body Type specific styles --- */

.mv-illustration-wrap { display:flex; justify-content:center; margin: 10px 0 18px; }
.mv-illustration { width: 260px; height: auto; display:block; box-shadow: none; border-radius: 2px; }

/* Large framed input (centered) */
.mv-large-input-wrap { display:flex; justify-content:center; margin-bottom:10px; }
.mv-large-input {
  width: 220px;
  height: 56px;
  font-size: 32px;
  font-weight:900;
  text-align:center;
  border: 2px solid #111827;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
}

/* Recommended line below the large input */
.mv-recommended-large { text-align:center; font-size:13px; color:#666; margin-top:12px; }

/* Body type label */
.mv-bodytype-label-wrap { display:flex; justify-content:center; margin:10px 0 16px; }
.mv-bodytype-label {
  display:inline-block;
  padding: 12px 20px;
  border: 2px solid #111827;
  font-weight:900;
  letter-spacing:1px;
  text-align:center;
  background:#fff;
}

/* ensure avatar / illustration and inputs collapse nicely on small screens */
@media (max-width: 480px) {
  .mv-illustration { width: 210px; }
  .mv-large-input { width: 180px; height:48px; font-size:26px; }
}


/* --- Upload & Review styling (step 4 & 5) --- */

/* Upload rows */
.mv-upload-row { display:flex; align-items:center; justify-content:flex-start; gap:14px; padding:18px 4px; border-bottom:1px solid rgba(0,0,0,0.03); }
.mv-upload-left { width:130px; display:flex; align-items:center; justify-content:flex-start; }
.mv-upload-right { display:flex; align-items:center; gap:10px; flex:1; }

/* file name and status */
.mv-file-name { color:#222; font-weight:700; font-size:14px; }
.mv-file-status { color: #28a745; font-weight:900; margin-left:6px; }
.mv-file-status--hidden { display:none; }

/* style SELECT button to match screenshot small outline box */
.mv-file-select { padding:10px 14px; border:2px solid #111827; background:transparent; color:#111; font-weight:800; }

/* review icon and intro */
.mv-review-icon { font-size:26px; display:inline-block; margin-bottom:6px; }

/* Review grid rows (label + input) */
.mv-review-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 6px; border-bottom:1px solid rgba(0,0,0,0.03); }
.mv-review-row label { width:60%; font-weight:700; color:#111; }
.mv-review-row input { width:36%; padding:10px; border-radius:4px; border:2px solid #111827; text-align:center; font-weight:800; }

/* make Submit centered and large like screenshot */
.mv-btn.mv-primary { background:#111827; color:#fff; padding:12px 36px; font-weight:900; }

/* mobile friendliness - stack rows */
@media (max-width:480px) {
  .mv-upload-row { flex-direction:column; align-items:flex-start; gap:8px; }
  .mv-review-row { flex-direction:column; align-items:flex-start; }
  .mv-review-row label, .mv-review-row input { width:100%; }
}


/* ---- Step indicators (circles with captions) ---- */
.mv-steps-top {
  display: flex;
  gap: 28px;
  justify-content: center; /* center across panel */
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 6px 0;
}

/* each item holds the circle button and the small caption */
.mv-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px; /* gives room for label and centers items consistently */
}

/* the circular numbered badge */
.mv-step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #cfcfcf; /* inactive grey */
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(6,10,20,0.08);
  cursor: default;
  transition: background 160ms ease, transform 160ms ease;
}

/* visual focus for keyboard users */
.mv-step-number:focus {
  outline: none;
  box-shadow: 0 0 0 6px rgba(16,20,30,0.06);
}

/* active (current) step */
.mv-step-number.mv-step-active {
  background: #0f1724; /* navy active color */
  transform: translateY(-2px);
}

/* small caption under the circle */
.mv-step-label {
  margin-top: 10px;
  font-size: 11px;
  color: #7f8790;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  max-width: 92px;
}

/* smaller screens: keep layout tidy */
@media (max-width: 520px) {
  .mv-steps-top { gap: 12px; }
  .mv-step-item { width: 68px; }
  .mv-step-number { width: 44px; height: 44px; font-size: 14px; }
  .mv-step-label { font-size: 10px; max-width:68px; }
}


/* ===== Review (Step 5) — style to match provided screenshot ===== */

.mv-step-content[data-step="5"] .mv-review-container {
  padding: 18px 18px 26px;
  
}

/* top area */
.mv-review-top { margin-bottom: 8px; }
.review-logo { width: 86px; height: 86px; margin: 6px auto 12px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff; box-shadow: 0 8px 24px rgba(12,16,24,0.04); border: 6px solid rgba(16,20,30,0.03); }


/* title */
.mv-review-title { 
    font-size: 22px; 
    font-weight: 900; 
    letter-spacing: 1px; 
    margin: 6px 0 8px; 
    color: #111827; 
    text-align: center;     /* Center the title */
}


/* thin rule lines */
.mv-hr-top, .mv-hr-bottom { height:3px; background:#111827; margin: 8px 0; }

/* the review grid: left label and right boxed input for each row */
.review-form-grid {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 8px;
  margin: 8px 0 6px;
}

/* single row */
.review-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}

/* left label */
.review-label {
  flex: 1 1 60%;
  text-align: left;
  font-weight:700;
  color:#222;
  padding-left: 8px;
}

/* right value box */
.review-value {
  flex: 0 0 36%;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* input styling to match earlier boxed input look */
.review-value input {
  width:100%;
  padding:10px;
  border:2px solid #111827;
  background:#fff;
  text-align:center;
  font-weight:800;
  box-sizing:border-box;
}

/* submit area */
.mv-review-submit-wrap { margin-top: 14px; display:flex; justify-content:center; }
.mv-submit-large { padding: 12px 26px; background:#111827; color:#fff; font-weight:900; border:none; }

/* small help text under submit */
.mv-review-help { margin-top:12px; font-size:13px; color:#333; }

/* scrollbar styling (thin) */
.review-form-grid::-webkit-scrollbar { width:10px; }
.review-form-grid::-webkit-scrollbar-thumb { background: rgba(16,18,26,.12); border-radius:10px; border:3px solid transparent; background-clip:padding-box; }

/* responsiveness: scale card down on smaller viewports */
@media (max-width:520px) {
  .mv-step-content[data-step="5"] .mv-review-container { width: 92%; margin: 8px auto; padding:12px; }
  .review-row { flex-direction: column; align-items:flex-start; gap:6px; }
  .review-value { width:100%; }
  .review-value input { width:100%; }
}

/* === Measurement Vault — Dashboard “Your Size Profile” precise styling ===
   Replace or append to front-end/assets/css/mv-frontend.css
   Only visual changes — no JS or markup changes required.
   =================================================================== */

/* container & alignment */
.mv-profile-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 28px 24px 40px;
  background: #fbfbfb; /* subtle off-white like screenshot */
  box-sizing: border-box;
}

/* center column containing logo + title + grid */
.mv-profile-center {
  flex: 1 1 880px;         /* allow wide center column */
  max-width: 1100px;
  text-align: center;
  margin: 0 auto;
  background: #dcdcdc;
}

/* circular logo */

  .mv-logo-circle img { height:auto; display:block; }

/* big title centered */
.mv-size-title {
  font-family: "Poppins", "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 10px 0 14px;
  color: #111827;
}

/* thin black divider just under title (extends full width of grid) */
.mv-size-grid {
  width: 100%;
  margin-top: 8px;
  box-sizing: border-box;
  padding-top: 10px;
  position: relative;
}
/* top dividing rule (thin black) */


/* grid rows - 3 columns layout (label, center label, right label)
   Each row shows 3 cells: left, middle, right. */
.mv-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
  gap: 16px;
  align-items: center;
  padding: 18px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  box-sizing: border-box;
}

/* individual cell: label on the left, input on the right within each cell */
.mv-grid-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
}

/* left label text in each cell */
.mv-cell-label {
  text-align: left;
  font-weight: 800;
  color: #222;
  flex: 0 0 48%;
  font-size: 16px;
}

/* the boxed input in each cell */
.mv-cell-input input {
  width: 140px;                  /* box width like screenshot */
  max-width: 100%;
  padding: 8px 10px;
  border: 2px solid #111827;     /* stronger border to match screenshot */
  background: #fff;
  text-align: center;
  font-weight: 800;
  box-sizing: border-box;
}

/* right-side status & controls area */
.mv-profile-right {
  width: 240px;
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding-top: 8px;
}

/* status text */
.mv-profile-status {
  font-size: 12px;
  color: #222;
  text-align: right;
  margin-bottom: 6px;
}

/* stacked buttons on the right; match size & style*/
.mv-profile-controls { display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.mv-btn-primary { background: #0f1724; color:#fff; padding:10px 18px; border:none; font-weight:900; text-transform:uppercase; }
.mv-btn-secondary { background:#dcdcdc; color:#222; padding:10px 18px; border:none; font-weight:900; }

/* subtle hover states */
.mv-btn-primary:hover { opacity: 0.95; transform: translateY(-1px); }
.mv-btn-secondary:hover { opacity: 0.95; transform: translateY(-1px); }

/* scrollbar for the grid area if content overflows (keeps look neat) */
.mv-size-grid { background: #dcdcdc; width: 1020px; max-height: 520px; overflow:auto; padding-right:8px; }
.mv-size-grid::-webkit-scrollbar { width:10px; }
.mv-size-grid::-webkit-scrollbar-thumb { background: rgba(16,18,26,.12); border-radius:10px; }

/* responsive adjustments: collapse to single column on small screens */
@media (max-width: 920px) {
  .mv-profile-panel { padding: 18px 12px; }
  .mv-grid-row { grid-template-columns: 1fr; }
  .mv-cell-input input { width: 100%; max-width: 100%; }
  .mv-profile-right { width: auto; align-items:center; order: 3; }
  .mv-profile-center { width: 100%; }
  .mv-logo-circle { margin-bottom: 8px; }
}

/* Review grid: two-column layout so labels and inputs align consistently */
#mv-review-grid .mv-review-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* Left column: label */
#mv-review-grid .mv-review-label {
  flex: 0 0 28%;            /* label column width (adjust % if you want wider/narrower labels) */
  max-width: 28%;
  min-width: 120px;         /* prevents label collapsing on very small screens */
  font-weight: 600;
  color: #111827;
}

/* Right column: input/select container */
#mv-review-grid .mv-review-value {
  flex: 1 1 auto;
  width: 100%;
}

/* Make inputs and selects fill the right column exactly */
#mv-review-grid .mv-review-value input,
#mv-review-grid .mv-review-value select,
#mv-review-grid .mv-review-value .mv-input {
  width: 100% !important;
  display: block;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid var(--mv-border, #d1d5db);
  background: var(--mv-input-bg, #fff);
  color: var(--mv-text-color, #111827);
  min-height: 42px;
}

/* remove odd native select padding on some browsers and keep arrow space */
#mv-review-grid .mv-review-value select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.2rem; /* room for arrow */
  background-position: right 1rem center, right 0.8rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* small responsive tweak: stack label above input on narrow screens */
@media (max-width: 720px) {
  #mv-review-grid .mv-review-row {
    flex-direction: column;
    align-items: stretch;
  }
  #mv-review-grid .mv-review-label {
    flex: none;
    max-width: none;
    min-width: 0;
    margin-bottom: 8px;
  }
}

.mv-splash {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */
  text-align: center;      /* center text too */
  min-height: 100vh;       /* optional: full screen height */
  padding: 20px;
}

.mv-circle-logo img {
  display: block;
  margin: 0 auto;          /* ensures it's horizontally centered */
  max-width: 150px;        /* adjust image size as needed */
  height: auto;
}

/* ---------- Dashboard 3-column layout: LEFT fields | CENTER images | RIGHT actions ---------- */

/* container */
.mv-profile-panel {
  display: grid;
  grid-template-columns: 340px 1fr 240px; /* left fixed, center flexible, right fixed */
  gap: 24px;
  align-items: start;
  padding: 28px 24px 40px;
  background: #fbfbfb;
  box-sizing: border-box;
}

/* LEFT: fields column */
.mv-fields-column {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(8,10,14,0.04);
  padding: 12px;
  height: 560px; /* visual height similar to screenshot */
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mv-fields-inner {
  overflow-y: auto;
  padding-right: 8px;
}

/* single field row (left column) */
.mv-field-row-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}

.mv-field-label-left {
  width: 60%;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  text-align: left;
}

.mv-field-value-left {
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

.mv-field-value-left .mv-input,
.mv-field-value-left input[type="text"] {
  width: 110px;
  padding: 8px;
  text-align: center;
  font-weight: 800;
  border: 2px solid #111827;
  background: #fff;
  box-sizing: border-box;
}

/* SELECTs sized like the input box */
.mv-field-value-left select.mv-input {
  width: 140px;
  padding: 8px;
  text-align: center;
  font-weight: 800;
}

/* scrollbar for left column */
.mv-fields-inner::-webkit-scrollbar { width:10px; }
.mv-fields-inner::-webkit-scrollbar-thumb { background: rgba(16,18,26,.08); border-radius:10px; }

/* CENTER: images column */
.mv-images-column {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv-images-inner {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

/* each image card */
.mv-image-card {
  width: 300px;
  background: #fff;
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 8px 22px rgba(6,10,20,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}


.mv-image-caption {
  margin-top: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 14px;
}

/* RIGHT: controls column */
.mv-controls-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  height: 560px;
  box-sizing: border-box;
  justify-content: flex-start;
}

.mv-profile-status {
  font-size: 13px;
  color: #222;
  text-align: center;
  padding: 6px 8px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(8,10,14,0.03);
}

.mv-profile-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

/* button variants */
.mv-btn-primary { background: #0f1724; color:#fff; padding:12px 16px; border:none; font-weight:900; text-transform:uppercase; width:100%; }
.mv-btn-secondary { background:#dcdcdc; color:#222; padding:12px 16px; border:none; font-weight:900; width:100%; }
.mv-btn-tertiary { background:#e7e7e7; color:#222; padding:12px 16px; border:none; font-weight:900; width:100%; }

/* keep compact option sizing */
.mv-compact { padding: 8px 12px; }

/* Responsive: stack columns on small screens */
@media (max-width: 1100px) {
  .mv-profile-panel {
    grid-template-columns: 1fr;
  }
  .mv-fields-column,
  .mv-images-column,
  .mv-controls-column {
    width: 100%;
  }
  .mv-images-inner { gap: 12px; flex-wrap: wrap; justify-content: center; }
  .mv-image-card { width: 220px; }
  .mv-image-wrap { height: 220px; }
  .mv-fields-column { height: auto; }
  .mv-controls-column { height: auto; }
}

/* Default desktop order (leave as-is) */
.mv-controls-column { order: initial; }
.mv-fields-column   { order: initial; }
.mv-images-column   { order: initial; }

/* Mobile reorder */
@media (max-width: 768px) {
    /* 1) Controls on top */
    .mv-controls-column {
        order: 1;
    }

    /* 2) Fields in the middle */
    .mv-fields-column {
        order: 2;
    }

    /* 3) Images at bottom */
    .mv-images-column {
        order: 3;
    }
}

/* minor touchups to ensure visual parity with screenshot */
.mv-fields-column, .mv-image-card, .mv-controls-column { border: 1px solid rgba(0,0,0,0.02); }