{"version":3,"file":"admin/css/builder.min.css","mappings":"AAQE,wBACE,sBAIF,4BACE,4BAGF,qCACE,8BACA,2BACA,kBAGF,iHAGE,4BAIF,wDACE,mBACA,4BAEA,2EACE,aACA,mBAGF,6EACE,aAEA,mFACE,6BAIJ,4EACE,sBAGF,8EACE,kBACA,YACA,eACA,aACA,gBACA,sBACA,oCACA,kBAKJ,sCACE,kBAEA,qDACE,iBACA,wBAEA,8DACE,sCACA,iCAGF,gEACE,WACA,YACA,eAIJ,qDACE,0BAEA,wEACE,kBACA,sBACA,2BACA,qCAGF,mEACE,gBAGF,6EACE,YACA,yBACA,eACA,eAEA,mFACE,aACA,6BAGF,wFACE,WACA,YACA,eAMR,kBACE,KACE,UACA,0BAEF,GACE,UACA,yBAKJ,kCACE,mBACA,kBAIF,yCACE,sBACA,kBACA,gBAIF,wCACE,aACA,kBACA,gBACA,sBACA,kBACA,aACA,sCACA,aACA,YACA,0BACA,oBACA,QACA,SACA,mBAEA,+CACE,cAGF,wDACE,kBACA,aACA,8BACA,mBACA,mBACA,oBACA,6BAEA,2DACE,SACA,eACA,gBACA,cAGF,uEACE,eACA,cACA,0BACA,WACA,YACA,eACA,aACA,mBACA,uBACA,kBAEA,6EACE,cACA,qCAMJ,qEACE,mBAEA,gFACE,gBAGF,2EACE,cACA,kBACA,eACA,gBAGF,uJACE,WACA,sBACA,kBACA,iBACA,eAEA,mKACE,qBACA,6BACA,aAOR,+CACE,WACA,kBACA,WACA,SACA,QACA,SACA,oCACA,qCACA,6BACA,UAGF,8CACE,WACA,kBACA,WACA,UACA,QACA,SACA,oCACA,qCACA,6BACA,UAMN,sBACE,eACA,MACA,OACA,QACA,SACA,gCACA,cACA,aACA,mBACA,uBACA,UACA,4BACA,oBAEA,6BACE,UACA,oBAGF,oCACE,gBACA,kBACA,sCACA,UACA,gBACA,2BACA,8BACA,gBAEA,yDACE,yBACA,WACA,kBACA,aACA,mBAEA,4EACE,kBACA,eAGF,6EACE,eACA,gBACA,SAIJ,0DACE,aACA,eACA,WACA,gBAGF,0DACE,aACA,yBACA,oBACA,SAEA,iEACE,iBACA,kBACA,eACA,gBACA,eACA,YACA,wBAEA,qFACE,yBACA,WAEA,2FACE,yBAIJ,sFACE,yBACA,WACA,iBACA,aACA,mBACA,uBAEA,iGACE,eACA,WACA,YAGF,4FACE,yBAOV,2CACE,wBAKJ,0BACE,aACA,mBACA,YAEA,gDACE,kBACA,WACA,WACA,yBACA,kBACA,eAGF,+CACE,kBACA,YACA,WACA,yBACA,kBACA,oBAGF,iDACE,kBACA,QACA,QACA,WACA,YACA,yBACA,kBACA,+BACA,eACA,oCAEA,uDACE,aACA,yCAGF,uDACE,yBAGF,wDACE,yBACA,gBAIJ,yCACE,WACA,iBAKJ,4BACE,eACA,SACA,WACA,cAEA,0CACE,sBACA,kBACA,8DACA,mBACA,kBACA,aACA,mBACA,8BACA,gBACA,gBACA,+CAEA,2DACE,2BAGF,oDACE,UAGF,6DACE,kBACA,eAGF,gEACE,OACA,SACA,eACA,gBAGF,8DACE,yBACA,YACA,eACA,YACA,gBACA,cACA,aACA,mBACA,uBAEA,oEACE,cAGF,yEACE,eACA,WACA,YAOR,wIAEE,uLAEA,0BACA,gCACA,0CAEA,oJACE,WACA,kBACA,MACA,OACA,QACA,SACA,oCAIJ,0CAEE,wBACA,eACA,cACA,mBAEA,sDACE,yBAGF,wDACE,yBACA,sBAIJ,sCACE,gBACA,sB","sources":["webpack://modify-login/./src/admin/css/builder.scss"],"sourcesContent":["/* \n * Modify Login Builder Form Styles\n * Complements Tailwind classes in the template\n */\n\n/* Main Builder Container */\n#modify-login-builder {\n  /* CSS Reset for WordPress Core Styles */\n  * {\n    box-sizing: border-box;\n  }\n  \n  /* Override Tailwind overflow properties */\n  .card {\n    overflow: visible !important;\n  }\n  \n  .panel-content {\n    overflow-x: visible !important;\n    overflow-y: auto !important;\n    position: relative;\n  }\n  \n  .media-dropzone, \n  .form-group,\n  .preview-thumbnail {\n    overflow: visible !important;\n  }\n  \n  /* Gutenberg Color Picker Styles */\n  .gutenberg-color-picker-container {\n    margin-bottom: 16px;\n    overflow: visible !important;\n    \n    .color-picker-main {\n      display: flex;\n      align-items: center;\n    }\n    \n    .color-picker-button {\n      outline: none;\n      \n      &:focus {\n        box-shadow: 0 0 0 1px #2271b1;\n      }\n    }\n    \n    .color-picker-value {\n      font-family: monospace;\n    }\n    \n    .color-picker-popover {\n      position: relative;\n      z-index: 999;\n      margin-top: 8px;\n      padding: 14px;\n      background: white;\n      border: 1px solid #ddd;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      border-radius: 4px;\n    }\n  }\n  \n  /* Media Dropzone Styles */\n  .media-dropzone {\n    position: relative;\n    \n    .dropzone-area {\n      min-height: 120px;\n      transition: all 0.2s ease;\n      \n      &.dragover {\n        background-color: rgba(59, 130, 246, 0.05);\n        border-color: rgba(59, 130, 246, 0.4);\n      }\n      \n      .dashicons {\n        width: 40px;\n        height: 40px;\n        font-size: 40px;\n      }\n    }\n    \n    .image-preview {\n      animation: fadeIn 0.3s ease;\n      \n      .preview-thumbnail {\n        position: relative;\n        background-size: cover;\n        background-position: center;\n        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n      }\n      \n      .preview-info {\n        line-height: 1.3;\n      }\n      \n      .preview-actions button {\n        border: none;\n        background: transparent;\n        cursor: pointer;\n        font-size: 16px;\n        \n        &:focus {\n          outline: none;\n          box-shadow: 0 0 0 1px #2271b1;\n        }\n        \n        .dashicons {\n          width: 16px;\n          height: 16px;\n          font-size: 16px;\n        }\n      }\n    }\n  }\n  \n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(5px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  \n  /* Form Control Styles */\n  .form-group {\n    margin-bottom: 20px;\n    position: relative;\n  }\n  \n  /* Preview Styles */\n  .preview-container {\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  \n  /* Image Properties Popover */\n  .image-properties {\n    display: none;\n    position: absolute;\n    background: white;\n    border: 1px solid #ddd;\n    border-radius: 6px;\n    padding: 18px;\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);\n    z-index: 9999;\n    width: 280px;\n    animation: fadeIn 0.2s ease;\n    pointer-events: auto;\n    right: 0;\n    top: 40px;\n    margin-right: -10px;\n    \n    &.active {\n      display: block;\n    }\n    \n    .popover-header {\n      position: relative;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 15px;\n      padding-bottom: 10px;\n      border-bottom: 1px solid #eee;\n      \n      h4 {\n        margin: 0;\n        font-size: 14px;\n        font-weight: 600;\n        color: #1e1e1e;\n      }\n      \n      .close-popover {\n        cursor: pointer;\n        color: #757575;\n        transition: color 0.2s ease;\n        width: 20px;\n        height: 20px;\n        font-size: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 50%;\n        \n        &:hover {\n          color: #d63638;\n          background-color: rgba(214, 54, 56, 0.05);\n        }\n      }\n    }\n    \n    .popover-content {\n      .form-group {\n        margin-bottom: 12px;\n        \n        &:last-child {\n          margin-bottom: 0;\n        }\n        \n        label {\n          display: block;\n          margin-bottom: 5px;\n          font-size: 12px;\n          font-weight: 500;\n        }\n        \n        select, input {\n          width: 100%;\n          border: 1px solid #ddd;\n          border-radius: 4px;\n          padding: 8px 10px;\n          font-size: 13px;\n          \n          &:focus {\n            border-color: #2271b1;\n            box-shadow: 0 0 0 1px #2271b1;\n            outline: none;\n          }\n        }\n      }\n    }\n    \n    /* Arrow pointing to the gear icon */\n    &:before {\n      content: '';\n      position: absolute;\n      right: 12px;\n      top: -8px;\n      width: 0;\n      height: 0;\n      border-left: 8px solid transparent;\n      border-right: 8px solid transparent;\n      border-bottom: 8px solid white;\n      z-index: 2;\n    }\n    \n    &:after {\n      content: '';\n      position: absolute;\n      right: 11px;\n      top: -10px;\n      width: 0;\n      height: 0;\n      border-left: 9px solid transparent;\n      border-right: 9px solid transparent;\n      border-bottom: 9px solid #ddd;\n      z-index: 1;\n    }\n  }\n}\n\n/* Custom Confirmation Modal */\n.custom-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n  \n  &.active {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  \n  .custom-modal {\n    background: white;\n    border-radius: 8px;\n    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);\n    width: 90%;\n    max-width: 450px;\n    transform: translateY(20px);\n    transition: transform 0.3s ease;\n    overflow: hidden;\n    \n    .custom-modal-header {\n      background-color: #2271b1;\n      color: white;\n      padding: 16px 20px;\n      display: flex;\n      align-items: center;\n      \n      .custom-modal-icon {\n        margin-right: 12px;\n        font-size: 24px;\n      }\n      \n      .custom-modal-title {\n        font-size: 18px;\n        font-weight: 600;\n        margin: 0;\n      }\n    }\n    \n    .custom-modal-content {\n      padding: 20px;\n      font-size: 14px;\n      color: #555;\n      line-height: 1.6;\n    }\n    \n    .custom-modal-actions {\n      display: flex;\n      justify-content: flex-end;\n      padding: 0 20px 20px;\n      gap: 10px;\n      \n      button {\n        padding: 8px 16px;\n        border-radius: 4px;\n        font-size: 13px;\n        font-weight: 500;\n        cursor: pointer;\n        border: none;\n        transition: all 0.2s ease;\n        \n        &.custom-modal-cancel {\n          background-color: #f0f0f1;\n          color: #555;\n          \n          &:hover {\n            background-color: #e5e5e5;\n          }\n        }\n        \n        &.custom-modal-confirm {\n          background-color: #2271b1;\n          color: white;\n          padding: 8px 12px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          \n          .dashicons {\n            font-size: 18px;\n            width: 18px;\n            height: 18px;\n          }\n          \n          &:hover {\n            background-color: #135e96;\n          }\n        }\n      }\n    }\n  }\n  \n  &.active .custom-modal {\n    transform: translateY(0);\n  }\n}\n\n/* Styling for opacity range slider */\n.opacity-slider-container {\n  display: flex;\n  align-items: center;\n  height: 30px;\n  \n  .opacity-slider-track {\n    position: relative;\n    width: 100%;\n    height: 8px;\n    background-color: #e2e8f0;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n  \n  .opacity-slider-fill {\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    background-color: #3b82f6;\n    border-radius: 4px;\n    pointer-events: none;\n  }\n  \n  .opacity-slider-handle {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    width: 18px;\n    height: 18px;\n    background-color: #3b82f6;\n    border-radius: 50%;\n    transform: translate(50%, -50%);\n    cursor: pointer;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n    \n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);\n    }\n    \n    &:hover {\n      background-color: #2563eb;\n    }\n    \n    &:active {\n      background-color: #1d4ed8;\n      cursor: grabbing;\n    }\n  }\n  \n  .opacity-value {\n    width: 40px;\n    text-align: right;\n  }\n}\n\n/* Notification styles */\n#modify-login-notifications {\n  position: fixed;\n  top: 20px;\n  right: 20px;\n  z-index: 99999;\n  \n  .notification {\n    background-color: white;\n    border-radius: 4px;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n    margin-bottom: 10px;\n    padding: 12px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    min-width: 300px;\n    max-width: 400px;\n    transition: transform 0.3s ease, opacity 0.3s ease;\n    \n    &.translate-x-full {\n      transform: translateX(100%);\n    }\n    \n    &.opacity-0 {\n      opacity: 0;\n    }\n    \n    .notification-icon {\n      margin-right: 12px;\n      font-size: 20px;\n    }\n    \n    .notification-message {\n      flex: 1;\n      margin: 0;\n      font-size: 14px;\n      line-height: 1.4;\n    }\n    \n    .notification-close {\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      padding: 4px;\n      margin-left: 8px;\n      color: #6b7280;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      \n      &:hover {\n        color: #374151;\n      }\n      \n      .dashicons {\n        font-size: 16px;\n        width: 16px;\n        height: 16px;\n      }\n    }\n  }\n}\n\n/* Empty color picker styling */\n.gutenberg-color-picker-container.color-empty .color-picker-button,\n.gutenberg-color-picker-container.color-cleared .color-picker-button {\n  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),\n                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);\n  background-size: 10px 10px;\n  background-position: 0 0, 5px 5px;\n  background-color: transparent !important;\n  \n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: rgba(255, 255, 255, 0.7);\n  }\n}\n\n.section-reset-button,\n.field-reset-button {\n  transition: all 0.2s ease;\n  font-size: 11px;\n  line-height: 1;\n  white-space: nowrap;\n  \n  &:hover {\n    background-color: #e2e8f0;\n  }\n  \n  &:active {\n    background-color: #cbd5e0;\n    transform: scale(0.98);\n  }\n}\n\n.form-group label .field-reset-button {\n  margin-left: 8px;\n  vertical-align: middle;\n}\n"],"names":[],"sourceRoot":""}