/* OPD My Account Core (v1.2.1.3)
   Premium Profile UX for WooCommerce My Account
*/

:root{
  --opd-mac-radius: 16px;
  --opd-mac-border: rgba(0,0,0,.10);
  --opd-mac-shadow: 0 10px 30px rgba(0,0,0,.06);
  --opd-mac-gold: #F5A623; /* adjust later if needed */
  --opd-mac-gold-hover: #E89A18;
}

.woocommerce-account .woocommerce-MyAccount-content{
  max-width: 980px;
}

.opd-mac-profile-header{
  display:flex;
  gap:16px;
  justify-content: space-between;
  align-items: stretch;
  background:#fff;
  border:1px solid var(--opd-mac-border);
  border-radius: var(--opd-mac-radius);
  padding:16px;
  box-shadow: var(--opd-mac-shadow);
}

.opd-mac-profile-header__left{
  display:flex;
  gap:14px;
  align-items:center;
}

.opd-mac-avatar .avatar,
.opd-mac-avatar-img{
  border-radius: 999px !important;
}

.opd-mac-profile-meta{
  min-width: 240px;
}

.opd-mac-profile-name{
  display:flex;
  gap:8px;
  align-items:center;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.opd-mac-icon-btn{
  border:1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor:pointer;
  line-height: 1;
}

.opd-mac-icon-btn:hover{
  background: rgba(0,0,0,.03);
}

.opd-mac-profile-sub{
  margin-top: 6px;
  color: rgba(0,0,0,.65);
  font-size: 13px;
}

.opd-mac-actions{
  margin-top: 10px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

.opd-mac-privacy{
  display:flex;
  align-items:center;
  gap:6px;
  color:#1d6f42;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.opd-mac-privacy__lock{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: #22c55e; /* green lock */
}

.opd-mac-privacy__lock-icon{display:block}

.opd-mac-progress{
  min-width: 240px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap:10px;
}

.opd-mac-progress__top{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
}

.opd-mac-progress__label{
  color: rgba(0,0,0,.72);
  font-weight: 600;
}

.opd-mac-progress__bar{
  height: 10px;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
  overflow:hidden;
}

.opd-mac-progress__fill{
  height: 100%;
  width:0%;
  background: var(--opd-mac-gold);
  border-radius: 999px;
}

.opd-mac-progress__sub{
  color: rgba(0,0,0,.62);
  font-size: 13px;
}

.opd-mac-note{
  margin-top: 12px;
  font-size: 14px;
}

.opd-mac-note.is-success{ color: #1d6f42; }
.opd-mac-note.is-error{ color: #9b1c1c; }

/* Required asterisks */
.opd-mac-form .required{ color: #9b1c1c; }

/* Buttons */
.opd-mac-btn{
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
}

.opd-mac-btn--secondary{
  background:#fff;
}

.opd-mac-btn--primary{
  background: var(--opd-mac-gold);
  border-color: rgba(0,0,0,.08);
  color:#111;
}

.opd-mac-btn--primary:hover{
  background: var(--opd-mac-gold-hover);
}

.opd-mac-btn--danger{
  background: #fff;
  border-color: rgba(155,28,28,.35);
  color: #9b1c1c;
}
.opd-mac-btn--danger:hover{
  background: rgba(155,28,28,.06);
}

/* Avatar warning banner (shown on click) */
.opd-mac-avatar-warning{
  border: 1px solid rgba(155,28,28,.28);
  background: rgba(155,28,28,.06);
  color: #9b1c1c;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 10px;
}

/* Modal */
.opd-mac-modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 99999;
}

.opd-mac-modal.is-open{ display:block; }

.opd-mac-modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.opd-mac-modal__panel{
  position: relative;
  max-width: 760px;
  width: calc(100% - 28px);
  margin: 6vh auto 0;
  background:#fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.25);
}

.opd-mac-modal__close{
  position:absolute;
  top: 10px;
  right: 12px;
  border:0;
  background: transparent;
  font-size: 28px;
  line-height:1;
  cursor:pointer;
  color: #ef4444;
}

.opd-mac-modal__title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.opd-mac-modal__desc{
  margin: 0 0 12px;
  color: rgba(0,0,0,.65);
  font-size: 13px;
}

.opd-mac-modal__footer{
  margin-top: 14px;
  display:flex;
  justify-content: flex-end;
}

/* Forms */
.opd-mac-form input[type="text"],
.opd-mac-form input[type="email"],
.opd-mac-form input[type="tel"],
.opd-mac-form input[type="password"],
.opd-mac-form input[type="number"]{
  height: 46px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 0 14px;
  transition: all .18s ease;
}

.opd-mac-form input:focus{
  border-color: rgba(0,0,0,.55);
  box-shadow: 0 0 0 4px rgba(0,0,0,.08);
  outline: none;
}

.opd-mac-field{
  position: relative;
  margin-bottom: 12px;
}

.opd-mac-field label{
  display:block;
  font-weight: 700;
  margin-bottom: 6px;
}

.opd-mac-grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 720px){
  .opd-mac-grid2{ grid-template-columns: 1fr; }
  .opd-mac-profile-header{ flex-direction: column; }
  .opd-mac-progress{ min-width: 0; }
}

/* Tooltip */
.opd-mac-tip{
  position:absolute;
  top: 0;
  right: 0;
  transform: translateY(2px);
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}

.opd-mac-tip:hover{ background: rgba(0,0,0,.03); }

.opd-mac-tip.is-open::after{
  content: attr(data-tip);
  position:absolute;
  top: 34px;
  right: 0;
  width: min(320px, 70vw);
  background:#111;
  color:#fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  z-index: 5;
}

.opd-mac-tip.is-open::before{
  content:"";
  position:absolute;
  top: 28px;
  right: 10px;
  border: 6px solid transparent;
  border-bottom-color: #111;
  z-index: 6;
}

/* Errors */
.opd-mac-error{
  color:#9b1c1c;
  font-size: 13px;
  margin-top: 6px;
  display:none;
}
.opd-mac-error.is-show{ display:block; }

/* Avatar editor */
.opd-mac-avatar-editor{
  display:flex;
  gap: 14px;
  align-items:center;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 14px;
}

.opd-mac-avatar-editor__preview .avatar{ border-radius: 999px !important; }

.opd-mac-avatar-editor__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
}

.opd-mac-avatar-actions-row{
  display:flex;
  align-items:center;
  gap: 10px;
  width: 100%;
}

.opd-mac-tip--near{
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: 800;
}

.opd-mac-tip--near.is-open::after{
  right: auto;
  left: 0;
}

.opd-mac-tip--near.is-open::before{
  right: auto;
  left: 10px;
}

.opd-mac-security-line{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 6px;
  color: #0f7a2a;
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opd-mac-security-line__lock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#22c55e;
  line-height:1;
}

.opd-mac-security-line__lock svg{ display:block; }

/* Alert modal content */
.opd-mac-modal--alert .opd-mac-alert{ color:#9b1c1c; }
.opd-mac-modal--alert .opd-mac-alert p{ margin: 8px 0; }
.opd-mac-modal--alert .opd-mac-modal__footer--split{
  display:flex;
  justify-content: space-between;
  gap: 10px;
}

.opd-mac-avatar-warning{
  flex-basis: 100%;
  border:1px solid rgba(155,28,28,.35);
  background: rgba(155,28,28,.08);
  color: #9b1c1c;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

#opd-mac-avatar-file{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

.opd-mac-help{
  flex-basis: 100%;
  color: rgba(0,0,0,.6);
  font-size: 12px;
}

/* Unit switch */
.opd-mac-modal__head-row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:center;
}

.opd-mac-unit-switch{
  display:flex;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  overflow:hidden;
}

.opd-mac-unit-btn{
  border:0;
  padding: 8px 12px;
  font-weight: 900;
  cursor:pointer;
  background:#fff;
}

.opd-mac-unit-btn.is-active{
  background: var(--opd-mac-gold);
}

.opd-mac-divider{
  margin: 10px 0 14px;
  height: 1px;
  background: rgba(0,0,0,.10);
}

/* Optional: sticky primary button on mobile */
@media (max-width: 600px){
  body.opd-mac-sticky .opd-mac-modal__footer{
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 10px;
  }
  body.opd-mac-sticky .opd-mac-modal__footer .opd-mac-btn--primary{
    width: 100%;
  }
}

/* Mobile modal fixes:
   - allow the green security line to wrap (no overflow)
   - allow scrolling inside the modal panel
   - add bottom padding so fixed bottom nav doesn't cover fields/buttons
*/
@media (max-width: 600px){
  .opd-mac-modal__panel{
    margin: 10px auto;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 90px;
  }

  .opd-mac-avatar-editor{
    flex-direction: column;
    align-items: flex-start;
  }

  .opd-mac-avatar-actions-row{
    flex-wrap: wrap;
  }

  .opd-mac-security-line{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}


/* Completion color states */
.opd-mac-progress--complete .opd-mac-progress__label,
.opd-mac-progress--complete .opd-mac-progress__value,
.opd-mac-progress--complete .opd-mac-progress__sub{
  color: #1d6f42;
}
.opd-mac-progress--complete .opd-mac-progress__fill{ background: #1d6f42; }

.opd-mac-progress--medium .opd-mac-progress__label,
.opd-mac-progress--medium .opd-mac-progress__value,
.opd-mac-progress--medium .opd-mac-progress__sub{
  color: var(--opd-mac-gold);
}

.opd-mac-progress--low .opd-mac-progress__label,
.opd-mac-progress--low .opd-mac-progress__value,
.opd-mac-progress--low .opd-mac-progress__sub{
  color: #9b1c1c;
}
.opd-mac-progress--low .opd-mac-progress__fill{ background: #9b1c1c; }

/* Profile security helper text (do not change sizing) */
.opd-mac-profile-sub{
  color: #1d6f42;
}

.opd-mac-modal__close:hover{
  color: #dc2626;
}


/* Mobile: allow privacy text to wrap instead of overflowing */
@media (max-width: 480px){
  .opd-mac-privacy{
    white-space: normal;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .opd-mac-privacy span:last-child{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
    flex: 1 1 160px;
  }
}


/*
 * Mobile: tooltip positioning rules
 * - Avatar info tooltip ("i") stays centred.
 * - Field helper tooltips ("!") open to the opposite side (to the left of the icon)
 *   so they don't overflow on phones.
 */
@media (max-width: 480px){
  /* Field tooltips (all except --near): open to the left of the icon */
  .opd-mac-tip:not(.opd-mac-tip--near).is-open::after{
    left: auto !important;
    right: 36px !important;
    transform: none !important;
    width: min(320px, calc(100vw - 90px)) !important;
    max-width: calc(100vw - 90px) !important;
    min-width: 220px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    writing-mode: horizontal-tb !important;
    text-align: left;
  }
  .opd-mac-tip:not(.opd-mac-tip--near).is-open::before{
    left: auto !important;
    right: 46px !important;
    transform: none !important;
  }

  /* Avatar tooltip: centred */
  .opd-mac-tip--near.is-open::after{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(320px, 90vw) !important;
    max-width: 90vw !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
  }
  .opd-mac-tip--near.is-open::before{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}