/************************************************************
 * MTF Account – Clean, compact, consistent styling
 * Scope profile/address/password forms under .mtf-prof
 * Floating save button is scoped under .mtf-savefab
 ************************************************************/

/* =========================
   LAYOUT (profile section)
   ========================= */
.mtf-prof .mtf-prof__row{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* =========================
   AVATAR (click-to-upload)
   ========================= */
.mtf-prof .mtf-prof__avatar{
  display:flex;
  flex-direction:column;
  align-items:flex-start; /* left aligned */
}
.mtf-prof .mtf-prof__avatar-img{
  position:relative;
  display:inline-block;
  cursor:pointer;
}
.mtf-prof .mtf-prof__avatar-img img{
  width:96px;
  height:96px;
  border-radius:50%;
  object-fit:cover;
  background:#F3F5F4;
  border:2px solid rgba(143,162,154,.40); /* ring */
  transition:opacity .2s ease;
}
.mtf-prof .mtf-prof__avatar-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#fff; font-size:20px;
  opacity:0; transition:opacity .2s ease;
}
.mtf-prof .mtf-prof__avatar-img:hover .mtf-prof__avatar-overlay{ opacity:1; }
.mtf-prof .mtf-prof__avatar input[type=file]{ display:none; } /* hide native input */
.mtf-prof .mtf-prof__avatar small{
  margin-top:8px; font-size:12px; color:#6b7d76;
}

/* =========================
   FORM GRID (shared)
   ========================= */
.mtf-prof .mtf-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.mtf-prof .mtf-field--full{ grid-column:1 / -1; }

.mtf-prof .mtf-field label{
  display:block;
  margin:0 0 6px;
  font-weight:600;
  font-size:12px;
  color:#475B54;
}

/* =========================
   INPUTS (neutral + focus)
   ========================= */
.mtf-prof .mtf-field input,
.mtf-prof input.input-text,
.mtf-prof .woocommerce form .form-row input.input-text{
  width:100%;
  height:44px;
  padding:8px 12px;
  background:#fff !important;
  color:#0F2A28 !important;
  border:1px solid rgba(143,162,154,.35) !important;
  border-radius:10px !important;
  box-shadow:none !important;
  outline:none !important;
  font-size:14px;
}
.mtf-prof .mtf-field input::placeholder{ color:#8ca19a; }

.mtf-prof .mtf-field input:hover,
.mtf-prof .mtf-field input:focus,
.mtf-prof input.input-text:hover,
.mtf-prof input.input-text:focus{
  background:#fff !important;
  border-color:rgba(15,42,40,.45) !important;
  box-shadow:0 0 0 3px rgba(15,42,40,.08) !important; /* soft glow */
}

/* Date input – consistent look (fallback when not using flatpickr altInput) */
.mtf-prof .mtf-field input[type="date"]{
  appearance:none; -webkit-appearance:none;
  background:#fff !important;
  color:#0F2A28 !important;
  border:1px solid rgba(143,162,154,.35) !important;
  box-shadow:none !important;
}

/* Chrome/Safari autofill fix (remove yellow) */
.mtf-prof .mtf-field input:-webkit-autofill,
.mtf-prof .mtf-field input:-webkit-autofill:hover,
.mtf-prof .mtf-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#0F2A28;
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
          box-shadow:0 0 0 1000px #fff inset !important;
  border:1px solid rgba(143,162,154,.35) !important;
}

/* =========================
   LOCKED FIELDS (read-only)
   ========================= */
.mtf-prof .mtf-field input:disabled,
.mtf-prof .mtf-field input[readonly]{
  background:#F7F8F8 !important;
  color:#6b7d76 !important;
  border:1px solid rgba(143,162,154,.25) !important;
  cursor:not-allowed !important;
  opacity:1 !important;
}
.mtf-prof .mtf-field input:disabled:hover,
.mtf-prof .mtf-field input[readonly]:hover{
  border-color:rgba(143,162,154,.25) !important;
  box-shadow:none !important;
}
/* Add lock icon to locked field */
.mtf-prof .mtf-field--locked{
  position:relative;
}
.mtf-prof .mtf-field--locked::after{
  content:"\f023"; /* FontAwesome lock icon */
  font-family:"Font Awesome 5 Free", "Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  right:12px;
  bottom:12px;
  color:#8ca19a;
  font-size:14px;
  pointer-events:none;
}
.mtf-prof .mtf-field--locked label::after{
  content:" (låst)";
  font-weight:400;
  color:#6b7d76;
  font-size:11px;
}

/* =========================
   SELECT (address country)
   ========================= */
.mtf-prof select.mtf-select{
  width:100%;
  height:44px;
  padding:8px 12px;
  border:1px solid rgba(143,162,154,.35);
  border-radius:10px;
  background:#fff;
  color:#0F2A28;
  font-size:14px;
  outline:none;
}
.mtf-prof select.mtf-select:focus{
  border-color:rgba(15,42,40,.45);
  box-shadow:0 0 0 3px rgba(15,42,40,.08);
}

/* =========================
   NOTICES (success/error)
   ========================= */
.mtf-prof .mtf-notice{
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:10px;
}
.mtf-prof .mtf-notice--success{ background:#E8F6EC; border:1px solid #BFE7C8; }
.mtf-prof .mtf-notice--error{   background:#FFF1F1; border:1px solid #F4C7C7; }

/* =========================
   PASSWORD – toggle & rules
   ========================= */
/* Input-with-eye wrapper */
.mtf-prof .mtf-pass-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.mtf-prof .mtf-pass-wrap input{ flex:1; padding-right:42px; }
.mtf-prof .mtf-pass-wrap input[type=password]::-ms-reveal,
.mtf-prof .mtf-pass-wrap input[type=password]::-ms-clear{
  display:none;
}

/* Eye toggle button */
.mtf-prof .mtf-pass-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:inline-grid; place-items:center;
  width:28px; height:28px;
  border:none; background:transparent; cursor:pointer;
  color:#475B54; opacity:.7;
  transition:opacity .2s ease, color .2s ease;
}
.mtf-prof .mtf-pass-toggle::before{
  content:none !important;
}
.mtf-prof .mtf-pass-toggle i{
  font-size:18px;
  line-height:1;
}
.mtf-prof .mtf-pass-toggle:hover{ opacity:1; color:#0F2A28; }
.mtf-prof .mtf-pass-toggle.is-on{ color:#0F2A28; }

/* Rules panel */
.mtf-prof .mtf-password-req{
  border:1px solid rgba(143,162,154,.35);
  border-radius:10px;
  background:#F7F8F8;
  padding:12px;
}
.mtf-prof .mtf-password-req strong{
  display:block; margin-bottom:6px; color:#2a3c36;
}
.mtf-prof .mtf-req-list{
  margin:0; padding:0; list-style:none; /* no bullets */
}
.mtf-prof .mtf-req-list .req-item{
  position:relative;
  margin:6px 0;
  padding-left:22px;             /* room for check icon */
  color:#4a5c56;
}
.mtf-prof .mtf-req-list .req-item::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:#4a5c56; opacity:.25;   /* faded until valid */
}
.mtf-prof .mtf-req-list .req-item.ok{
  color:#1b7a57; font-weight:600;
}
.mtf-prof .mtf-req-list .req-item.ok::before{
  color:#1b7a57; opacity:1;
}

/* =========================
   BUTTONS (generic look)
   ========================= */
.mtf-prof .mtf-btn{
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
}
.mtf-prof .mtf-btn--dark{
  background:#0F2A28;
  color:#fff;
  border-color:#0F2A28;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:768px){
  .mtf-prof .mtf-grid{ grid-template-columns:1fr; }
}

/* ============================================================
 * UNIFIED FLOATING SAVE BUTTON (global)
 * Uses sentinel-based docking (no flicker)
 * ============================================================ */

/* Where the button docks in the document flow */
.mtf-savefab-sentinel{ height:1px; }

/* Button container (docks here when sentinel is visible) */
.mtf-savefab{
  position:relative;
  z-index:60;
  transition:none; /* Remove transitions to prevent jumps */
  display:flex;
  justify-content:center;
}
.mtf-savefab.hidden{
  opacity:0;
  pointer-events:none;
}

/* Floating state (when sentinel is NOT visible) */
.mtf-savefab.is-floating{
  position:fixed;
  left:50%;
  transform:translateX(calc(-50% + 140px)); /* Offset by half of sidebar width (280px / 2) */
  right:auto;
  bottom:var(--mtf-fab-offset, 24px); /* customizable via shortcode attr */
  width:auto;
  pointer-events:none; /* only inner content clickable */
  transition:none; /* No transition during state changes */
}

/* Adjust for mobile when sidebar is not fixed */
@media (max-width: 1200px) {
  .mtf-savefab.is-floating{
    transform:translateX(-50%); /* Center normally on mobile */
  }
}

/* Inner layout: status pill + button */
.mtf-savefab .mtf-savefab__inner{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  pointer-events:auto; /* clickable while floating */
}

/* Status pill (unsaved changes indicator) */
.mtf-savefab .mtf-savefab__status{
  display:none; /* shown only when there are dirty changes */
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:13px;
  color:#143634;
  background:#EAF2EF;
  border:1px solid rgba(143,162,154,.40);
  border-radius:999px;
  padding:8px 12px;
  white-space:nowrap;
}
.mtf-savefab .mtf-savefab__status.is-visible{ display:inline-flex; }

/* Pulsing dot inside the pill */
.mtf-savefab .mtf-savefab__dot{
  width:8px; height:8px; border-radius:50%;
  background:#0F2A28;
  box-shadow:0 0 0 0 rgba(15,42,40,.4);
  animation:mtfPulse 1.4s ease-out infinite;
}
@keyframes mtfPulse{
  0%   { box-shadow:0 0 0 0 rgba(15,42,40,.4); }
  70%  { box-shadow:0 0 0 8px rgba(15,42,40,0); }
  100% { box-shadow:0 0 0 0 rgba(15,42,40,0); }
}

/* Save button look */
.mtf-savefab .mtf-btn{
  padding:14px 22px;
  border-radius:14px;
  font-weight:700;
  font-size:15px;
  border:none;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  transition:background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* Disabled: no save when nothing to save */
.mtf-savefab .mtf-btn:disabled{
  background:#9fb0ab;
  color:#fff;
  opacity:.85;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  cursor:not-allowed;
}

/* Active state */
.mtf-savefab .mtf-btn.is-dirty:not(:disabled){
  background:#0F2A28;
  color:#fff;
}
.mtf-savefab .mtf-btn.is-dirty:not(:disabled):hover{
  background:#143634;
}