#offerDialogContainer {
      dialog {
          position: fixed;
          margin: auto;
          width: 360px;
          max-width: 90vw;
          border: none;
          border-radius: 16px;
          padding: 0;
          box-shadow: 0 20px 60px rgba(20, 20, 43, 0.25);
          animation: pop 0.18s ease;
      }

      dialog::backdrop {
          background: rgba(20, 20, 43, 0.45);
          backdrop-filter: blur(2px);
      }

      @keyframes pop {
          from {
              opacity: 0;
              transform: scale(0.96) translateY(8px);
          }

          to {
              opacity: 1;
              transform: scale(1) translateY(0);
          }
      }

      form {
          display: flex;
          flex-direction: column;
          gap: 16px;
          padding: 28px;
      }

      h3 {
          margin: 0 0 4px 0;
          font-size: 20px;
          font-weight: 700;
          color: var(--text);
          letter-spacing: -0.01em;
      }

      .field {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      label {
          font-size: 13px;
          font-weight: 600;
          color: var(--text);
      }

      input {
          padding: 10px 12px;
          font-size: 14px;
          font-family: inherit;
          color: var(--text);
          border: 1.5px solid var(--border);
          border-radius: 9px;
          background: #fbfbfe;
          outline: none;
          transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
      }

      input::placeholder {
          color: var(--muted);
      }

      input:focus {
          border-color: var(--primary);
          background: #fff;
          box-shadow: 0 0 0 3px rgba(109, 94, 252, 0.15);
      }

      input.error {
          border-color: var(--danger);
      }

      input.error:focus {
          box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.15);
      }

      .field-error {
          color: var(--danger);
          font-size: 12px;
          min-height: 14px;
          font-weight: 500;
      }

      .form-error {
          color: var(--danger);
          font-size: 13px;
          font-weight: 500;
          background: rgba(229, 72, 77, 0.08);
          border-radius: 8px;
          padding: 8px 10px;
          margin: 0;
      }

      .form-error:empty {
          display: none;
          padding: 0;
      }

      .actions {
          display: flex;
          justify-content: flex-end;
          gap: 10px;
          margin-top: 8px;
          padding-top: 16px;
          border-top: 1px solid var(--border);
      }

      button {
          padding: 10px 18px;
          font-size: 14px;
          font-weight: 600;
          font-family: inherit;
          border-radius: 9px;
          cursor: pointer;
          border: none;
          transition: transform 0.1s ease, opacity 0.15s ease, box-shadow 0.15s ease;
      }

      button:active {
          transform: scale(0.97);
      }

      #cancelBtn {
          background: #fff;
          color: var(--text);
          border: 1.5px solid var(--border);
      }

      #cancelBtn:hover {
          background: #f7f7fb;
      }

      #submitBtn {
          background: linear-gradient(135deg, var(--primary), var(--primary-dark));
          color: #fff;
          box-shadow: 0 3px 10px rgba(109, 94, 252, 0.35);
      }

      #submitBtn:hover {
          box-shadow: 0 5px 14px rgba(109, 94, 252, 0.45);
      }

      #submitBtn:disabled {
          opacity: 0.7;
          cursor: not-allowed;
          transform: none;
      }

      #heading {
        font-size: small;
      }

      #domain_name {
        margin-top: -15px;
      }
  }