/* WC Custom Fields Per Product/Variation - Modal UI */
body.wc-cfpv-modal-open { overflow: hidden; }

.wc-cfpv-modal{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
}

.wc-cfpv-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.wc-cfpv-dialog{
  position: relative;
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wc-cfpv-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.wc-cfpv-header-title{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.wc-cfpv-close{
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}

.wc-cfpv-body{
  padding: 14px 16px;
  overflow: auto;
}

.wc-cfpv-loading{
  padding: 18px 0;
  opacity: .8;
}

.wc-cfpv-error{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(220, 53, 69, .08);
  color: #b02a37;
  border: 1px solid rgba(220, 53, 69, .25);
  font-size: 13px;
}

.wc-cfpv-footer{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.wc-cfpv-section{ margin-bottom: 14px; }
.wc-cfpv-section:last-child{ margin-bottom: 0; }

.wc-cfpv-section-title{
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.wc-cfpv-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Desktop: respect chosen columns */
.wc-cfpv-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wc-cfpv-field label{
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 6px 0;
  opacity: .9;
}

.wc-cfpv-field .required{ color: #dc3545; }

.wc-cfpv-field input{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.2;
  background: #fff;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.wc-cfpv-field input:focus{
  border-color: rgba(0,0,0,.45);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

.wc-cfpv-field input::placeholder{ opacity: .55; }

/* Buttons (keep Woo classes but make spacing consistent) */
.wc-cfpv-footer .button{
  padding: 10px 16px !important;
  border-radius: 10px !important;
  min-height: 40px;
}

.wc-cfpv-footer .button:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.10);
}

/* Mobile-friendly tweaks */
@media (max-width: 680px){
  .wc-cfpv-dialog{
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    margin: 8px auto;
    border-radius: 12px;
  }
  .wc-cfpv-header, .wc-cfpv-body, .wc-cfpv-footer{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Force 1-column on small screens for readability */
  .wc-cfpv-cols-2{
    grid-template-columns: 1fr;
  }

  .wc-cfpv-footer{
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .wc-cfpv-footer .button{
    width: 100%;
  }
}

/* Very small screens */
@media (max-width: 420px){
  .wc-cfpv-field input{ font-size: 16px; } /* prevents iOS zoom */
}



/* ---- Spacing + Divider Enhancements ---- */

/* More breathing room inside inputs */
.wc-cfpv-field input{
  padding: 14px 16px !important;
  border-radius: 12px !important;
}

/* Slightly more vertical spacing between fields */
.wc-cfpv-grid{
  gap: 18px !important;
}

/* Add soft divider between logical rows */
.wc-cfpv-grid .wc-cfpv-field{
  position: relative;
  padding-bottom: 14px;
}

.wc-cfpv-grid .wc-cfpv-field:after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0,0,0,.08);
}

/* Remove divider from last row */
.wc-cfpv-grid .wc-cfpv-field:last-child:after{
  display: none;
}

/* Slightly larger label spacing */
.wc-cfpv-field label{
  margin-bottom: 8px !important;
}

/* Improve mobile tap comfort */
@media (max-width: 680px){
  .wc-cfpv-field input{
    padding: 16px 16px !important;
  }
}



/* ---- Button hover fix (keep Divi/Woo look consistent) ---- */
.wc-cfpv-footer .button:hover,
.wc-cfpv-footer .button:focus{
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.wc-cfpv-footer .button:focus{
  outline: none !important;
}

/* Prevent odd hover/active outlines on some themes */
.wc-cfpv-footer .button:active{
  transform: none !important;
  box-shadow: none !important;
}



/* ---- Button hover: remove icon/arrow and use subtle darken ---- */

/* Remove any theme-added pseudo icons/arrows within our modal footer buttons */
.wc-cfpv-footer .button:before,
.wc-cfpv-footer .button:after,
.wc-cfpv-footer .button span:before,
.wc-cfpv-footer .button span:after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Also neutralize Divi's common hover arrow on .et_pb_button */
.wc-cfpv-footer .button.et_pb_button:after{
  content: none !important;
  display: none !important;
}

/* Simple darken hover without transforms */
.wc-cfpv-footer .button{
  transition: filter .15s ease, opacity .15s ease, background-color .15s ease !important;
}

.wc-cfpv-footer .button:hover{
  filter: brightness(0.95);
  opacity: 0.98;
}

.wc-cfpv-footer .button:active{
  filter: brightness(0.92);
}