/* Scoped base for the Members First Poll widget */
.mf-poll-root{
  position: relative;
  height: var(--mf-poll-height, 100vh);
  min-height: var(--mf-poll-min-height, 680px);

  width: 100%;
  display: flex;
  flex-direction: column;
  background: #f2ec64;
  font-family: 'Roboto Condensed', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
.mf-poll-root, .mf-poll-root *, .mf-poll-root *::before, .mf-poll-root *::after { box-sizing: border-box; margin: 0; padding: 0; }

.mf-poll-root *, .mf-poll-root *::before, .mf-poll-root *::after{ box-sizing: border-box; margin: 0; padding: 0; }.mf-poll-root .font-heading{
      font-family: "League Gothic", sans-serif;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }@keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }@keyframes slideUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }@keyframes scaleIn {
      from { transform: scale(0.8); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }@keyframes barGrow {
      from { height: 0%; }
    }.mf-poll-root .animate-fade-in{
      animation: fadeIn 0.5s ease-out forwards;
    }.mf-poll-root .animate-slide-up{
      animation: slideUp 0.6s ease-out forwards;
    }.mf-poll-root .mf-desktop-container{
      display: flex;
      flex: 1;
      min-height: 0;
    
      height: 100%;
    }.mf-poll-root .sidebar{
      width: 220px;
      flex-shrink: 0;
      padding: 24px;
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 10;
    }.mf-poll-root .logo{
      width: 48px;
      height: 48px;
      margin-bottom: 16px;
    }.mf-poll-root .sidebar-content{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }.mf-poll-root .sidebar h1{
      font-size: 1.75rem;
      line-height: 1.1;
      color: #161b1a;
      margin-bottom: 16px;
    }.mf-poll-root .sidebar p{
      font-size: 0.875rem;
      color: #161b1a;
      line-height: 1.5;
      margin-bottom: 12px;
    }.mf-poll-root .help-button{
      display: flex;
      align-items: center;
      gap: 4px;
      background: none;
      border: none;
      color: rgba(22, 27, 26, 0.7);
      font-size: 0.875rem;
      font-family: "Roboto Condensed", sans-serif;
      cursor: pointer;
      padding: 0;
      margin-bottom: 24px;
      transition: color 0.2s;
    }.mf-poll-root .help-button:hover{
      color: #161b1a;
    }.mf-poll-root .submit-btn{
      background: #d2232a;
      color: white;
      border: none;
      padding: 10px 24px;
      font-family: "Roboto Condensed", sans-serif;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background 0.2s;
      width: fit-content;
    }.mf-poll-root .submit-btn:hover{
      background: #be3821;
    }.mf-poll-root .submit-btn:disabled{
      opacity: 0.7;
      cursor: not-allowed;
    }.mf-poll-root .submit-btn.rounded{
      border-radius: 9999px;
    }.mf-poll-root .chart-area{
      flex: 1;
      display: flex;
      height: 100%;
    }.mf-poll-root .bar-column{
      flex: 1;
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-left: 1px solid rgba(22, 27, 26, 0.2);
      cursor: ns-resize;
      touch-action: none;
      user-select: none;
      transition: background 0.2s;
      opacity: 0;
    }.mf-poll-root .bar-column:first-child{
      border-left: none;
    }.mf-poll-root .bar-column:hover, .mf-poll-root .bar-column.active{
      background: rgba(0, 0, 0, 0.03);
    }.mf-poll-root .bar-column.animated{
      opacity: 1;
    }.mf-poll-root .bar-header{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 16px;
      z-index: 10;
      opacity: 0;
      transform: translateY(-20px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }.mf-poll-root .bar-column.animated .bar-header{
      opacity: 1;
      transform: translateY(0);
    }.mf-poll-root .bar-label{
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: #161b1a;
      line-height: 1.3;
      height: 56px;
      overflow: hidden;
      margin-bottom: 8px;
    }.mf-poll-root .bar-percentage{
      display: block;
      font-family: "League Gothic", sans-serif;
      font-size: 2rem;
      color: #161b1a;
      line-height: 1;
      height: 40px;
    }.mf-poll-root .info-btn{
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(22, 27, 26, 0.1);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 8px;
      transition: background 0.2s;
    }.mf-poll-root .info-btn:hover{
      background: rgba(22, 27, 26, 0.2);
    }.mf-poll-root .watermark-label{
      position: absolute;
      top: 192px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      pointer-events: none;
      z-index: 0;
    }.mf-poll-root .watermark-text{
      color: rgba(22, 27, 26, 0.15);
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }.mf-poll-root .drag-indicator{
      position: absolute;
      left: 50%;
      z-index: 20;
      pointer-events: none;
      transform: translateX(-50%) translateY(50%);
      opacity: 0;
      transition: opacity 0.2s, transform 0.2s;
    }.mf-poll-root .bar-column:hover .drag-indicator, .mf-poll-root .bar-column.active .drag-indicator{
      opacity: 1;
    }.mf-poll-root .drag-indicator-circle{
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #161b1a;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }.mf-poll-root .bar-fill{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      transition: height 0.15s ease-out;
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='3' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E");
      background-size: 20px 20px;
    }.mf-poll-root .footer{
      flex-shrink: 0;
      border-top: 1px solid rgba(22, 27, 26, 0.2);
      padding: 8px 16px;
      text-align: center;
      background: #f2ec64;
    }.mf-poll-root .footer p{
      color: #161b1a;
      font-size: 0.75rem;
    }.mf-poll-root .footer .acknowledgement{
      color: rgba(22, 27, 26, 0.6);
      font-size: 0.625rem;
      line-height: 1.4;
      margin-top: 4px;
      max-width: 56rem;
      margin-left: auto;
      margin-right: auto;
    }.mf-poll-root .mf-mobile-container{
      display: none;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    
      height: 100%;
    }.mf-poll-root .mobile-header{
      flex-shrink: 0;
      padding: 12px;
      padding-bottom: 8px;
    }.mf-poll-root .mobile-header-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }.mf-poll-root .mobile-logo{
      width: 36px;
      height: 36px;
    }.mf-poll-root .mobile-header h1{
      font-size: 1.125rem;
      color: #161b1a;
    }.mf-poll-root .mobile-header p{
      font-size: 0.75rem;
      color: #161b1a;
      text-align: center;
      line-height: 1.5;
    }.mf-poll-root .mobile-help-btn{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: none;
      border: none;
      color: rgba(22, 27, 26, 0.7);
      font-size: 0.75rem;
      font-family: "Roboto Condensed", sans-serif;
      cursor: pointer;
      margin: 4px auto 0;
      transition: color 0.2s;
    }.mf-poll-root .mobile-help-btn:hover{
      color: #161b1a;
    }.mf-poll-root .mobile-percentages{
      flex-shrink: 0;
      display: flex;
      border-bottom: 1px dashed rgba(22, 27, 26, 0.2);
    }.mf-poll-root .mobile-percentage-item{
      flex: 1;
      padding: 8px 0;
      text-align: center;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }.mf-poll-root .mobile-percentage-value{
      font-family: "League Gothic", sans-serif;
      font-size: 1.25rem;
      font-weight: 700;
      color: #161b1a;
    }.mf-poll-root .mobile-info-btn{
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 9px;
      color: rgba(22, 27, 26, 0.7);
      margin-top: 2px;
      background: none;
      border: none;
      cursor: pointer;
      font-family: "Roboto Condensed", sans-serif;
      transition: color 0.2s;
    }.mf-poll-root .mobile-info-btn:hover{
      color: #161b1a;
    }.mf-poll-root .mobile-info-btn span{
      font-weight: 600;
      line-height: 1.2;
    }.mf-poll-root .mobile-chart-area{
      flex: 1;
      display: flex;
      min-height: 0;
    }.mf-poll-root .mobile-bar-column{
      flex: 1;
      position: relative;
      height: 100%;
      cursor: ns-resize;
      touch-action: none;
      user-select: none;
      border-left: 1px solid rgba(22, 27, 26, 0.2);
      transition: background 0.2s;
      overflow: hidden;
      opacity: 0;
    }.mf-poll-root .mobile-bar-column:first-child{
      border-left: none;
    }.mf-poll-root .mobile-bar-column:hover, .mf-poll-root .mobile-bar-column.active{
      background: rgba(0, 0, 0, 0.03);
    }.mf-poll-root .mobile-bar-column.animated{
      opacity: 1;
    }.mf-poll-root .mobile-watermark{
      position: absolute;
      top: 12px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      pointer-events: none;
      z-index: 0;
    }.mf-poll-root .mobile-watermark-text{
      color: rgba(22, 27, 26, 0.4);
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }.mf-poll-root .mobile-drag-indicator{
      position: absolute;
      left: 50%;
      z-index: 20;
      pointer-events: none;
      transform: translateX(-50%) translateY(50%);
      opacity: 0;
      transition: opacity 0.2s;
    }.mf-poll-root .mobile-bar-column:hover .mobile-drag-indicator, .mf-poll-root .mobile-bar-column.active .mobile-drag-indicator{
      opacity: 1;
    }.mf-poll-root .mobile-drag-circle{
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #161b1a;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }.mf-poll-root .mobile-bar-fill{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
      transition: height 0.15s ease-out;
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='3' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E");
      background-size: 20px 20px;
    }.mf-poll-root .mobile-submit{
      flex-shrink: 0;
      padding: 12px;
      display: flex;
      justify-content: center;
    }.mf-poll-root .mobile-footer{
      flex-shrink: 0;
      padding: 0 12px 8px;
      text-align: center;
    }.mf-poll-root .mobile-footer p{
      color: #161b1a;
      font-size: 10px;
    }.mf-poll-root .mobile-footer .acknowledgement{
      color: rgba(22, 27, 26, 0.6);
      font-size: 8px;
      line-height: 1.4;
      margin-top: 4px;
    }.mf-poll-root .thank-you-screen{
      position: fixed;
      inset: 0;
      background: #f2ec64;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }.mf-poll-root .thank-you-screen.active{
      display: flex;
    }.mf-poll-root .thank-you-content{
      text-align: center;
      animation: scaleIn 0.5s ease-out;
    }.mf-poll-root .thank-you-icon{
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #9adbb3;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
    }.mf-poll-root .thank-you-content h2{
      font-size: 2.5rem;
      color: #161b1a;
      margin-bottom: 12px;
    }.mf-poll-root .thank-you-content p{
      color: #161b1a;
      max-width: 400px;
    }.mf-poll-root .modal-overlay, .mf-submit-root .modal-overlay, .mf-why-root .modal-overlay{
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      z-index: 100;
      opacity: 0;
      transition: opacity 0.2s ease-out;
    }.mf-poll-root .modal-overlay.active, .mf-submit-root .modal-overlay.active, .mf-why-root .modal-overlay.active{
      display: flex;
    }.mf-poll-root .modal-overlay.visible, .mf-submit-root .modal-overlay.visible, .mf-why-root .modal-overlay.visible{
      opacity: 1;
    }.mf-poll-root .modal-content, .mf-submit-root .modal-content, .mf-why-root .modal-content{
      background: #f2ec64;
      border: 1px solid rgba(22, 27, 26, 0.2);
      border-radius: 8px;
      max-width: 42rem;
      max-height: 80vh;
      overflow-y: auto;
      padding: 24px;
      position: relative;
      transform: scale(0.95);
      transition: transform 0.2s ease-out;
    }.mf-poll-root .modal-overlay.visible .modal-content{
      transform: scale(1);
    }.mf-poll-root .modal-close, .mf-submit-root .modal-close, .mf-why-root .modal-close{
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      border: none;
      background: rgba(22, 27, 26, 0.1);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }.mf-poll-root .modal-close:hover{
      background: rgba(22, 27, 26, 0.2);
    }.mf-poll-root .modal-title, .mf-submit-root .modal-title, .mf-why-root .modal-title{
      font-size: 1.25rem;
      padding-bottom: 12px;
      margin-bottom: 12px;
    }.mf-poll-root .modal-body, .mf-submit-root .modal-body, .mf-why-root .modal-body{
      font-size: 0.875rem;
      color: #161b1a;
      line-height: 1.6;
    }.mf-poll-root .modal-body ul{
      list-style: disc;
      padding-left: 20px;
      margin-top: 12px;
    }.mf-poll-root .modal-body li{
      margin-bottom: 8px;
    }@keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }.mf-poll-root .spinner{
      animation: spin 1s linear infinite;
    }.mf-poll-root .icon{
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }.mf-poll-root .icon-sm{
      width: 12px;
      height: 12px;
    }.mf-poll-root .icon-lg{
      width: 24px;
      height: 24px;
    }.mf-poll-root .icon-xl{
      width: 40px;
      height: 40px;
    }@media (max-width: 768px) {.mf-poll-root .mf-desktop-container, .mf-poll-root .sidebar, .mf-poll-root .chart-area, .mf-poll-root .footer{
        display: none !important;
      }.mf-poll-root .mf-mobile-container{
        display: flex !important;
      }}@media (min-width: 769px) {.mf-poll-root .mf-mobile-container{
        display: none !important;
      }}@media (max-width: 1024px) and (min-width: 769px) {.mf-poll-root .sidebar{
        width: 180px;
        padding: 16px;
      }.mf-poll-root .sidebar h1{
        font-size: 1.25rem;
      }.mf-poll-root .sidebar p{
        font-size: 0.75rem;
      }.mf-poll-root .bar-label{
        font-size: 0.6875rem;
      }.mf-poll-root .bar-percentage{
        font-size: 1.5rem;
      }}


/* Submit button widget styles (scoped) */
.mf-submit-root .submit-btn {
  background: #d2232a;
  color: white;
  border: none;
  padding: 10px 24px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
  width: fit-content;
}
.mf-submit-root .submit-btn:hover { background: #be3821; }
.mf-submit-root .submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.mf-submit-root .submit-btn.rounded { border-radius: 9999px; }
.mf-submit-root .spinner { animation: spin 1s linear infinite; }



/* Thank-you overlay close button */
.mf-poll-root .thank-you-close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid rgba(22,27,26,0.2);
  background: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mf-poll-root .thank-you-close:hover{
  background: rgba(255,255,255,0.55);
}
.mf-poll-root .thank-you-screen .thank-you-content{
  position: relative;
  padding-top: 16px;
}

/* Submit confirmation modal actions */
.mf-submit-root .mf-submit-actions{
  display: flex;
  gap: 10px;
  margin-top: 18px;
  justify-content: flex-end;
}
.mf-submit-root .mf-submit-actions button{
  border: none;
  padding: 10px 18px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.875rem;
  cursor: pointer;
}
.mf-submit-root .mf-submit-actions .mf-submit-cancel{
  background: rgba(22,27,26,0.12);
  color: #161b1a;
}
.mf-submit-root .mf-submit-actions .mf-submit-confirm{
  background: #d2232a;
  color: white;
}
.mf-submit-root .mf-submit-actions .mf-submit-confirm:hover{
  background: #be3821;
}

/* Submit modal contact fields */
.mf-submit-root .mf-contact-fields{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.mf-submit-root .mf-contact-field label,
.mf-submit-root .mf-field label,
.mf-submit-root .mf-label{
  display: block;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(22, 27, 26, 0.9);
  margin-bottom: 6px;
}
.mf-submit-root .mf-contact-field input,
.mf-submit-root .mf-field input,
.mf-submit-root .mf-input{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(22,27,26,0.25);
  border-radius: 14px;
  padding: 12px 12px;
  font-size: 0.95rem;
  line-height: 1.2;
  background: rgba(255,255,255,0.7);
  color: #161b1a;
  outline: none;
}
.mf-submit-root .mf-contact-field input:focus{
  border-color: rgba(22,27,26,0.55);
  background: rgba(255,255,255,0.9);
}
.mf-submit-root .mf-contact-error{
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(210, 35, 42, 0.10);
  border: 1px solid rgba(210, 35, 42, 0.25);
  color: #7a0f14;
  font-size: 0.875rem;
}
.mf-submit-root .mf-contact-error.is-visible{ display: block; }

/* UWU member radio (contact modal) */
.mf-submit-root .mf-radio-group{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.mf-submit-root .mf-radio-option{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.95rem;
  color: #161b1a;
}
.mf-submit-root .mf-radio-option input[type="radio"]{
  width: auto;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* Why widget trigger */
.mf-why-root .mf-why-trigger{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: rgba(22, 27, 26, 0.7);
  font-size: 0.875rem;
  font-family: "Roboto Condensed", sans-serif;
  cursor: pointer;
  padding: 0;
}
.mf-why-root .mf-why-trigger:hover{
  color: #161b1a;
}
.mf-why-root .mf-why-plus{
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(22,27,26,0.35);
  font-weight: 700;
  line-height: 1;
}


/* === v1.3.0 updates === */
.mf-poll-root .bar-header{
  padding: 16px;
}
.mf-poll-root .bar-label,
.mf-poll-root .info-btn,
.mf-poll-root .watermark-label,
.mf-poll-root .mobile-watermark{
  display: none !important;
}

.mf-poll-root .bar-fill,
.mf-poll-root .mobile-bar-fill{
  overflow: hidden;
}

.mf-poll-root .bar-vertical-label{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 1.15rem;
  line-height: 1;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 0 rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.35);
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.25);
  pointer-events: none;
  user-select: none;
}

.mf-poll-root .avg-line,
.mf-poll-root .mobile-avg-line{
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dotted rgba(22,27,26,0.65);
  z-index: 15;
  pointer-events: none;
}

.mf-poll-root .mobile-avg-line{
  border-top-width: 2px;
}

/* Ensure avg line sits above the fill but below drag indicator */
.mf-poll-root .avg-line{ z-index: 14; }
.mf-poll-root .bar-fill{ z-index: 10; }

/* Top 3 shortcode/widget */
.mf-poll-top3{
  font-family: 'Roboto Condensed', sans-serif;
}
.mf-poll-top3-list{
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0;
}
.mf-poll-top3-item{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(22,27,26,0.15);
}
.mf-poll-top3-item:last-child{ border-bottom: 0; }
.mf-poll-top3-label{ font-weight: 700; }
.mf-poll-top3-pct{ font-family: "League Gothic", sans-serif; font-size: 1.5rem; }

/* ===============================
   Submit confirmation modal
   =============================== */

/* Lock page scroll when modal open */
body.mf-modal-open{overflow:hidden;}

/* Fullscreen overlay */
.mf-submit-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,0.55);
}

.mf-submit-modal.is-open{display:flex;}

/* Panel */
.mf-submit-modal-panel{
  width:min(560px, 100%);
  background:#ffffff;
  border-radius:24px;
  box-shadow:0 24px 60px rgba(0,0,0,0.25);
  position:relative;
  overflow:hidden;
}

.mf-submit-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.mf-submit-modal-close:hover{background:rgba(0,0,0,0.12);}

.mf-submit-modal-inner{padding:22px 22px 18px;}

.mf-submit-modal-title{
  font-weight:900;
  letter-spacing:0.02em;
  margin:0 0 8px 0;
  font-size:22px;
  line-height:1.15;
  color:#161b1a;
}

.mf-submit-modal-body{
  margin:0 0 14px 0;
  color:#2b2f2e;
  opacity:0.9;
  font-size:14px;
  line-height:1.45;
}

.mf-submit-fields{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:14px 0 0;
}

.mf-submit-field label{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:0 0 6px;
  color:#161b1a;
}

.mf-submit-field input{
  width:100%;
  box-sizing:border-box;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.18);
  background:#fff;
  font-size:14px;
  outline:none;
}

.mf-submit-field input:focus{
  border-color:rgba(0,0,0,0.35);
  box-shadow:0 0 0 3px rgba(0,0,0,0.08);
}

.mf-submit-modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:14px 22px 22px;
  border-top:1px solid rgba(0,0,0,0.08);
  background:rgba(0,0,0,0.02);
}

.mf-submit-modal-actions .mf-submit-btn{
  min-width:140px;
}

@media (max-width: 480px){
  .mf-submit-modal{padding:14px;}
  .mf-submit-modal-inner{padding:18px 18px 14px;}
  .mf-submit-modal-actions{padding:12px 18px 18px;}
  .mf-submit-modal-actions{flex-direction:column;}
  .mf-submit-modal-actions .mf-submit-btn{width:100%;}
}